Ext.js二级联动

时间 2019-12-13

原文原文链接

<!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>

1. 二级联动
2. excel二级联动
3. 二级联动----省市级联
4. js 实现二级联动
5. 二级联动 layui+ajax
6. Excel二级菜单联动
7. 二级联动菜单
8. ajax 笔记--二级联动
9. Html.DropDownListFor() 二级联动（$.getJSON）
10. php二级联动菜单
更多相关文章...
• MyBatis级联查询 - MyBatis教程
• Hibernate的二级缓存 - Hibernate教程
• RxJava操作符（二）Transforming Observables
• 算法总结-滑动窗口