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