【ExtJS】关于标准模块化封装组件

　　在此之前，自己封装自定义控件用的是这样的方式：

 Ext.define('My.XXX',{
      extend: 'Ext.YYY',
      xtype: 'ZZZ',
              .
              .
              .
      items:[
           ...
      ]
 });

　　看着官方的例子，用的是这样的方式：

 Ext.define('My.XXX',{
     extend: 'Ext.YYY',
     alias: 'widget.ZZZ',
     initComponent: function(){
          Ext.apply(this,{
               ...
               items: []
          }) ,
          this.callParent();
     }
 });

　　起初一直不了解这么写的原因，因为两者都能达到所需要的效果，所以一直以来，都想当然的认为自己封装的写法是没错的。

---

　　结果，问题很快就出现了！

　　在正在编写的程序中，使用到了"Ext.tab.Panel"来承载编写窗口，窗口是现成的，只需要在"Ext.tab.Panel"的items中动态添加一个个的编写窗口就可以了，大致的代码是这样的：

 Ext.define('My.tab',{
     extend: 'Ext.tab.Panel',
     xtype: 'mtab',
     layout: 'fit',
     frame: true,
     activeTab: 0,
     deferredRender: false,
     defaults: {
         closable: true,
     },
     items: [],
        buttons: [{
         text: "添加标签页",
         handler: function(){
             var index = this.ownerCt.ownerCt.items.length + 1;
             console.log(index);
             var tab = this.ownerCt.ownerCt.add({
                 title: "文件名" + index,
                 xtype: 'mace',
             });
             this.ownerCt.ownerCt.setActiveTab(tab);
         }
     }],
 });

　　代码中的"this.ownerCt.ownerCt"是为了获取当前的tab窗口对象，以便动态为其add标签页。其实一开始也很顺利：

　　添加，删除都没有问题，不过很快我就发现问题了！

　　首先，动态添加的新标签页永远是第一个添加的内容，而其余的标签页变成了空白。预期当中新建一个空白的编辑界面并没有出现；

　　其次，当建立了几个标签页后，把所有标签页关闭再添加时，就出现了错误，同时添加按钮也消失了。

　　关于这个错误有点莫名奇妙，在网上查找这个错误时，遇到类似情况的人很多，不过导致的原因各有不同，给出的方案也是大同小异，有的说可能包导入错误，另外的说法有些靠谱，意思是控件没有关闭，只是隐藏，需要手动将需要关闭的控件销毁"destroy()"，于是我又将注意力转向销毁预关闭控件的方向上，各种尝试各种查资料，结果花费了大量时间，还是没有完美的解决问题。

　　最后，偶然在一个网页里，看到了他用官方那种写法，将所有属性都用Ext.apply()给包起来，然后他的问题解决了。虽然他的问题和我遇到的问题差之过远，不过我还是决定试一试。于是我将上面的封装组件改为这样：

 Ext.define('My.aceTab',{
     extend: 'Ext.tab.Panel',
     alias: 'widget.macetab',

     initComponent: function(){
         Ext.apply(this,{
             layout: 'fit',
             frame: true,
             activeTab: 0,
             deferredRender: false,
             defaults: {
                 closable: true,
             },
             items: [],
             buttons: [{
                 text: "添加标签页",
                 handler: function(){
                     var index = this.ownerCt.ownerCt.items.length + 1;
                     var tab = this.ownerCt.ownerCt.add({
                         title: "文件名" + index,
                         id: 'aceTab' + index,
                         xtype: 'maceeditor',
                     });
                     this.ownerCt.ownerCt.setActiveTab(tab);
                     console.log(this.ownerCt.ownerCt.getActiveTab());
                 }
             }]
         }),
         this.callParent();
     }
 });

　　结果问题没有解决，然后我将封装编辑控件的自定义组件给改写：

 Ext.define('My.aceEditor',{
     extend: 'Ext.panel.Panel',
     alias: 'widget.maceeditor',

     initComponent: function(){
         Ext.apply(this,{
             layout: 'fit',
             id: 'aceid',
             items: [
                 Ext.create('Ext.ux.AceEditor')
             ]
         }),
         this.callParent();
     }
 });

　　问题竟然解决了！

    

　　这是什么原因呢？我继续尝试，将除了"aceEditor"以外的所有封装组件给改回了原来的形式，结果原来的问题并没有出现，说明我一开始的想法就是错误的，并不是添加tab时出现了问题，而是封装aceEditor时出问题了。

---