前几天用到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
分享到:
相关推荐
标题中的“Ext2.0本地模式动态修改combobox选择项”指的是使用Ext JS 2.0框架中的Combobox组件在本地数据模式下实现动态更新选择项的功能。Ext JS是一个流行的JavaScript库,主要用于构建富客户端Web应用程序。...
静态本地化通常是在开发阶段就确定好语言设置,而动态本地化则允许用户根据自己的需求在应用运行时进行选择。 让我们详细探讨动态本地化的方法。首先,我们需要在应用程序中添加一个语言选择的组合框,让用户可以...
最后,我们来看如何在Ext 2.0的本地模式下动态修改ComboBox的选择项。当ComboBox的选项数据已经加载到本地,但存储方式与ComboBox的store不匹配时,我们需要进行数据转换。假设树的节点数据需要映射到ComboBox的...
用EXT来实现下拉框ComboBox 下拉框可以实现分页
在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...
在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...
fieldLabel: '选择项', store: { type: 'ajax', // 使用Ajax proxy proxy: { type: 'ajax', url: 'your_server_url', // 服务器端接口URL reader: { type: 'json', // 假设服务器返回JSON格式的数据 ...
ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...
在本案例中,“用Ext 2_0 combobox 做的省份和城市联动选择框”是一种交互式UI设计,常用于地理信息的选择,例如用户先选择省份,然后根据所选省份动态加载对应的城市选项。 Ext 2.0的Combobox组件主要包含以下几个...
EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目,其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库,主要用于构建富客户端应用,特别是Web应用的用户...
"Ext ComboboxGrid"是一个基于Ext JS框架的组件,它结合了下拉框(ComboBox)和数据网格(Grid)的功能,提供了一种更强大的选择和筛选数据的方式。在Ext JS中,ComboBox通常用于显示一个可选的下拉列表,而Grid则...
在Ext3.4版本中,IconCombobox是对Combobox的增强,它允许每个列表项前面添加一个图标。这在许多场景下都很有用,例如,当需要区分不同类型的选项时,图标可以提供视觉上的辅助信息。实现这个功能通常需要自定义...
在“Combobox控件某些项不能选的例子”这个问题中,我们关注的是在Visual Studio 2008环境下创建的Combobox,其中部分选项显示为灰色,用户无法进行选择。这种现象通常是因为这些项被设置为了禁用状态或者不可见,...
`Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建选择框或者搜索框,具有自动补全特性。这个组件允许用户通过输入部分文本来筛选下拉列表中的选项,提高数据输入的...
5. **全取消功能**:除了全选,通常还需要提供一个全取消功能,一键清除所有已选择的项。这与全选逻辑类似,只是将`selected`属性设置为`false`。 6. **事件绑定**:为了确保全选和全取消功能正常工作,我们需要...
该资源是war包,里面包括ComboBox中的各个参数, 详细讲解在我的文档中有
在程序运行时,我们需要创建一个新的TComboBox对象,然后设置它的属性,如Items(下拉列表项)和Style(决定ComboBox的样式,例如下拉列表或简单列表)。例如: ```delphi var ComboBox: TComboBox; begin ...