Ext之Combobox的远程加载数据实例（附前后台代码）

我看了很多文章关于这方面的文章，但都是只有前端没有后台的，导致在后台返回的数据格式一直不正确，在自己多次摸索后终于成功做出来了，现在就和大家分享一下。

实现效果：

废话不多说，直接上代码！

Ext代码：

var buyTypeStore = new Ext.data.Store({fields: ["text", "value"],proxy: {type: "ajax",url: doLoadItemCatUrl,actionMethods: {read: "POST"  //解决传中文参数乱码问题，默认为“GET”提交},reader: {type: "json",  //返回数据类型为json格式root: "root"  //数据}},autoLoad: true  //自动加载数据});var form = new Ext.form.Panel({// width: 400,// height: 300,border : false,//   margin: "100 0 0 200",  //边距bodyPadding: 10,//    renderTo: Ext.getBody(),  //显示到页面上items: [{xtype: "combo",id: "buyType",hiddenName: "buyType",  //hiddenName和id不要相同，在IE6中会显示错位。store: buyTypeStore,displayField: "text",valueField: "value",triggerAction: "all",//  mode : "remote",queryMode: "local",  //低版本使用mode属性editable: true,allowBlank: false,value: "请填写类目",fieldLabel: "选择类目<label style='color: red;'>*</label>",typeAhead: true,//设置为true，当开始输入字符时，在指定的延迟之后会自动匹配剩下的内容，如果找到了匹配的 内容则自动选中它 (typeAheadDelay) (默认值为 false)listeners: {"select": function () {//获得显示的值和实际的提交值var name = Ext.getCmp("buyType").getRawValue();var pid  = Ext.getCmp("buyType").getValue();$("#cid").show();$("#cid").html(name);//   Ext.Msg.alert("提示", "显示的值：" + name + "\r\n实际的提交值：" + value);}}}]});//装表单的窗口extWin = new Ext.window.Window({title: "选择类目",closeAction: "hide",//   modal: true,  //遮罩 :就是让form表单以外不能编辑constrain: true,  //限制拖动范围resizable: true,  //可调整大小的; 可变尺寸的bodyPadding: 10,border: false,buttonAlign: "center",   //按钮显示位置layout: "fit",items: [form],  //装表单进来listeners: {"close": function () {//点击右上角的关闭按钮，就清空formform.getForm().reset();}}});});

后台返回的数据格式如下：

{root=[{text=平板电脑配件, value=0}, {text=台式机, value=1}, {text=服务器/工作站, value=2}]}

后台核心代码：

public Map<String,Object> queryCats(){List<ItemCat> catList = queryItemCat();List list = new ArrayList();//:[["平板电脑配件"],["台式机"],["服务器/工作站"],["笔记本配件"],["电脑配件"]]//{'root': [{'text':'合约机', value:'1'},{'text':'裸机', value:'0'}]}for(int i=0; i < catList.size(); i++){Map<String,Object> map = new HashMap<>();map.put("text",catList.get(i).getName());map.put("value",String.valueOf(i));list.add(i,map);}Map<String,Object> map = new HashMap<>();map.put("root",list);return  map;
}

Ext之Combobox的远程加载数据实例（附前后台代码）相关推荐

Ext.js 进入页面直接加载数据、输入框设置初始值
Ext.js使用过程中遇到的一些问题直接加载数据输入框设置初始值直接加载数据加上这段代码,可以在显示页面的过程中传入参数,执行查询,显示结果. Ext.onReady(function () ...
echarts html ajax,ECharts+Ajax动态加载数据实例（.NET）
什么是ECharts ECharts 是一个数据可视化工具,提供了系列常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折 ...
使用EasyUI combobox的loadData 加载数据
data-options的valueField和textField必须写上: <input class="easyui-combobox" id="rwlb&quo ...
JQuery Datatables 动态配置参数异步加载数据
背景需求在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明直接上代码 var table; var url = ...
android高仿奇艺影视,android仿爱奇艺加载动画实例
本篇文章介绍了android仿爱奇艺加载动画实例,具体代码如下: 效果图: 用到的知识点: Path ValueAnimator 如果对Path和ValueAnimator还不熟悉推荐去看这几个大神的 ...
extjs combobox分页加载数据不显示
在加一个事件之前是对的可以加载,但是在添加一个事件之后,不可显示了,以下是错误的代码 /** * YHC */ /** * 分页的Combobox */ PagingMedicalcareCbo=Ex ...
ext ajax同步加载数据,ext 的loadmask 与ajax的同步请求水火不容
因为ajax 的同步请求会有一段请求时间.有的短.有的长,对于短的咱们仍是能接受的,不过长的话就必须处理一下了,ajax 就好比处于ext 4.2.0的框架下,须要一个遮掩的样式,框架是有自带的,lo ...
自制预防校园暴力的智能监控系统：远程加载表格数据，SQLAlchemy操作数据库，云服务器（CentOS)
本文是[小码哥李明杰老师]指导完成的山东大学引航计划公益人工智能科研实训项目. 自制预防校园暴力的智能监控系统重定向路径路由配置(访问根路径,直接重定向到main): export default ...
easyui datatable ajax 加载数据,ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询...
js前台对datagrid的定义代码,如下 mygrid = $('#mytable').datagrid({ fit: true, //自动大小 height: 'auto', rownumbers ...

Ext之Combobox的远程加载数据实例（附前后台代码）

Ext之Combobox的远程加载数据实例（附前后台代码）相关推荐

最新文章

热门文章