前几天用到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
分享到:
相关推荐
这次只单独打包了本例子的html文件,大家注意一下js和css的路径就可以了
Ext 异步加载添加 删除节点 修改combobox选择项,相当好的东西,值得参考!希望对你有用!
用EXT来实现下拉框ComboBox 下拉框可以实现分页
ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...
用Ext 2.0 combobox 做的省份和城市联动选择框的例程
用Ext 2_0 combobox 做的省份和城市联动选择框 DOJO中国
ext关于form表单和combobox的例子
该资源是war包,里面包括ComboBox中的各个参数, 详细讲解在我的文档中有
基于Ext3.4的一个扩展Combobox组件
Ext中的Combobox下来框在EditGrid中的应用。Combobox显示值问题得以解决。
NULL 博文链接:https://zhcl321.iteye.com/blog/1317526
VS2008编写的Combobox控件下拉列表中某些项不可选呈现灰色背景,可以选择的项正常背景
DataGrid动态绑定ComboBox <DataGridComboBoxColumn.EditingElementStyle>
NULL 博文链接:https://dengli19881102.iteye.com/blog/1046190
NULL 博文链接:https://leonel.iteye.com/blog/454174
代码如下: var p_years = new Ext.form.ComboBox( { fieldLabel : ‘统计年份’, anchor : anchor_w, mode : ‘remote’, maxHeight:100, triggerAction : ‘all’, selectOnFocus : true, forceSelection : true, ...
自定义ComboBox,实现指定项不可选择。 只要添加项的标题中含有字符串(*),该项即变为灰色斜体,不可选择。 若强行选择该项,系统会自动搜索临近可用项。 使用方法: com.Item.Add("不可选项 *"); ...
Ext.form.field.ComboBox结合Java、JSON实现AutoComplete
首先在窗体中添加一个comboBox1和一个imageList(本例中带有三个图片) this.comboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;