Extjs4 Grid 使用总结
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
});