ext combobox动态加载数据库数据(附前后台)


Posted in Javascript onJune 17, 2014

前台:

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 
})
Javascript 相关文章推荐
js arguments对象应用介绍
Nov 28 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
layui实现三级导航菜单
Jul 26 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 #Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 #Javascript
connect中间件session、cookie的使用方法分享
Jun 17 #Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 #Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 #Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 #Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 #Javascript
You might like
[转帖]PHP世纪万年历
2006/12/06 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
PHP速成大法
2015/01/30 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
python函数返回多个值的示例方法
2013/12/04 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
python web框架学习笔记
2016/05/03 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
python中import学习备忘笔记
2017/01/24 Python
详解python字节码
2018/02/07 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
电大物流学生的自我评价
2013/10/25 职场文书
秋季运动会广播稿
2014/02/22 职场文书
会计自荐信范文
2014/03/09 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
Go归并排序算法的实现方法
2022/04/06 Golang