Ext.js二级联动

<!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>
posted on 2019-04-25 09:51 o_0的园子阅读(637) 评论(0) 编辑收藏举报