`
simen_net
  • 浏览: 307097 次
  • 性别: 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....

    extjs帮助文档pdf版

    - `Ext.util.JSON.encode(data)`: 将JavaScript对象转换为JSON字符串。 - `Ext.util.JSON.decode(json)`: 将JSON字符串转换为JavaScript对象。 #### 19. Ext.util.Format 类 (P.20) - **概述**:提供了数据格式化...

    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