Extjs4 的一些语法 持续更新中
一、给GridPanel增加成两行toolbar
tbar: { xtype: 'container', layout: 'anchor', defaults: {anchor: '0'}, defaultType: 'toolbar', items: [{ items: [...] // toolbar 1 }, { items: [...] // toolbar 2 }] }
二、去掉formPanel的边框
var postForm = Ext.create('Ext.form.Panel', { style:'border-width:0 0 0 0;',
三、Grid SelectModel
var grid = Ext.create('Ext.grid.Panel', { id: 'user_grid', selModel: Ext.create('Ext.selection.CheckboxModel',{mode: "MULTI"}),
var records = grid.getSelectionModel().getSelection();
四、store
var store = Ext.create('Ext.data.JsonStore', { pageSize : Math.floor(clientHeight/25), proxy : { type : 'ajax', url : '/system_cases.do?method=getList', reader : { type : 'json', root : 'datas', totalProperty : 'sum', idProperty: "case_id" } }, fields: ['case_id', 'case_name', 'case_des', 'enabled', 'create_user_name', 'create_dt'] });
五、store reload传入搜索条件,适用于带条件翻页
//extjs4
store.on('beforeload',function(store, options){ Ext.apply(store.proxy.extraParams, { 'log_info': Ext.getCmp('log_info').getValue(), 'start_date': Ext.getCmp("start_date").getValue(), 'end_date': Ext.getCmp("end_date").getValue() }); });
//extjs3
store.on('beforeload',function(){
Ext.apply(
this.baseParams,
{
'fileDto.file.title':Ext.getCmp('title').getValue(),
'fileDto.file.fileCodeNum':Ext.getCmp('fileCodeNum').getValue(),
'fileDto.file.year':Ext.getCmp('year').getValue()
}
);
});
六、checkbox以及radio
var role_store = Ext.data.StoreManager.lookup('role_store'); var user_role_store = Ext.create('Ext.data.JsonStore', { fields: ['users_id', 'role_id', 'users2role_id'], proxy: { type: 'ajax', //the store will get the content from the .json file url: '/system_user.do?method=getUserRoleList&users_id='+record.data.users_id, reader : { type : 'json', root : 'datas', totalProperty : 'sum', idProperty: "users2role_id" } } }); var role_data = new Array(); role_store.each(function(record) { role_data.push({ boxLabel: record.data.role_name, name: 'role_ids', inputValue: record.data.role_id }); }); var checkGroup = { xtype: 'fieldset', title: '角色管理', layout: 'anchor', defaults: { anchor: '100%' }, collapsible: true, collapsed: false, items: [{ xtype: 'checkboxgroup', fieldLabel: '用户角色', name: 'user_role_group', //cls: 'x-check-group-alt', // Distribute controls across 3 even columns, filling each row // from left to right before starting the next row columns: 2, items: role_data }] };
//将radio选择默认值 postForm.getForm().findField("user_role_group").setValue({role_ids: user_role_array});
七、Grid提示
{text: "略缩图", dataIndex: 'img', renderer: function(value, metaData, record, rowIndex, columnIndex, store) { var meta = "<img src='system/desktop/images/grid32x32.gif' />"; metaData.tdAttr = 'data-qtip="' + meta +'"'; return '<img width="20" height="20" src="system/images/loading.gif" class="pic" errorimg="system/desktop/images/accordian.gif">'; } }
//extjs3 的实现方式
{header: "内容", width: 320, sortable: true, dataIndex: 'noteContent', renderer: function(value, metadata, record, rowIndex, columnIndex, store) { metadata.attr = 'ext:qtip="内容详细信息:<br/>' + value +'"'; return value; } }
八、远程排序