Ext4.0 动态修改ComboBox选择项(本地模式) 博客分类： ExtJs extjscombolocal

前几天用到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());
					
				}
			}
		]
	});

   

显示界面

动态值生成