`
huoyunshen888
  • 浏览: 83522 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

extjs combox联动

EXT 
阅读更多
开发中遇到了这样的问题

有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中COMBOX联动

    "EXT中COMBOBOX联动"指的是在EXTJS应用中,两个或多个COMBOBOX之间实现数据交互和联动效果,即当一个COMBOBOX的选择项改变时,会触发其他COMBOBOX的更新,以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...

    Extjs 轻松实现下拉框联动

    最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵

    Extjs之旅-combox之远程加载数据

    本篇我们将深入探讨“Extjs之旅”中的一个关键组件——Combox(组合框),特别是其远程加载数据的特性。 Combox在ExtJS中是一个非常灵活的控件,它可以看作是下拉列表和文本输入框的结合体,用户可以输入文本搜索,...

    Extjs6中Combobox实现下拉多选

    该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

    Extjs4 Combox tree

    ExtJS4中的ComboxTree是一种将下拉列表与树形结构结合的组件,它扩展了标准的ComboBox,提供了更丰富的用户交互体验。这种组件在数据展示和选择时特别有用,尤其是在处理具有层级关系的数据时,比如部门结构、地区...

    Extjs 下拉菜单实现拼音输入进行检索

    Extjs 下拉菜单实现拼音输入进行检索

    ExtJs学习例子:多级联动下拉菜单演示例子

    前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区

    extJs 下拉框联动实现代码

    代码如下:// 第一个下拉框 var parentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: ‘loadByParentid.action?parentid=1001’ }), reader: new Ext.data.JsonReader({ root: ‘list’, id: ...

    extjs ComboBox联动

    Extjs4---combobox联动实例

    Extjs中ComboBox加载并赋初值的实现方法

    在Extjs框架中,ComboBox组件是经常使用的组件之一,它允许用户在一个下拉列表中进行选择。当需要在ComboBox加载数据之后为其赋初值,且这个赋值操作需要在数据加载完成后才能进行,以确保用户体验的正确性时,需要...

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

    很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示,而且在...

    ExtJS Combobox二级联动列子

    下面我们将详细讨论如何在ExtJS中实现Combobox的二级联动。 一、基础概念 1. Combobox:ExtJS中的Combobox是FormPanel的一个字段,它结合了文本输入框和下拉列表,提供了一种选择或输入数据的方式。 2. 二级联动:...

    Extjs4---combobox省市区三级联动+struts2

    在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中,我们将探讨如何利用ExtJS 4的ComboBox组件实现省市区的三级联动效果,并结合Struts2框架进行数据交互。 首先,`ComboBox`是ExtJS中的一个组件,它...

    extjs的ComboBox 2级联动

    本文将深入探讨如何在ExtJS中实现ComboBox的二级联动。 首先,我们需要理解ExtJS中的ComboBox基本结构。ComboBox由几个关键部分组成,包括store(数据存储)、displayField(显示字段)和valueField(值字段)。...

    extjs+struts2省市区三级联动完整示例

    在本文中,我们将深入探讨如何使用ExtJS 4和Struts2框架实现省市区三级联动的完整示例。这个示例适用于需要在Web应用程序中实现地理区域选择功能的情况,例如用户地址输入。以下是对该技术栈及其实现方法的详细说明...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    ExtJS PropertyGrid中使用Combobox选择值问题

    在ExtJS中,PropertyGrid是一种用于展示对象属性的控件,它可以方便地编辑和查看对象的各个属性。在PropertyGrid中遇到的一个常见问题是当使用Combobox(下拉列表框)作为编辑器时,用户选择的值(displayField)与...

    ExtJS4给Combobox设置列表中的默认值示例

    在本文中,我们将深入探讨如何使用ExtJS4框架为Combobox控件设置列表中的默认值。ExtJS4是一个广泛使用的JavaScript框架,专门用于创建富互联网应用(RIA)。它提供了丰富的组件和接口,以帮助开发者构建具有高度...

Global site tag (gtag.js) - Google Analytics