ext combobox动态加载数据库数据(附前后台)
更新时间：2014年06月17日 16:56:47 投稿：whsnow
这篇文章主要介绍了ext combobox动态加载数据库数据并附前后台实现,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前台：
var provinceStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: basePath + "/stationManage/station_getProvinceJSON.action" }),
reader: new Ext.data.JsonReader(
{ root: "" },
["PROVINCEID", "PROVINCENAME"]
)
});
//选择省市
var provinceIDadd = new Ext.form.ComboBox({
anchor : '98%',
id:'provinceIDadd',
name : "provinceIDAdd1",
hiddenName : "provinceID",
displayField : "PROVINCENAME",
valueField : "PROVINCEID",
blankText : '请选择站点所属省份',
emptyText : '请选择站点所属省份',
fieldLabel : '站点所属省份',
allowBlank : false,
editable : false,
triggerAction : 'all',
store :provinceStore ,
forceSelection : true,
mode : 'local',
selectOnFocus : true
})
provinceStore.load();
后台action代码
public class StationAction extends BaseAction {
private List<Map<String, Object>> provinceList;
public void setProvinceList(List<Map<String, Object>> provinceList) {
this.provinceList = provinceList;
}
public List<Map<String, Object>> getProvinceList() {
return provinceList;
}
public String getProvinceJSON(){
String sql="SELECT PK_ID PROVINCEID,NAME PROVINCENAME FROM T_DICT_DISTRICT A WHERE A.DISTRICT_LEVEL=20";
provinceList= stationService.findBySQL(sql);
return "json_getProvinceList";
}
}
strtus xml配置
<result name="json_getProvinceList" type="json" >
<param name="root">provinceList</param>
</result>
加载静态数据的下拉选择框
var dataType=[['0','8列'],['1','38列'],['2','21列']];
var dataTypeStore = new Ext.data.SimpleStore({
fields: ['dataTypeID', 'dataTypeName'],
data : data
});
var dataTypedd = new Ext.form.ComboBox({
anchor : '98%',
id:'dataTypeadd',
name : "dataTypeAdd1",
hiddenName : "dataType",
displayField : "dataTypeName",
valueField : "dataTypeID",
blankText : '请选择数据格式',
emptyText : '请选择数据格式',
fieldLabel : '数据格式',
allowBlank : false,
editable : false,
triggerAction : 'all',
store :unitStore ,
forceSelection : true,
mode : 'local',
selectOnFocus : true
})
复制代码 代码如下:
var provinceStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: basePath + "/stationManage/station_getProvinceJSON.action" }),
reader: new Ext.data.JsonReader(
{ root: "" },
["PROVINCEID", "PROVINCENAME"]
)
});
//选择省市
var provinceIDadd = new Ext.form.ComboBox({
anchor : '98%',
id:'provinceIDadd',
name : "provinceIDAdd1",
hiddenName : "provinceID",
displayField : "PROVINCENAME",
valueField : "PROVINCEID",
blankText : '请选择站点所属省份',
emptyText : '请选择站点所属省份',
fieldLabel : '站点所属省份',
allowBlank : false,
editable : false,
triggerAction : 'all',
store :provinceStore ,
forceSelection : true,
mode : 'local',
selectOnFocus : true
})
provinceStore.load();
后台action代码
复制代码 代码如下:
public class StationAction extends BaseAction {
private List<Map<String, Object>> provinceList;
public void setProvinceList(List<Map<String, Object>> provinceList) {
this.provinceList = provinceList;
}
public List<Map<String, Object>> getProvinceList() {
return provinceList;
}
public String getProvinceJSON(){
String sql="SELECT PK_ID PROVINCEID,NAME PROVINCENAME FROM T_DICT_DISTRICT A WHERE A.DISTRICT_LEVEL=20";
provinceList= stationService.findBySQL(sql);
return "json_getProvinceList";
}
}
strtus xml配置
复制代码 代码如下:
<result name="json_getProvinceList" type="json" >
<param name="root">provinceList</param>
</result>
加载静态数据的下拉选择框
复制代码 代码如下:
var dataType=[['0','8列'],['1','38列'],['2','21列']];
var dataTypeStore = new Ext.data.SimpleStore({
fields: ['dataTypeID', 'dataTypeName'],
data : data
});
var dataTypedd = new Ext.form.ComboBox({
anchor : '98%',
id:'dataTypeadd',
name : "dataTypeAdd1",
hiddenName : "dataType",
displayField : "dataTypeName",
valueField : "dataTypeID",
blankText : '请选择数据格式',
emptyText : '请选择数据格式',
fieldLabel : '数据格式',
allowBlank : false,
editable : false,
triggerAction : 'all',
store :unitStore ,
forceSelection : true,
mode : 'local',
selectOnFocus : true
})
相关文章
ext combox 下拉框不出现自动提示,自动选中的解决方法
ext combox 如果想实现类似于 baidu 搜索时的提示功能。必须禁止其分页功能才可以。2010-02-02
前段学了小胖的GTGrid，很方便实用。最近在学习Extjs.做了个CRUD的Demo,包括Extjs版和GTGrid版，做的比较粗糙，希望对大家有一些帮助。2009-07-07
JavaScript的Ext JS框架中的GridPanel组件使用指南
GridPanel和TreePnal功能类似,都是Ext JS中的表格便携利器,相比之下GridPanel还要更强大并且更复杂一些,下面我们就来整理一下JavaScript的Ext JS框架中的GridPanel组件使用指南2016-05-05
这篇文章主要介绍了ExtJS判断IE浏览器类型的方法,需要的朋友可以参考下2014-02-02
这篇文章的主题是分享下我使用 ExtJS 操作 DOM 元素的一些经验，作为一个程序员是需要不断学习的，喜欢的朋友可以学习下2013-08-08
在ExtJS4中使用mixins来实现多继承，下面有个不错的示例，感兴趣的朋友可以参考下2013-12-12
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Extjs的组件有两个看起来类似的配置项，applyTo和renderTo，这两个配置项都是用来指定将该extjs组件加载到什么位置。那他们到底有什么区别呢，网上搜了下，有两篇博文也是关于这个的。2010-01-01
ExtJS fit布局使用说明，需要的朋友可以参考下。2009-10-10
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
treePanel+chekBox全部选中以及清空选中，想必大家在学习使用过程中都见过这种效果吧，接下来为大家详细介绍下实现过程及细节，感兴趣的朋友可以参考下哈2013-04-04
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
由于开发过程中大多用chrome来调试，很少在ie中调试（现在两者都要兼顾），导致最后在ie中页面不能正常加载，当时那个囧啊，看到ie报的错，我都想哭，连出错的堆栈信息都没有（这一点，ie做的真不好），无从下手啊2013-01-01
最新评论