grid分頁：
把grid和page工具綁定在一起
// create the Data Store
var store = new Ext.data.Store({
url:'termSearch.action', storeId:'searchResult',
reader: new Ext.data.JsonReader({ totalProperty: 'totalrows', root: 'data', fields: [ {name: 'id', type:'int'}, 'consumer', 'area', 'termid', 'name', 'status', 'udate' ]
})
}); var sm = new Ext.grid.CheckboxSelectionModel();// 多選行 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'序號',width:40,dataIndex:'id'}, {header:'用戶',width:50,dataIndex:'consumer'}, {header:'地域',width:50,dataIndex:'area'}, {header:'終端編號',dataIndex:'termid'}, {header:'終端名稱',dataIndex:'name'}, {header:'終端狀態',dataIndex:'status',renderer: statusColor}, {header:'更新日期',dataIndex:'udate'} ]); // by default columns are sortable cm.defaultSortable = true; var grid = new Ext.grid.GridPanel({ store: store, cm: cm, stripeRows: true, height:350, width:800, title:'', tbar: new Ext.PagingToolbar({ pageSize: 10, width:'98%', store: store, displayInfo: true, displayMsg: '顯示第 {0} 條到 {1} 條記錄，共 {2} 條', emptyMsg: "無記錄" }) });
窗口布局：
Ext2有很多佈局，就是在layout包下，我這裏用了TableLayout，TableLayout其實就是和一個HTML中的表格一樣，可以作row和column的span
var table = new Ext.Panel({ layout:'table', defaults: { bodyStyle:'padding:1px' }, layoutConfig: { columns: 4 }, items: [{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '終端編號', name: 'termId', id:'termId', anchor:'95%' }] },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '終端名稱', name: 'termName', id:'termName', anchor:'95%' }] },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '刷新延時', name: 'timeLapse', id:'timeLapse', anchor:'95%', xtype:'combo', store: new Ext.data.Store({ proxy: new Ext.data.MemoryProxy([['0','0'],['5','5'],['10','10'],['15','15'],['20','20']]), reader: new Ext.data.ArrayReader({}, [ {name: 'value',mapping: 0, type: 'int'}, {name: 'text',mapping: 1} ]), autoLoad:true }) , displayField:'text', valueField:'value', hiddenName:'timeLapseValue', typeAhead: true, triggerAction: 'all', forceSelection:true }], colspan:2 },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '用戶', name: 'consumerId', anchor:'95%', id: 'consId', xtype:'combo', anchor:'95%', store: consumerStore, displayField:'text', valueField:'value', hiddenName:'consumerId', typeAhead: true, mode: 'local', triggerAction: 'all', forceSelection : true, emptyText:'Select a user
', allowBlank: false, selectOnFocus:true, forceSelection:true, listeners:{ select:{ fn:function(combo,record,index) { var store = getSelectStore("55",record.get('value')); Ext.getCmp('areaId').clearValue(); Ext.getCmp('areaId').store = store; if(Ext.getCmp('areaId').view){ Ext.getCmp('areaId').view.setStore(store); } Ext.getCmp('areaId').enable(); } } } }] },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '地域', name: 'consumerArea', id:'areaId', anchor:'95%', xtype:'combo', store: new Ext.data.Store(), displayField:'text', valueField:'value', hiddenName:'consumerAreaId', typeAhead: true, mode: 'local', triggerAction: 'all', forceSelection : true, emptyText:'Select a area', allowBlank: false, selectOnFocus:true, forceSelection:true, disabled:true }] },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '終端狀態', name: 'termStatus', id:'termStatus', anchor:'95%', xtype:'combo', store: termStatusStore, displayField:'text', valueField:'value', hiddenName:'termStatusId', typeAhead: true, triggerAction: 'all', forceSelection:true, editable:false, mode: 'local' }] },{ layout: 'form', labelWidth:55, items: [{ name: 'Save', id: 'Save', text: '查詢', xtype:'button' }] }] });
下拉框級聯：
下拉框級聯的思路其實很簡單，就是在第一個的select事件中刷新跌入下拉框的store。這裏問題主要在如何給第二個下拉框的store賦值，我這裏是用了一個方法獲得一個新的store，然後賦值的。不僅要各combo賦值，還要給combo.view賦值。一開始就卡在這裏了，物理如何我給combo賦值後，下拉框中的值總是不能夠及時刷新。給combo.view賦值是需要使用combo.view.setStore(store)這個方法，而不能直接賦值。在賦值的時候需要檢查combo.view 是否存在。
var store = getSelectStore("55",record.get('value')); Ext.getCmp('areaId').clearValue(); Ext.getCmp('areaId').store = store; if(Ext.getCmp('areaId').view){ Ext.getCmp('areaId').view.setStore(store); } Ext.getCmp('areaId').enable();
/**//* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, Ext JS, LLC. * [email protected] * * http://extjs.com/license */Ext.onReady(function(){// Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); // example of custom renderer function function statusColor(val){ if(val == '在線'){ return '<span style="color:green;">' + val + '</span>'; }else if(val == '會議中'){ return '<span style="color:red;">' + val + '</span>'; } return val; } // create the Data Store var store = new Ext.data.Store({ // this page, an HttpProxy would be better// proxy: new Ext.data.MemoryProxy(data),// proxy: new Ext.data.HttpProxy({// url: 'termSearch.action'//// url:'../../temp/data.txt'// }), url:'termSearch.action', storeId:'searchResult', // create reader that reads the Topic records reader: new Ext.data.JsonReader({ totalProperty: 'totalrows', root: 'data',// id: 'id', fields: [ {name: 'id', type:'int'}, 'consumer', 'area', 'termid', 'name', 'status', 'udate'// {name: 'udate', mapping: 'udate', type: 'date', dateFormat: 'Y-m-d'} ] })// , // turn on remote sorting// remoteSort: true }); var sm = new Ext.grid.CheckboxSelectionModel();// 多選行 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'序號',width:40,dataIndex:'id'}, {header:'用戶',width:50,dataIndex:'consumer'}, {header:'地域',width:50,dataIndex:'area'}, {header:'終端編號',dataIndex:'termid'}, {header:'終端名稱',dataIndex:'name'}, {header:'終端狀態',dataIndex:'status',renderer: statusColor}, {header:'更新日期',dataIndex:'udate'} ]);// cm.defaultSortable = true; // by default columns are sortable cm.defaultSortable = true; var grid = new Ext.grid.GridPanel({ store: store, cm: cm, stripeRows: true, height:350, width:800, title:'', tbar: new Ext.PagingToolbar({ pageSize: 10, width:'98%', store: store,// paramNames:{rowStart: 'start', rowLimit: 'limit'}, displayInfo: true, displayMsg: '顯示第 {0} 條到 {1} 條記錄，共 {2} 條', emptyMsg: "無記錄" }) }); // grid.render('div-grid');// grid.getSelectionModel().selectFirstRow(); var consumerStore = getSelectStore("54"); var termTypeStore = getSelectStore("53"); var termStatusStore = getSelectStore("51"); // new Ext.data.SimpleStore({// fields: ['text'],// data : [['0','0'],['5','5'],['10','10'],['15','15'],['20','20']],// fields:[{name: 'value', mapping: 0},{name:'text',mapping:1}],// autoLoad:true// }) var table = new Ext.Panel({ layout:'table', defaults: { bodyStyle:'padding:1px' }, layoutConfig: { columns: 4 }, items: [{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '終端編號', name: 'termId', id:'termId', anchor:'95%' }] },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '終端名稱', name: 'termName', id:'termName', anchor:'95%' }] },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '刷新延時', name: 'timeLapse', id:'timeLapse', anchor:'95%', xtype:'combo', store: new Ext.data.Store({ proxy: new Ext.data.MemoryProxy([['0','0'],['5','5'],['10','10'],['15','15'],['20','20']]), reader: new Ext.data.ArrayReader({}, [ {name: 'value',mapping: 0, type: 'int'}, {name: 'text',mapping: 1} ]), autoLoad:true }) , displayField:'text', valueField:'value', hiddenName:'timeLapseValue', typeAhead: true, triggerAction: 'all', forceSelection:true }], colspan:2 },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '用戶', name: 'consumerId', anchor:'95%', id: 'consId', xtype:'combo', anchor:'95%', store: consumerStore, displayField:'text', valueField:'value', hiddenName:'consumerId', typeAhead: true, mode: 'local', triggerAction: 'all', forceSelection : true, emptyText:'Select a user', allowBlank: false, selectOnFocus:true, forceSelection:true, listeners:{ select:{ fn:function(combo,record,index) { // Ext.Msg.alert('','xxxxxxx'); var store = getSelectStore("55",record.get('value')); // Ext.Msg.alert(''+store.getCount(),'xxxxxxxxx='+store.getTotalCount()); Ext.getCmp('areaId').clearValue(); Ext.getCmp('areaId').store = store; if(Ext.getCmp('areaId').view){ Ext.getCmp('areaId').view.setStore(store);// Ext.getCmp('areaId').view.refresh(); } Ext.getCmp('areaId').enable(); } } } }] },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '地域', name: 'consumerArea', id:'areaId', anchor:'95%', xtype:'combo', store: new Ext.data.Store(), displayField:'text', valueField:'value', hiddenName:'consumerAreaId', typeAhead: true, mode: 'local', triggerAction: 'all', forceSelection : true, emptyText:'Select a area', allowBlank: false, selectOnFocus:true, forceSelection:true, disabled:true }] },{ width:165, layout: 'form', labelWidth:55, items: [{ xtype:'textfield', fieldLabel: '終端狀態', name: 'termStatus', id:'termStatus', anchor:'95%', xtype:'combo', store: termStatusStore, displayField:'text', valueField:'value', hiddenName:'termStatusId', typeAhead: true, triggerAction: 'all', forceSelection:true, editable:false, mode: 'local' }] },// {// width:165,// layout: 'form',// labelWidth:55,// items: [{// xtype:'textfield',// fieldLabel: '終端類型',// name: 'termType',// id:'termType',// anchor:'95%',// xtype:'combo',// store: termTypeStore,// displayField:'text',// valueField:'value',// hiddenName:'termTypeId',// typeAhead: true,// triggerAction: 'all',// forceSelection:true,// editable:false,// mode: 'local'// }]// // }, { layout: 'form', labelWidth:55, items: [{ name: 'Save', id: 'Save', text: '查詢', xtype:'button' }] }] });// table.render('div-grid'); var fp = new Ext.FormPanel({// labelAlign: 'top', frame:true, title: '.', bodyStyle:'padding:5px 5px 0', width: 800 }); fp.add(table); fp.add(grid); fp.render("div-form"); //增加基本參數 store.on('beforeload', function(store) { var para = {termId:'',termName:'',consumerId:'',areaId:'',termTypeId:'',tstatus:''}; para.termId = Ext.get('termId').getValue(); para.termName = Ext.get('termName').getValue(); para.consumerId = Ext.get('consumerId').getValue(); para.areaId = Ext.get('consumerAreaId').getValue(); para.tstatus = Ext.get('termStatusId').getValue(); Ext.apply(store.baseParams,para); }); store.load({params:{start:0, limit:10}}); Ext.get("Save").on('click', function(){ store.load({params:{start:0, limit:10}}); });});function getSelectStore(selectId,pid){ if(!pid) pid = ''; var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ method: 'GET', url: '../webapp-cfg/getSelectOption.action?selectId='+selectId+'&pvalue='+pid+'&random='+Math.random() }), reader: new Ext.data.ArrayReader( {id: "value"}, [ {name: 'value', mapping: 'value'}, {name: 'text',mapping:'text'} ]), autoLoad:true }); store.load(); store.on('load', function( s, records, options ) { var rs = new Array(1); var all = new Ext.data.Record([{name: 'value', mapping: 'value'}, {name: 'text',mapping:'text'}]); all.set('value',''); all.set('text','全部'); rs[0] = all; s.insert(0,rs); });