论坛首页 Web前端技术论坛

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

浏览 4277 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-12-17   最后修改:2009-12-22

先上效果图,已在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
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics