开发中遇到了这样的问题
有2个combox组件,当组件一选择完数据后,组件2根据组件1的value从后台查找数据并返回给组件2
遇到的问题:刚开始做的时候思路,给组件1添加select事件,当select的时候将组件2的store.reload({params:{canshu:canshu}})
但这样做完全是错误的,可能是对EXTJS了解不深,这种方法只能让组件2刷新一次,也就是第一次触发组件1的select的时候,以后再触发组件1的select事件都不会刷新组件2,所以最终放弃了上面的做法。
解决办法:当组件1select的时候,直接用ajax访问后台,返回数据,然后通过组件2的store.loadData()来直接加载json数据,OK一切解决了,不过注意在后台返回的数据是文字格式,必须要转化成JSON对象才能成功的 loadData();
实例:
//Combo1
var _Proxy = new Ext.data.HttpProxy({url:path});
var _Reader = new Ext.data.JsonReader({},
[
{name:'CengJi',type:'string',mapping:'cengJi'},
{name:'displayCengJi',type:'string',mapping:'displayCengJi'}
]);
var _Store = new Ext.data.Store({
proxy:_Proxy,
reader:_Reader
});
var ComBo1 = new Ext.form.ComboBox({
height:100,
width:200,
name:name,
fieldLabel:fieldlabel,
editable:false,
triggerAction:'all',//指定查询格式'ALL','QUERY'
mode:'romote',
store:_Store,
displayField:'displayCengJi',
valueField:'CengJi'
});
//主要的工作都是通过select事件完成的
ComBo1 .on('select',function(combo,record,index){
var DeptJiBie = combo.getValue();
var Store = combo2.getStore();
SupperDept.clearValue();
Ext.Ajax.request({
url:'../../GetSupperDept.do',
params:{DeptJiBie:DeptJiBie},
method:'post',
success:function(response) {
var Data = response.responseText;
//注意response.responseText是文本格式,必须要调用Ext.util.JSON.decode()方法转换成 json对象
Store.loadData(Ext.util.JSON.decode(Data));
//Ext.Msg.alert('消息提示',Data);
},
failure:function(response) {
Ext.Msg.alert('消息提示','我擦,访问不了!');
}
});
});
//combo2
var _Proxy = new Ext.data.MemoryProxy([]);
var _Reader = new Ext.data.JsonReader({},
[
{name:'deptname',type:'string',mapping:'deptname'},
{name:'tid',type:'string',mapping:'tid'}
]);
var _Store = new Ext.data.Store({
proxy:_Proxy,
reader:_Reader
});
var ComBo2 = new Ext.form.ComboBox({
height:100,
width:200,
name:name,
fieldLabel:fieldlabel,
editable:false,
triggerAction:'all',//指定查询格式'ALL','QUERY'
mode:'local',
store:_Store,
displayField:'deptname',
valueField:'tid'
});
分享到:
相关推荐
"EXT中COMBOBOX联动"指的是在EXTJS应用中,两个或多个COMBOBOX之间实现数据交互和联动效果,即当一个COMBOBOX的选择项改变时,会触发其他COMBOBOX的更新,以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
本篇我们将深入探讨“Extjs之旅”中的一个关键组件——Combox(组合框),特别是其远程加载数据的特性。 Combox在ExtJS中是一个非常灵活的控件,它可以看作是下拉列表和文本输入框的结合体,用户可以输入文本搜索,...
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...
ExtJS4中的ComboxTree是一种将下拉列表与树形结构结合的组件,它扩展了标准的ComboBox,提供了更丰富的用户交互体验。这种组件在数据展示和选择时特别有用,尤其是在处理具有层级关系的数据时,比如部门结构、地区...
Extjs 下拉菜单实现拼音输入进行检索
前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区
代码如下:// 第一个下拉框 var parentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: ‘loadByParentid.action?parentid=1001’ }), reader: new Ext.data.JsonReader({ root: ‘list’, id: ...
Extjs4---combobox联动实例
在Extjs框架中,ComboBox组件是经常使用的组件之一,它允许用户在一个下拉列表中进行选择。当需要在ComboBox加载数据之后为其赋初值,且这个赋值操作需要在数据加载完成后才能进行,以确保用户体验的正确性时,需要...
很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示,而且在...
下面我们将详细讨论如何在ExtJS中实现Combobox的二级联动。 一、基础概念 1. Combobox:ExtJS中的Combobox是FormPanel的一个字段,它结合了文本输入框和下拉列表,提供了一种选择或输入数据的方式。 2. 二级联动:...
在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中,我们将探讨如何利用ExtJS 4的ComboBox组件实现省市区的三级联动效果,并结合Struts2框架进行数据交互。 首先,`ComboBox`是ExtJS中的一个组件,它...
本文将深入探讨如何在ExtJS中实现ComboBox的二级联动。 首先,我们需要理解ExtJS中的ComboBox基本结构。ComboBox由几个关键部分组成,包括store(数据存储)、displayField(显示字段)和valueField(值字段)。...
在本文中,我们将深入探讨如何使用ExtJS 4和Struts2框架实现省市区三级联动的完整示例。这个示例适用于需要在Web应用程序中实现地理区域选择功能的情况,例如用户地址输入。以下是对该技术栈及其实现方法的详细说明...
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...
在ExtJS中,PropertyGrid是一种用于展示对象属性的控件,它可以方便地编辑和查看对象的各个属性。在PropertyGrid中遇到的一个常见问题是当使用Combobox(下拉列表框)作为编辑器时,用户选择的值(displayField)与...
在本文中,我们将深入探讨如何使用ExtJS4框架为Combobox控件设置列表中的默认值。ExtJS4是一个广泛使用的JavaScript框架,专门用于创建富互联网应用(RIA)。它提供了丰富的组件和接口,以帮助开发者构建具有高度...