ExtJS 联动 ComboxBox 赋初始值的解决办法

最新推荐文章于 2017-11-16 18:28:00 发布

leefwu

最新推荐文章于 2017-11-16 18:28:00 发布

阅读量2.3k

点赞数

分类专栏： ExtJS 文章标签： extjs function

本文链接：https://blog.csdn.net/leefwu/article/details/5988219

版权

ExtJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ExtJS联动ComboxBox赋初始值，这个问题困扰了我很多天，今天终于解决掉了，贴出来分享一下。

联动方式最常用的是省市联动，省份数据在开始的时候已经加载，城市的数据根据省份动态变化。这样的结构在新建的情况下没有问题，但在编辑的情况下会有问题。在赋初始值的时候，城市没有办法赋值，因为这个时候城市数据还没有加载。

解决方法如下：

先重写页面上ComboBox的setValue()方法：

// Important, After ComboBox.setValue(), Fire It's 'select' Event Ext.override(Ext.form.ComboBox, { setValue: function(v){ var text = v; if(this.valueField){ var r = this.findRecord(this.valueField, v); 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 = Ext.value(v, ''); } Ext.form.ComboBox.superclass.setValue.call(this, text); this.value = v; this.fireEvent('select', this, v); return this; } });

Ext.override()先从ExtJS的src里把ComboBox的setValue()原来的代码考出来，加了一个'select'事件的触发

this.fireEvent('select', this, v);

这样就触发了省份的select事件，而省份的select事件会去加载城市数据。

OK，第一步完成，城市如果有数据的话，下拉可以看到对应的城市了。

这样做完之后，会发现在给城市赋值的时候，显示的值还是一个城市的值，并没有真正的选到城市。

原因是因为省份和城市是同时赋值的，城市数据加载在省份赋值并触发select事件之后，这个时候城市已经赋值完成，所有没有选到城市。

这里是这样的，如果定义了ComboBox的valueNotFoundText之后，假如没有找到对应的值，那显示的值就是valueNotFoundText的字符。但是这里我们千万不要设置valueNotFoundText属性，就让它显示城市的值在那里。

接下来给城市的Store加上load事件的监听，目的是为了在城市数据加载完成之后，根据城市上面显示的值去重新给城市setValue()一下，这个时候城市的数据已经有了，再setValue()之后就可以选到对应的城市了。

我还自己写了个resetCombo(cob)的方法，这里的参数是城市的ComboBox对象，代码如下：

ddFrmComEdit()方法我是在FormPanel的beforeshow事件里执行，comCity是我的城市的ComboBox的id。

resetCombo(cob)在数据加载完成后执行，先判断城市是否有选择，selectedIndex等于-1表示没有选择城市。

如果没有选择城市就用城市原来的显示值去setValue()一下。