ExtJs之ComboBox篇

其实我感觉如果大家看过上一篇GridPanel之后对ComboBox的绑定应该很容易了。在这里,我们的demo仍然是动态绑定的(其实这是女朋友问我的一个问题,她当时问我怎么动态绑定ComboBox,我就做了下面的demo)。动态绑定的放其实和GridPanel一样,采用load传参。在GridPanel中我就曾说过,ext中很多组件都可以使用load来实现动态传参的(TreePanel除外)。

ComboBoxd动态绑定

前台代码:

后台代码:

运行效果:

ExtJs之ComboBox篇_第1张图片

上图正是在点击不同button之后下拉列表中的内容,很明显它的绑定时动态的,道理同样是使用load方法动态传参。相对GridPanel来说其前后台代码都比较简单,主要是配置有细微差别,有了上面的代码我想就不需要过多的解释了。

ComboBox分页

有时候我们的下拉列表内容较多,这个时候我们就必须适用分页来解决这个问题了,而事实上ComboBox就具有这样的功能,而且使用起来是特别的方便,只需要简单的配置后配合后台生成数据就可以了。

前台代码:

后台代码:

运行效果:

ExtJs之ComboBox篇_第2张图片

相对不分页的情况,只是多了minListWidth和pageSize两个属性,然后load中多了相关的分页参数而已;后台代码方面基本上和GridPanel的分页差不多,配合start提供数据就可以了,确实是很方便。

ComboBox默认值

这个问题曾有几次被问到,而且我自己最初的时候遇到过这个问题,今天在这里就简单提一下这个问题。我们还用上面的例子,只需要简单添加几句话即可,后台代码和其他东西不需要改变,看一下需要添加的代码:

从上面可以看出设置默认值的原来很简单就是设置ComboBox的Value,只是很多时候这个值是动态得到的,因此我们也就需要通过获得store中第一个值的方法来设置。关于其他方法设置默认值,基本上我没有看到,可能后期版本的Ext会添加这个功能吧,至少目前它没有相应的方法。

你可能感兴趣的:(combobox)