一、给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 = "";
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="内容详细信息:
' + value +'"';
return value;
}
}

八、远程排序