`
jiangnan2112
  • 浏览: 122278 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

Ext 简单级联入门

EXT 
阅读更多
这是一个静态数据的级联:
Ext.onReady(function(){
    var sheng = [['上海','上海'],['北京','北京'],['广东','广东']];
    var shs = [['埔东','埔东'],['埔西','埔西'],['埔南','埔南']];
    var bjs = [['人民大会堂','人民大会堂'],['天桥','天桥'],['中关村','中关村']];
    var gds = [['中山','中山',],['广州','广州',],['东莞','东莞']];
    
    //上海
    var shStore = new Ext.data.SimpleStore({
      fields:['value','text'],
      data:shs
    }); 
    //北京
    var bjStore = new Ext.data.SimpleStore({
      fields:['value','text'],
      data:bjs
    });
    //广东
    var gdStore = new Ext.data.SimpleStore({
      fields:['value','text'],
      data:gds
    });     
 //数据   
    var shengStore = new Ext.data.SimpleStore({
      fields:['value','text'],
      data:sheng
    });
    var shiStore = new Ext.data.SimpleStore({
      fields:['value','text'],
      data:[]
    });
    
   //控件 省份
    var shengCom = new Ext.form.ComboBox({
        store: shengStore,
        emptyText: '请选择',
        mode: 'local',
        triggerAction: 'all',
        valueField: 'value',
        displayField: 'text',
        readOnly: true,
        applyTo : 'shengCom'
    });
    // 市区
    var shiCom = new Ext.form.ComboBox({
        store :   shiStore,
        emptyText: '请选择',
        mode: 'local',
        triggerAction: 'all',
        valueField: 'value',
        displayField: 'text',
        readOnly: true,

        applyTo : 'shiCom'
    });  
    shengCom.on("select",function(comboBox){
       var province = comboBox.getValue();      
       shiCom.reset();   //这个一定要,重置,要不然上次选择的信息会还在,弄了我好久
       if(province=='上海'){  
          shiStore.loadData(shs)
      }
      if(province=='北京'){
         shiStore.loadData(bjs)
      }
      if(province=='广东'){
        shiStore.loadData(gds)
      }
    });

});

页面加两行就行了:
	
    <body>           
        <input id='shengCom',type='text'/>
        <input id='shiCom',type='text'/>
    </body>


分享到:
评论

相关推荐

    Ext TreePanelrcheckbox级联选择的实现

    这篇博客“Ext TreePanelrcheckbox级联选择的实现”就专注于探讨这个主题。 首先,我们要理解TreePanel的基本结构。TreePanel包含节点(Nodes),每个节点可以有子节点,形成一个树状结构。在每个节点上添加复选框...

    Ext combo 下拉框级联

    标题中的"Ext combo 下拉框级联"指的是在Ext JS框架中使用Combobox组件创建级联下拉框的功能。Ext JS是一个强大的JavaScript UI库,提供了丰富的组件模型和数据绑定机制,用于构建复杂的Web应用程序。 首先,我们...

    Ext级联菜单实例

    以下是一个简单的ExtJS级联菜单代码示例: ```javascript Ext.application({ name: 'MyApp', launch: function () { var mainMenu = new Ext.menu.Menu({ items: [{ text: '主菜单', menu: { items: [{ ...

    JSP Ext spring级联分页程序.rar

    JSP Ext spring级联分页程序,JSP分页程序示例,结合漂亮的extjs框架实现。由于空间问题web-inf/lib里的jar文件未引入,本项目是在struts2 hibernate spring构架下的,所以需要引入这些jar包。

    ext 级联选择的树形控件

    "EXT级联选择的树形控件"是一个实现树形结构并支持级联选择的EXT组件。在实际应用中,它可以帮助用户通过树节点的选择来联动控制其他相关选项的状态。这个控件可能包含以下关键特性: 1. **树形结构**:每个节点...

    Ext 级联简单例题

    一个很简单,很好的例题,省级联动的Ext例题

    easyui的datagrid中editor和combobox的级联

    在本文中,我们将深入探讨EasyUI的Datagrid中Editor与Combobox的级联应用,这是一种在Web开发中实现数据交互和界面控制的强大技术。EasyUI是一个基于jQuery的UI框架,它提供了一系列轻量级、易于使用的组件,如...

    Ext 树的级联选择扩展插件使用说明

    总结来说,"Ext 树的级联选择扩展插件使用说明"涉及到的是在Ext JS环境中,如何利用自定义的`TreeCheckNodeUI.js`插件实现树形控件的级联选择功能。通过理解并运用上述步骤,开发者可以创建出交互性强、用户体验良好...

    cas.rar_MATLAB 级联失效_级联_级联失效 代码_级联失效代码_级联失效算法

    在IT领域,级联失效(Cascading Failure)是一种复杂的现象,特别是在网络系统中,如电力网格、互联网或通信网络。当一个组件故障时,它可能导致其他相关组件相继失效,从而引发大规模的系统崩溃。MATLAB作为一种...

    级联菜单 级联菜单级联菜单级联菜单

    级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单...

    级联菜单 动态级联菜单

    级联菜单 动态级联菜单 级联菜单是一种常见的Web应用程序用户界面元素,它允许用户从多个选项中选择一个或多个项目。动态级联菜单是指可以根据实际情况动态生成选项的级联菜单。下面将对该技术进行详细的解释。 ...

    级联字典的构造

    级联字典是一种在计算机科学和信号处理领域中常见的数据结构,特别是在图像处理、压缩编码和机器学习等应用中。这种字典构造方法是通过组合多个基础字典,以达到更丰富的表示能力和更高的编码效率。在本文中,我们将...

    STM32 定时器级联

    STM32定时器级联是STM32微控制器中一种高效利用硬件资源、扩展定时功能的方法。在STM32系列芯片中,定时器可以被配置为级联模式,以实现更复杂的定时或计数任务,比如产生精确的PWM输出、高分辨率的计数等。下面我们...

    用纯CSS做的简单级联菜单

    本教程将详细介绍如何仅使用CSS(层叠样式表)来创建一个简单的级联菜单,重点是利用CSS的`overflow`属性。 一、CSS级联菜单基础 1. HTML结构:级联菜单的HTML结构通常由`&lt;ul&gt;`和`&lt;li&gt;`元素组成,`&lt;li&gt;`元素内嵌套...

    虚级联和连续级联的中文资料

    相邻级联是物理上的级联,不涉及逻辑上的标识和指针处理,因此它比虚级联简单,但缺乏虚级联的灵活性。相邻级联一旦建立,调整带宽就需要重新配置整个链路,这在某些情况下可能造成服务中断。 在SDH网络中,虚级联...

    级联菜单 (二级级联 三级级联)

    级联菜单是一种常见的用户界面元素,它在网页设计和软件开发中被广泛使用,尤其在导航和选项选择中。级联菜单通常表现为一个主菜单项下拉显示一系列相关的子菜单,子菜单还可以继续展开显示更深层次的选项。这种设计...

Global site tag (gtag.js) - Google Analytics