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;
    }
}

八、远程排序