前几天用到ComboBox的本地模式,要动态修改Store显示在ComboBox上
写了一个小例子
把输入框的值作为ComboBox的动态值添加
先写本地store 和 data数据
var storeData = [ ['一','1'], ['二','2'], ['三','3'], ['四','4'] ] var store = Ext.create('Ext.data.ArrayStore', { // store configs autoDestroy: true, idIndex: 0, fields: [ 'addText', {name: 'addValue', type: 'string'} ], data : storeData });
然后开始写 主框架
var form = Ext.create('Ext.form.Panel', { title : 'Form Panel', renderTo : 'test', frame : true, buttonAlign : 'center', width : 240, height : 260, fieldDefaults: { msgTarget : 'side', labelAlign: 'top', labelWidth: 100, width : 200 }, items :[ { xtype : 'textfield', fieldLabel : 'ComboBox\'s Text', name : 'ComboText', allowBlank : false },{ xtype : 'textfield', fieldLabel : 'ComboBox\'s Value', name : 'ComboValue', allowBlank : false }, this.testCombo = Ext.create('Ext.form.field.ComboBox', { fieldLabel : 'Dynamic ComboBox', store : store, queryMode : 'local', displayField: "addText", valueField: "addValue" }) ], buttons : [ { text : 'Add', handler : function(btn){ if(!form.getForm().isValid()) return; storeData.push( [ form.getForm().findField('ComboText').getValue(), form.getForm().findField('ComboValue').getValue() ]); testCombo.store.loadData(storeData); } },{ text : 'ComboBox Value', handler : function(btn){ alert(testCombo.getValue()); } } ] });
动态值生成