ExtJS combobox动态加载数据
数据源的坑
错误的数据源
var comboOptions = new Ext.data.JsonStore({ url: 'TTS/TTS_Dept_FDate.ashx', root: 'children', fields: [{name:'ID', name:'Dept'}] });
后台返回的JSON格式[{"ID":"123","Dept":"财务"},...]
没有报错但是返回的数据每一行的对象的data属性和json属性不一致 导致选来选去都是第一项
修改后
var comboOptions = new Ext.data.JsonStore({ url: 'TTS/TTS_Dept_FDate.ashx', root: 'children', fields: ['ID', 'Dept'] });
因为返回的事JSON格式并不需要去指定Name直接以上格式就能获取数据
var cmb = new Ext.form.ComboBox({ id: 'ruleid', name: 'ruleid', forceSelection: true, width: 150, listWidth: 150, valueField: 'ID', displayField: 'Dept', store: comboOptions, typeAhead: false, mode: 'local', triggerAction: 'all', selectOnFocus: false, allowBlank: false, listeners: { select: function (combo, record, index) { stroe.baseParams['Dept'] = record.ID; stroe.load(); } } }); comboOptions.load(); comboOptions.on('load', function (store, record, opts) { var combo = Ext.getCmp("ruleid"); var firstValue = record[0].data.ID; //这种方法也可以获得第一项的值 combo.setValue(firstValue); //设置值 stroe.load(); })
这样就设置默认选中第一项
var store = new Ext.Data.JsonStore({ root: 'children', totalProperty: 'totalRows', idProperty: 'id', remoteSort: true, baseParams: { limit: YZSoft.EnvSetting.PageSize.defaultSize }, fields: [ { name: 'id' }, { name: 'RowNum' }, { name: 'PSN' }, { name: 'PName' }, { name: 'Price' }, { name: 'Describe' }, { name: 'Require' }, { name: 'IsStop' }, { name: 'CreateDate' }, { name: 'CreateAccount' }, { name: 'CreateName' } ], proxy: new Ext.data.HttpProxy({ method: 'GET', url: 'TTS/TTS_Process.ashx' }), listeners: { scope: this, load: function () { if (!Ext.isEmpty(this.grid.loadSelectId)) { var sm = this.grid.getSelectionModel(); var rd = this.store.getById(this.grid.loadSelectId); if (rd) sm.selectRecords([rd]); this.grid.loadSelectId = ''; } this.updateStatus(); }, beforeload: function () { stroe.baseParams['Dept'] = Ext.getCmp('ruleid').getValue(); } } });
定义另外一个数据源,监听加载前事件把选中的值发送到后台