<!DOCTYPE html>

<html>

   <head>

           <meta charset="utf-8">

      <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">

   <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js"></script>

   <script type="text/javascript">

    var attr_city = ["嘉峪关","金昌"];

    var attr_county = [

                    ['嘉峪关'],

                    ['河西堡','永昌县','金昌区']

                ];

 Ext.onReady(function () {

            //定义新的类FormPanel，并且把变化的属性暴露出来以便以后继承

            var MyFormPanel = Ext.extend(Ext.form.FormPanel, {

                title: '级联',

               layout : 'table',

                layoutConfig : {columns:8},

                labelWidth: 80,

                initComponent: function () {

                    this.items = [

                    {

         fieldLabel : '市',

         hiddenName : 'tmember.addressProvince',

         xtype : 'combo',

         allowBlank : false,

         width:180,

         labelWidth:20,

         emptyText : '请选择市',

         mode : 'local',

         displayField : 'provinceName',

         valueField : 'id',

         id : 'city',

         editable : false,

         triggerAction : 'all',

         lazyInit : false,

         store :attr_city,

         listeners:{

           select : function(combo, record, index){

           console.log(attr_county[record.internalId-1])

           var fieldName=Ext.getCmp('county');

           console.dir(fieldName)

           Ext.getCmp('county').setValue(attr_county[record.internalId-1][0]);

           Ext.getCmp('county').setStore(attr_county[record.internalId-1]);

           }

       }

               },

          {

        fieldLabel : '县',

        labelWidth:20,

         hiddenName : 'county',

         xtype : 'combo',

         width:180,

         allowBlank : false,

         emptyText : '请选择县',

         mode : 'local',

         displayField : 'county',

         valueField : 'county',

         id : 'county',

         editable : false,

         triggerAction : 'all',

         lazyInit : false,

         store:''

               },

          {

          fieldLabel : '地址',

          labelWidth:40,

          id:'county1',

          xtype : 'textfield',

          grow : false,

          colspan : 8

            }

                    ];

                    this.buttons = [{

                        text: '确 定',

                        handler: this.submit,//变化的部份

                        scope: this

                    }, {

                        text: '取 消',

                        handler: this.cancel,//变化的部份

                        scope: this

                    }];

                    MyFormPanel.superclass.initComponent.call(this, arguments); //调用父类的initComponent

                }

            });

            //创建测试对象2

            var testForm2=new MyFormPanel({

                title: '覆盖属性',

                usernameid:'usernameid',

                submit: function () {

                    alert(this.usernameid);

                },

                cancel: function () {

                    testForm2.getForm().reset();

                }

            });

            //创建窗体

            var win = new Ext.Window({

                title: '窗口',

                id: 'window',

                width: 700,

                height: 420,

                resizable: true,

                closable: true,

                maximizable: true,

                minimizable: true,

                items: [testForm2]

            });

            win.show();

        });

      </script>

   </head>

   <body>

   </body>

</html>

Ext.js二级联动的更多相关文章

  1. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  2. js二级联动

    <body> <section> <a>省份</a> <select id="province"> <option ...

  3. js 二级联动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

  5. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  6. JS实现下拉单的二级联动

    因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...

  7. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  8. js：二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  9. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

随机推荐

  1. [Loading Component]Loading组件的v-model设计是否不合理？

    vue在2.4.2版本中给computed里的属性加了限制,详见assigning to a computed property without setter does not fail 项目将vue ...

  2. mysql主从设置windows

    MySQL 主从复制是其最重要的功能之一.主从复制是一台服务器充当主服务器,另一台或多台服务器充当从服务器,主机自动复制到从机.对于多级复制,数据服务器即可充当主机,也可充当从机.MySQL 复制的基 ...

  3. 关于“为何Unicode中文字符占取2个字节，而 UTF-8却占3个字节”的网络解释修正

    学到编码时,有个疑问——好好的占2字节的Unicode不用,却要用占3字节的UTF-8编码.发明 UTF-8的初衷不就是为了修正Unicode中任何字符至少占用2个字节的弊端吗? 虽然UTF-8英文字 ...

  4. BZOJ 2851: 极限满月 虚树 or 树链的并

    2851: 极限满月 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 170  Solved: 82[Submit][Status][Discuss] ...

  5. .net后台使用post方式对指定地址的方法传值并且获取结果的方法

    /// <summary> /// .net 后台 post http地址请求 /// </summary> /// <param name="uri" ...

  6. Java 设计模式之中介者模式

    本文继续23种设计模式系列之中介者模式.   定义 用一个中介者对象封装一系列的对象交互,中介者使各对象不需要显示地相互作用,从而使耦合松散,而且可以独立地改变它们之间的交互.   角色 抽象中介者: ...

  7. Visual Studio Professional 2015 简体中文专业版 序列号

    Visual Studio Professional 2015 简体中文专业版 专业版激活密钥:HMGNV-WCYXV-X7G9W-YCX63-B98R2 Visual Studio Enterpri ...

  8. 基于GPS\北斗、GIS、GPRS技术构建智能巡检系统

    巡线工负责输油管网设施的日常巡查,可以及时发现管网设施是否完好.但巡检工作辛苦,加之管线在大部分情况下又处于良好状态,使得巡检人员麻痹大意,往往不能按规定程序进行巡检,造成巡检不到位,这样就不能从根本 ...

  9. cocos2dx 单张图片加密

    cocos2dx 已经封装好读取加密的prv文件的方法,打开texturepacker,导入一张图片,在content protection中写入密钥,在texture format中选择prv格式 ...

  10. HomeKit开发(一)

    需求:因为公司的生产硬件需要进入苹果的HomeKit市场,因此需要一款供苹果审核的APP(功能:苹果的家庭软件的功能+公司的硬件支持的功能特有功能)需求驱动开发:最近做了一款苹果HomeKit的软件 ...