欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Extjs4.0 ComboBox如何实现三级联动

程序员文章站 2022-03-07 11:17:12
很多网友在问,extjs4.0 combobox如何实现,好在之前用3.x实现过一个三级联动,如今用extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的mo...

很多网友在问,extjs4.0 combobox如何实现,好在之前用3.x实现过一个三级联动,如今用extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:'local'在extjs4.0中用querymode: 'local'来表示,而且在3.x中load数据时用reload,但是在extjs4.0中要使用load来获取数据。如下图:

Extjs4.0 ComboBox如何实现三级联动

代码部分

先看html代码:

简单的很,就是加载了基本的css文件和js文件,并且加载自定义的combobox.js文件。

combobox.js:

上述代码中,如果在combobox直接定义store数据源,会出现这样一种情况,那就是当选择完第一个省,点击第二个市的时候,会闪一下,再点击,才会出现市的数据。那么要解决这样的情况,那么必须先要定义好省、市、区的数据源。那么再点击的时候,就不会出现上述情况了。

代码中,使用store为省的数据,设置其autoload为true,那么页面第一次加载的时候,就会自动加载省的数据,然后给省和市添加了监听select,作用在于当点击省的时候,要清空市和区的数据,并根据当前选定的值去加载对应的数据到市的数据源中。当然store1和store2原理是一样的。

最后,服务端要根据传的值进行数据检索及返回正确数据,这里没有从数据库中查询数据,而只是简单的写了一些测试代码,相信extjs代码没有任何的问题了,那么服务端返回数据,就不是一件很重要的事情了。

city.asp:

以上就是本文的全部内容,希望对大家的学习有所帮助。