`
目步
  • 浏览: 10962 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext4.0 动态修改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());
					
				}
			}
		]
	});
   

显示界面

动态值生成

 


 

  • 大小: 25 KB
  • 大小: 32 KB
  • MyJsp.rar (1.1 KB)
  • 描述: 全部代码 注意路径
  • 下载次数: 40
1
2
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    Ext2.0本地模式动态修改combobox选择项

    标题中的“Ext2.0本地模式动态修改combobox选择项”指的是使用Ext JS 2.0框架中的Combobox组件在本地数据模式下实现动态更新选择项的功能。Ext JS是一个流行的JavaScript库,主要用于构建富客户端Web应用程序。...

    4.0Ext 本地化

    静态本地化通常是在开发阶段就确定好语言设置,而动态本地化则允许用户根据自己的需求在应用运行时进行选择。 让我们详细探讨动态本地化的方法。首先,我们需要在应用程序中添加一个语言选择的组合框,让用户可以...

    Ext 异步加载添加 删除节点 修改combobox选择项

    最后,我们来看如何在Ext 2.0的本地模式下动态修改ComboBox的选择项。当ComboBox的选项数据已经加载到本地,但存储方式与ComboBox的store不匹配时,我们需要进行数据转换。假设树的节点数据需要映射到ComboBox的...

    Ext组合框comboBox带分页

    用EXT来实现下拉框ComboBox 下拉框可以实现分页

    用Ext 2.0 combobox 做的省份和城市联动选择框的例程

    在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...

    Ext combobox 下拉多选框带搜索功能

    在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...

    Ext comboBox的remote模式,联想功能实现

    fieldLabel: '选择项', store: { type: 'ajax', // 使用Ajax proxy proxy: { type: 'ajax', url: 'your_server_url', // 服务器端接口URL reader: { type: 'json', // 假设服务器返回JSON格式的数据 ...

    ext combobox二级联动

    ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...

    用Ext 2_0 combobox 做的省份和城市联动选择框 DOJO中国

    在本案例中,“用Ext 2_0 combobox 做的省份和城市联动选择框”是一种交互式UI设计,常用于地理信息的选择,例如用户先选择省份,然后根据所选省份动态加载对应的城市选项。 Ext 2.0的Combobox组件主要包含以下几个...

    EXT2_combobox_form.rar_combobox ext_ext

    EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目,其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库,主要用于构建富客户端应用,特别是Web应用的用户...

    Ext ComboboxGrid

    "Ext ComboboxGrid"是一个基于Ext JS框架的组件,它结合了下拉框(ComboBox)和数据网格(Grid)的功能,提供了一种更强大的选择和筛选数据的方式。在Ext JS中,ComboBox通常用于显示一个可选的下拉列表,而Grid则...

    Ext带图标Combobox

    在Ext3.4版本中,IconCombobox是对Combobox的增强,它允许每个列表项前面添加一个图标。这在许多场景下都很有用,例如,当需要区分不同类型的选项时,图标可以提供视觉上的辅助信息。实现这个功能通常需要自定义...

    Combobox控件某些项不能选的例子

    在“Combobox控件某些项不能选的例子”这个问题中,我们关注的是在Visual Studio 2008环境下创建的Combobox,其中部分选项显示为灰色,用户无法进行选择。这种现象通常是因为这些项被设置为了禁用状态或者不可见,...

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建选择框或者搜索框,具有自动补全特性。这个组件允许用户通过输入部分文本来筛选下拉列表中的选项,提高数据输入的...

    ext多选下拉列表的全选功能实现

    5. **全取消功能**:除了全选,通常还需要提供一个全取消功能,一键清除所有已选择的项。这与全选逻辑类似,只是将`selected`属性设置为`false`。 6. **事件绑定**:为了确保全选和全取消功能正常工作,我们需要...

    Ext 组合框 ComboBox 参数详解

    该资源是war包,里面包括ComboBox中的各个参数, 详细讲解在我的文档中有

    Delphi7StringGrid内动态添加ComBoBox的值

    在程序运行时,我们需要创建一个新的TComboBox对象,然后设置它的属性,如Items(下拉列表项)和Style(决定ComboBox的样式,例如下拉列表或简单列表)。例如: ```delphi var ComboBox: TComboBox; begin ...

Global site tag (gtag.js) - Google Analytics