`
gxh04007101
  • 浏览: 15613 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Extjs三级联动效果(1)

阅读更多
var firstStore = new Ext.data.JsonStore({
    autoLoad : false,
    url : 'getUnderLevelOrgs.action',
    root : 'root',
    totalProperty : 'totalProperty',
    fields : ['id', 'name'],
    baseParams : {
     start : 0,
     limit : 8,
     id : 0,
     level : 1
    }
});

var secondStore = new Ext.data.Store({
   proxy : new Ext.data.HttpProxy({
    url : "getUnderLevelOrgs.action"
   }),
   reader : new Ext.data.JsonReader({
    root : 'root',
    totalProperty : 'totalProperty',
    id : 'id',
    fields : ['id','name']
   })
  
})


var thirdStore = new Ext.data.JsonStore({
    url : 'getUnderLevelOrgs.action',
    root : 'root',
    totalProperty : 'totalProperty',
    fields : ['id', 'name']
})


var orgForm = new Ext.form.FormPanel({
   title : '维护他人机构',
   frame : true,
   closable : true,
   hideMode : 'offsets',
   //constrainHeader : true,
   labelAlign : 'right',
   items : [{
      fieldLabel : '执法人员',
      forceSelection : true,
      anchor : '80%',
      queryDealy : 3000,
      selectOnFocus : true,
      typeAhead : true,
      loadingText : '数据加载中......',
      minChars : 0,
      pageSize : 10,
      minListWidth : 270,
      name : 'id',
      xtype : 'combo',
      hiddenName : 'userId',
      valueField : 'userId',
      displayField : 'applicationame',
      allowBlank : false,
      blankText : '请选择人员',
      emptyText : '请选择人员',
      triggerAction : 'all',
      mode : 'local',
      store : personStore
     },{
      fieldLabel : '一级单位',
      forceSelection : true,
      autoLoad : false,
      anchor : '80%',
      queryDealy : 3000,
      selectOnFocus : true,
      typeAhead : true,
      loadingText : '数据加载中......',
      minChars : 0,
      pageSize : 10,
      minListWidth : 270,
      name : 'firOrg',
      xtype : 'combo',
      hiddenName : 'id',
      valueField : 'id',
      displayField : 'name',
      allowBlank : false,
      blankText : '请选择一级单位',
      emptyText : '请选择一级单位',
      triggerAction : 'all',
      // width : 150,
      mode : 'remote',
      store : firstStore,
      listeners : {
       change :function(node){
        /*secUrl = 'global/globalAction!getUnderLevelOrgs.action';
        secProxy.setUrl(secUrl);*/
        secondStore.load({
         params : {
          start : 0,
          limit : 5,
          level : 2,
          id : node.getValue()
         }
        });
       
       }
      }
     },{
      fieldLabel : '二级单位',
      autoLoad : false,
      forceSelection : true,
      anchor : '80%',
      queryDealy : 3000,
      selectOnFocus : true,
      typeAhead : true,
      loadingText : '数据加载中......',
      minChars : 0,
      pageSize : 10,
      minListWidth : 270,
      name : 'secOrg',
      xtype : 'combo',
      hiddenName : 'id',
      valueField : 'id',
      displayField : 'name',
      blankText : '请选择二级单位',
      emptyText : '请选择二级单位',
      triggerAction : 'all',
      mode : 'local',
      editable : false,
      store : secondStore,
      listeners : {
       change : function(node){
        thirdStore.load({
         params : {
          start : 0,
          limit : 5,
          level : 3,
          id : node.getValue()
         }
        });
       }
      }
     },{
      fieldLabel : '三级单位',
      autoLoad : false,
      forceSelection : true,
      anchor : '80%',
      queryDealy : 3000,
      selectOnFocus : true,
      typeAhead : true,
      loadingText : '数据加载中......',
      minChars : 0,
      pageSize : 10,
      minListWidth : 270,
      name : 'id',
      xtype : 'combo',
      hiddenName : 'id',
      valueField : 'id',
      displayField : 'name',
      blankText : '请选择三级单位',
      emptyText : '请选择三级单位',
      triggerAction : 'all',
      // width : 150,
      mode : 'local',
      editable : false,
      store : thirdStore
     }],
     buttons : [{
      text : '更新',
      handler : function(btn){
      
      }
     }]
  
  
});

su.orgManager.win = new Ext.Window({
   title : '机构维护',
   //resizable : false,
   layout : 'fit',
   width : 350,
   closeAction : 'hide',
   height : 220,
   items : [orgForm]
});
分享到:
评论

相关推荐

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

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

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

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

    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. 二级联动:...

    JSP页面下拉框三级联动

    其中,JSP(JavaServer Pages)页面中的下拉框三级联动功能,是一种常见的需求,用于处理多级分类数据的选择,如国家-省份-城市的选择。本文将深入解析如何在JSP页面中实现下拉框的三级联动功能,以及其背后的实现...

    地区选择插件——三级联动

    NULL 博文链接:https://ruohanfly.iteye.com/blog/2183068

    基于vs2010的省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs) 示例源代码

    它提供了在Visual Studio 2010环境下,使用ASP.NET、jQuery和ExtJS三种不同JavaScript框架实现省市区三级联动的DropDownList控件,并通过Ajax技术进行异步数据加载的示例。 首先,ASP.NET是Microsoft提供的一个强大...

    Extjs3+MySQL后台数据库实现省份城市二级联动

    本文将深入探讨如何使用ExtJS 3结合MySQL来实现一个省份城市二级联动的前端与后台系统。 首先,ExtJS 3提供了丰富的组件和API,使得开发者可以轻松创建各种复杂的用户界面,如下拉菜单、表格、表单等。在这个案例中...

    省市县三级连动三种实现方式(javascript+jsp+servlet)、(jquery+jsp+servlet)、(extjs4.0+jsp+servle)

    在实现三级联动时,可以使用ExtJS的ComboBox组件,通过store与远程数据源(servlet)连接,实现数据的动态加载。ExtJS的模型层(Model)、存储层(Store)和视图层(View)设计使数据管理更为规范,同时其丰富的组件...

    WPF首页框架(仿extjs左菜单、联动Tab主页)

    1整体项目基于WPF的MVVM框架,分为上左中三部分,可伸缩; 2仿Extjs的左菜单,可动态绑定数据集,采用fontawesome作为图片; 3左菜单联动的中间部分的Tab控件,Tab页可关闭。 补充:该项目用vs2012运行。 准备...

    extjs网页控件开发

    在一级、二级、三级联动下拉框中,选择一个选项将影响下一个下拉框的显示内容,提供了一种层次清晰的导航方式。在ExtJS中,这通常通过组合框(ComboBox)组件和数据存储(Store)配合实现。每个级别的下拉框都有自己...

    asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例。前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架...

    Ext combo 下拉框级联

    在Ext JS中,可以通过`store.load()`或`store.filter()`方法来加载或过滤子级ComboBox的数据。 例如,假设我们有三个级联的ComboBox:国家、省份和城市。首先,初始化国家的ComboBox,加载所有国家的数据。当用户...

    ExtJs XML 省市县级联

    在"ExtJs XML 省市县级联"这个项目中,开发人员利用ExtJs的组件和数据处理能力,结合XML数据格式,实现了中国省市县三级联动的选择效果。这种功能常见于需要用户选择详细地区信息的Web应用中,如物流配送、地址填写...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——...

    extjs5.1引用包

    6. **强大的表单组件**:提供多种表单控件,支持验证、自定义布局和联动效果。 7. **触摸事件支持**:优化了触摸事件处理,提高了在移动设备上的交互体验。 二、引用ExtJS 5.1 1. **引入CSS和JavaScript**:首先,...

    精通JS脚本之ExtJS框架.part2.rar

    5.4.6 创建三级或多级菜单 5.4.7 具有选择框的菜单 第6章 页面元素与模板 6.1 构成用户界面的元素 6.2 获取页面元素 6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 ...

Global site tag (gtag.js) - Google Analytics