[ExtJs] 利用weighted构建可配置覆写的容器

在ExtJs 6.5+版本中，提供了以weighted 配置项。

如果设置为true，则可以将子项item指定为一个object对象，每个item属性名称指定一个itemId，并且属性值为子项配置对象。

使用此方案时，每个子项可能包含一个weight 配置值，该值会影响其在此容器中的顺序。

 主要用法：

{
    xtype:'container',
    weighted:true,//声明权重值
    items:{
        txt:{//自定义的itemId
            xtype:'textfield',
            label:'文本框'
        },
        chk:{
            xtype:'checkbox',
            label:'复选框'
        }
    }
}

这里相当于把items配置项数组，转为了object对象配置。

利用这个属性，就可以用来构建一些基本类，然后其他类在使用时可选择性的使用相关配置项，例如：

Ext.define('DemoBase',{
   extend:'Ext.Panel',
   weighted: true,
   items:{
       head:{
           xtype:'container',//此container里的内容不让复写配置
           items:[
                {
                    xtype:'textfield',
                    itemId:'a',
                    label:'a'
                },
                {
                    xtype:'textfield',
                    itemId:'a',
                    label:'b'
                }
            ]
       },
       body:{
           xtype:'container',
           weighted: true,//设置为true 让 此container里的items内容可复写配置
           layout:'hbox',
           items:{
               left:{
                   xtype:'textareafield'
               },
               right:{}
           }
       }
   }
});

有了这个基本类，其他类在继承其后，在自定义配置body部分，例如：

仅复写body里的 right部分

Ext.define('DemoA',{
   extend:'DemoBase',
   xtype:'demoa',
   items:{
       body:{
          items:{
              right:{//仅覆写 body的 right部分
                  xtype:'selectfield',
                  label:'下拉'
              }
          }
       }
   }
});

或把整个body覆写掉

Ext.define('DemoB',{
   extend:'DemoBase',
   xtype:'demob',
   items:{
       body:{
           xtype:'textfield',
           label:'输入框'
       }
   }
});

效果