Ext4.0 动态修改ComboBox选择项(本地模式)

最新推荐文章于 2018-01-05 16:31:33 发布

最新推荐文章于 2018-01-05 16:31:33 发布 · 1k 阅读

文章标签：

#extjs #combo #local

ExtJs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ExtJS框架实现ComboBox控件的本地模式动态加载功能。通过创建ArrayStore并结合表单输入，实现了将用户输入的值动态添加到ComboBox的下拉选项中。

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

显示界面