先上效果图,已在Firefox3.5、IE7、Chrome3中测试正常
完整应用和代码请转到 http://www.iteye.com/topic/553020
重写combo的setValue
Ext.override(Ext.form.ComboBox, {
setValue : function(node) {
if (typeof node == "object") {
// 当node为object对象时
this.lastSelectionText = node.text;
this.setRawValue(node.text);
if (this.hiddenField) {
this.hiddenField.value = node.id;
}
this.value = node.id;
return this;
} else {
// 当node为文本时
var text = node;
if (this.valueField) {
var r = this.findRecord(this.valueField, node);
if (r) {
text = r.data[this.displayField];
} else if (Ext.isDefined(this.valueNotFoundText)) {
text = this.valueNotFoundText;
}
}
this.lastSelectionText = text;
if (this.hiddenField) {
this.hiddenField.value = node;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = node;
return this;
}
}
})
为什么要这样重写请参考ExtJS3 下拉树TreeComboBox的修改
然后在传递过来的json中改为
{
'success' : true,
data : {
'yhId' : 227,
'yhXm' : '赵刚',
'yhXh' : {text: '赵刚',id: '227'},
}
}
yhXh传递过来不再是文本或数字,而是一个object,为了与下拉树的统一,这里使用text和id来命名文本和参数值
这样在combo默认调用setValue的时候就会自动将值写入到选择框内,但是这只解决了初值赋予的问题,因为我的combo内的选项是自expand的时候才加载的,那么怎样在expand的时候也默认选中默认的选项呢?
xtype : 'combo',
id : 'Ext.Strong.tyh.combo.yhXh',
fieldLabel : '显示在',
hiddenName : 'yhXh',
allowBlank : false,
mode : 'remote',
readOnly : true,
triggerAction : 'all',
store : new Ext.data.JsonStore({
url : '<@s.url action="tyh_LieBiao_XianShi!json"/>',
fields : new Ext.data.Record.create(['yhXm', 'yhId']),
root : 'list',
// 设置监听 当加载完成后选中当前记录
listeners : {
load : function() {
var comb = Ext.getCmp('Ext.Strong.tyh.combo.yhXh');
comb.setValue(comb.hiddenField.value);
}
}
}),
editable : false,
valueField : 'yhId',
displayField : 'yhXm'
修改store的默认load监听事件,在combo expand的时候重新setValue一下,由于这里set进去的不再是object对象,所有会调用正常的set过程将选项选中
- 大小: 35.3 KB
分享到:
相关推荐
本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...
4.1.12 Ext.form.field.ComboBox组合框 4.1.13 Ext.form.field.Time时间选择框 4.1.14 Ext.form.field.Date日期选择框 4.1.15 Ext.form.field.Hidden隐藏字段 4.1.16 Ext.form.field.HtmlEditor编辑器字段 ...
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
7.3.4 格式化提交数据:ext.data.writer.writer、ext.data.writer.json和ext.data. writer.xml / 322 7.3.5 writer对象的配置项 / 325 7.4 数据模型 / 326 7.4.1 概述 / 326 7.4.2 数据类型及排序类型:ext....
**Grid** 和 **ComboBox** 等组件都是基于Ext.data进行数据操作的。它们利用这些核心组件来实现诸如异步加载、类型转换、分页等功能。 #### 二、数据格式和支持 Ext.data支持多种数据格式,包括但不限于: - **...
多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...
childStore.loadData(JSON.parse(response.responseText)); } }); } } }); var childStore = Ext.create('Ext.data.Store', { /* ... */ }); var childComboBox = Ext.create('Ext.form.field.ComboBox', {...
var responseArray = Ext.util.JSON.decode(response.responseText); var id = responseArray.id; var text = responseArray.text; var url = responseArray.url; var newNode = new Ext.tree.AsyncTreeNode({...
总结一下,实现建议词模糊动态搜索的关键在于使用`Ext.form.ComboBox`并配置其属性以连接到服务器端接口,监听用户的输入,并根据输入进行远程查询。同时,`JsonStore`用于存储和管理从服务器获取的数据。通过调整...
在EXT JS框架中,`Ext.form.ComboBox`是一个用于创建下拉选择框的组件,它提供了丰富的功能,包括自动提示和自动选中等。在你遇到的问题中,下拉框不出现自动提示,也不能自动选中,这通常是由于配置不当或者某些...
var comboBox = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择项', store: { type: 'ajax', // 使用Ajax proxy proxy: { type: 'ajax', url: 'your_server_url', // 服务器端接口URL reader: {...
3. 动态加载:根据第一个Combobox的选中值,向服务器发送请求获取相关联的第二级数据,然后填充到第二个Combobox的Store中。 三、具体步骤 1. 创建Store:定义两个Store,分别用于存储一级和二级的数据,可以使用...
前台: 代码如下: var provinceStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: basePath + “/stationManage/station... //选择省市 var provinceIDadd = new Ext.form.ComboBox({ anchor : ‘98%
4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. ...