|
Posted on 2013-04-29 11:56 小胡子 阅读(331) 评论(0) 编辑 收藏 所属分类: Ext
先上图 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. * licensing@extjs.com * * 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); }); http://www.blogjava.net/winderain/articles/200573.html
|