标签：des style blog http io ar color os 使用
在此之前，自己封装自定义控件用的是这样的方式：
1 Ext.define(‘My.XXX‘,{ 2 extend: ‘Ext.YYY‘, 3 xtype: ‘ZZZ‘, 4 . 5 . 6 . 7 items:[ 8 ... 9 ] 10 });
看着官方的例子，用的是这样的方式：
1 Ext.define(‘My.XXX‘,{ 2 extend: ‘Ext.YYY‘, 3 alias: ‘widget.ZZZ‘, 4 initComponent: function(){ 5 Ext.apply(this,{ 6 ... 7 items: [] 8 }) , 9 this.callParent(); 10 } 11 });
起初一直不了解这么写的原因，因为两者都能达到所需要的效果，所以一直以来，都想当然的认为自己封装的写法是没错的。
结果，问题很快就出现了！
在正在编写的程序中，使用到了"Ext.tab.Panel"来承载编写窗口，窗口是现成的，只需要在"Ext.tab.Panel"的items中动态添加一个个的编写窗口就可以了，大致的代码是这样的：
1 Ext.define(‘My.tab‘,{ 2 extend: ‘Ext.tab.Panel‘, 3 xtype: ‘mtab‘, 4 layout: ‘fit‘, 5 frame: true, 6 activeTab: 0, 7 deferredRender: false, 8 defaults: { 9 closable: true, 10 }, 11 items: [], 12 buttons: [{ 13 text: "添加标签页", 14 handler: function(){ 15 var index = this.ownerCt.ownerCt.items.length + 1; 16 console.log(index); 17 var tab = this.ownerCt.ownerCt.add({ 18 title: "文件名" + index, 19 xtype: ‘mace‘, 20 }); 21 this.ownerCt.ownerCt.setActiveTab(tab); 22 } 23 }], 24 });
代码中的"this.ownerCt.ownerCt"是为了获取当前的tab窗口对象，以便动态为其add标签页。其实一开始也很顺利：
添加，删除都没有问题，不过很快我就发现问题了！
首先，动态添加的新标签页永远是第一个添加的内容，而其余的标签页变成了空白。预期当中新建一个空白的编辑界面并没有出现；
其次，当建立了几个标签页后，把所有标签页关闭再添加时，就出现了错误，同时添加按钮也消失了。
关于这个错误有点莫名奇妙，在网上查找这个错误时，遇到类似情况的人很多，不过导致的原因各有不同，给出的方案也是大同小异，有的说可能包导入错误，另外的说法有些靠谱，意思是控件没有关闭，只是隐藏，需要手动将需要关闭的控件销毁"destroy()"，于是我又将注意力转向销毁预关闭控件的方向上，各种尝试各种查资料，结果花费了大量时间，还是没有完美的解决问题。
最后，偶然在一个网页里，看到了他用官方那种写法，将所有属性都用Ext.apply()给包起来，然后他的问题解决了。虽然他的问题和我遇到的问题差之过远，不过我还是决定试一试。于是我将上面的封装组件改为这样：
1 Ext.define(‘My.aceTab‘,{ 2 extend: ‘Ext.tab.Panel‘, 3 alias: ‘widget.macetab‘, 4 5 initComponent: function(){ 6 Ext.apply(this,{ 7 layout: ‘fit‘, 8 frame: true, 9 activeTab: 0, 10 deferredRender: false, 11 defaults: { 12 closable: true, 13 }, 14 items: [], 15 buttons: [{ 16 text: "添加标签页", 17 handler: function(){ 18 var index = this.ownerCt.ownerCt.items.length + 1; 19 var tab = this.ownerCt.ownerCt.add({ 20 title: "文件名" + index, 21 id: ‘aceTab‘ + index, 22 xtype: ‘maceeditor‘, 23 }); 24 this.ownerCt.ownerCt.setActiveTab(tab); 25 console.log(this.ownerCt.ownerCt.getActiveTab()); 26 } 27 }] 28 }), 29 this.callParent(); 30 } 31 });
当然与之对应的组件我也将其改了过来，结果问题解决。。。。。。
花费了大量时间没有解决的问题结果是封装方式的原因，深感教训！由此可见，标准化封装是多么的必须以及必要。
标签：des style blog http io ar color os 使用
原文地址：http://www.cnblogs.com/linxiong945/p/4155866.html
