Extjs4 Grid 使用总结

1、拖拽列 隐藏列自动存入cookie 

            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

2、动态加载

Ext.require([

                'Ext.grid.*',

                'Ext.data.*',

                'Ext.selection.*',

                'Ext.PagingToolbar'

            ]);

3、store（注意注释的部分）

var store = Ext.create('Ext.data.Store', {

                model: 'ThisSys',

                pageSize: 10, // 分页大小

//remoteSort: true, //后台排序

                proxy: {

                    type: 'ajax',

                    url: '<%=Url.Action("GetList","ThisSys") %>',

                    actionMethods: { read: 'POST' }, //将提交方式改为post

                    reader: {

type: 'json',

                        root: 'rows',

                        totalProperty: 'results'
                    }

                },

                sorters: [{ //排序

                    property: 'Code',

                    direction: 'ASC'//'DESC'

                }],

                autoLoad: true

});

4、Grid中在每一列的前面加一个单选框

selModel: Ext.create('Ext.selection.CheckboxModel'),

5、Grid中增加索引列

columns: [

                   Ext.create('Ext.grid.RowNumberer'), //索引列

   {header: '编号', sortable: true, dataIndex: 'ID', hidden: true },

                   { header: '名称', sortable: true, dataIndex: 'Name' }],

6、Grid中实现分页（注意如果store中没有指定分页大小，则只能显示当前页的数据）

bbar: new Ext.PagingToolbar({
                    pageSize: 10,
                    store: store,       //将分页工具条与Ext.data.Store关联，从而共享数据模型 
                    displayInfo: true,
                    displayMsg: "显示第 {0} - {1}条记录,共 {2} 条记录",
                    emptyMsg: "没有记录"
                })

7、查询Grid

            Ext.get('Btn_search').on('click', function () {
                var search_store = grid.getStore();
                search_store.on('beforeload', function (store, options) {
                    var search_params = { search_cName: Ext.get('txt_Name').getValue() };
                    Ext.apply(store.proxy.extraParams, search_params); //增加新的参数
                });
                search_store.load({ params: { start: 0, limit: 10} }); //重新加载数据
            });

8、Grid行单击

grid.addListener('itemclick', function (grid, rowindex, e) {
                var selectModel = grid.getSelectionModel().getLastSelected(); //最后选中的行
                Id = selectModel.data.ID; //选中行的ID
            });

转载于:https://www.cnblogs.com/rsls/archive/2012/07/30/4364121.html