`
simen_net
  • 浏览: 306308 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Ext.form.ComboBox加载json时刻默认选中的解决

阅读更多

先上效果图,已在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.form.field.ComboBox结合Java、JSON实现AutoComplete

    本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...

    EXT核心API详解

    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 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...

    ExtJSWeb应用程序开发指南(第2版)

    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编辑器字段 ...

    ExtJS入门教程(超级详细)

    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 Js权威指南(.zip.001

    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....

    Ext.data专题

    **Grid** 和 **ComboBox** 等组件都是基于Ext.data进行数据操作的。它们利用这些核心组件来实现诸如异步加载、类型转换、分页等功能。 #### 二、数据格式和支持 Ext.data支持多种数据格式,包括但不限于: - **...

    EXT3.2 多选下拉框

    多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...

    Ext combo 下拉框级联

    childStore.loadData(JSON.parse(response.responseText)); } }); } } }); var childStore = Ext.create('Ext.data.Store', { /* ... */ }); var childComboBox = Ext.create('Ext.form.field.ComboBox', {...

    Ext 异步加载添加 删除节点 修改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 JS 实现建议词模糊动态搜索功能

    总结一下,实现建议词模糊动态搜索的关键在于使用`Ext.form.ComboBox`并配置其属性以连接到服务器端接口,监听用户的输入,并根据输入进行远程查询。同时,`JsonStore`用于存储和管理从服务器获取的数据。通过调整...

    ext combox 下拉框不出现自动提示,自动选中的解决方法

    在EXT JS框架中,`Ext.form.ComboBox`是一个用于创建下拉选择框的组件,它提供了丰富的功能,包括自动提示和自动选中等。在你遇到的问题中,下拉框不出现自动提示,也不能自动选中,这通常是由于配置不当或者某些...

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

    var comboBox = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择项', store: { type: 'ajax', // 使用Ajax proxy proxy: { type: 'ajax', url: 'your_server_url', // 服务器端接口URL reader: {...

    ExtJS Combobox二级联动列子

    3. 动态加载:根据第一个Combobox的选中值,向服务器发送请求获取相关联的第二级数据,然后填充到第二个Combobox的Store中。 三、具体步骤 1. 创建Store:定义两个Store,分别用于存储一级和二级的数据,可以使用...

    ext combobox动态加载数据库数据(附前后台)

    前台: 代码如下: var provinceStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: basePath + “/stationManage/station... //选择省市 var provinceIDadd = new Ext.form.ComboBox({ anchor : ‘98%

    Ext 开发指南 学习资料

    4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. ...

Global site tag (gtag.js) - Google Analytics