【ExtJS】关于标准模块化封装组件
2014-12-10 22:20
211 查看
在此之前,自己封装自定义控件用的是这样的方式:
看着官方的例子,用的是这样的方式:
起初一直不了解这么写的原因,因为两者都能达到所需要的效果,所以一直以来,都想当然的认为自己封装的写法是没错的。
结果,问题很快就出现了!
在正在编写的程序中,使用到了"Ext.tab.Panel"来承载编写窗口,窗口是现成的,只需要在"Ext.tab.Panel"的items中动态添加一个个的编写窗口就可以了,大致的代码是这样的:
代码中的"this.ownerCt.ownerCt"是为了获取当前的tab窗口对象,以便动态为其add标签页。其实一开始也很顺利:
![](http://images.cnitblog.com/blog/667121/201412/101634369154819.png)
添加,删除都没有问题,不过很快我就发现问题了!
首先,动态添加的新标签页永远是第一个添加的内容,而其余的标签页变成了空白。预期当中新建一个空白的编辑界面并没有出现;
![](http://images.cnitblog.com/blog/667121/201412/101637503213106.png)
其次,当建立了几个标签页后,把所有标签页关闭再添加时,就出现了错误,同时添加按钮也消失了。
![](http://images.cnitblog.com/blog/667121/201412/101640077592293.png)
关于这个错误有点莫名奇妙,在网上查找这个错误时,遇到类似情况的人很多,不过导致的原因各有不同,给出的方案也是大同小异,有的说可能包导入错误,另外的说法有些靠谱,意思是控件没有关闭,只是隐藏,需要手动将需要关闭的控件销毁"destroy()",于是我又将注意力转向销毁预关闭控件的方向上,各种尝试各种查资料,结果花费了大量时间,还是没有完美的解决问题。
最后,偶然在一个网页里,看到了他用官方那种写法,将所有属性都用Ext.apply()给包起来,然后他的问题解决了。虽然他的问题和我遇到的问题差之过远,不过我还是决定试一试。于是我将上面的封装组件改为这样:
结果问题没有解决,然后我将封装编辑控件的自定义组件给改写:
问题竟然解决了!
![](http://images.cnitblog.com/blog/667121/201412/101711232756674.png)
![](http://images.cnitblog.com/blog/667121/201412/101712372908186.png)
这是什么原因呢?我继续尝试,将除了"aceEditor"以外的所有封装组件给改回了原来的形式,结果原来的问题并没有出现,说明我一开始的想法就是错误的,并不是添加tab时出现了问题,而是封装aceEditor时出问题了。
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标签页。其实一开始也很顺利:
![](http://images.cnitblog.com/blog/667121/201412/101634369154819.png)
添加,删除都没有问题,不过很快我就发现问题了!
首先,动态添加的新标签页永远是第一个添加的内容,而其余的标签页变成了空白。预期当中新建一个空白的编辑界面并没有出现;
![](http://images.cnitblog.com/blog/667121/201412/101637503213106.png)
其次,当建立了几个标签页后,把所有标签页关闭再添加时,就出现了错误,同时添加按钮也消失了。
![](http://images.cnitblog.com/blog/667121/201412/101640077592293.png)
关于这个错误有点莫名奇妙,在网上查找这个错误时,遇到类似情况的人很多,不过导致的原因各有不同,给出的方案也是大同小异,有的说可能包导入错误,另外的说法有些靠谱,意思是控件没有关闭,只是隐藏,需要手动将需要关闭的控件销毁"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(); } });
问题竟然解决了!
![](http://images.cnitblog.com/blog/667121/201412/101711232756674.png)
![](http://images.cnitblog.com/blog/667121/201412/101712372908186.png)
这是什么原因呢?我继续尝试,将除了"aceEditor"以外的所有封装组件给改回了原来的形式,结果原来的问题并没有出现,说明我一开始的想法就是错误的,并不是添加tab时出现了问题,而是封装aceEditor时出问题了。
相关文章推荐
- 关于ExtJS3.0组件连接http://extjs.com/s.gif的问题
- extjs 把html 节点 封装成exjs组件
- 关于EXTJS 2.2.1版本在IE环境下Grid组件表头下拉菜单图标错位问题的解决
- ExtJS关于组件Component生命周期
- 从零开始 React Native(6) 计时器案例(模块化_组件封装)有图有demo
- Apache的commons组件的dbutils包关于封装数据库处理的实例【这个稍微有用】
- ExtJS 动态组件与组件封装
- 【引用】自己封装的Extjs组件combox(2)
- Extjs4 封装echarts组件 2016.8.31
- 关于ExtJS3.0组件连接http://extjs.com/s.gif的问题
- 【引用】自己封装的Extjs组件GroupGrid(1)
- 【ExtJS】关于自定义组件(一)
- 关于jquery的弹窗组件简单封装
- 【引用】自己封装的Extjs组件GroupGrid的代码(9) DateField TextField NumberField
- [J2EE]使用 EJB 组件你需要了解些什么呢?--是一些关于使用条件的判断标准
- 关于ExtJS3.0组件连接http://extjs.com/s.gif的问题
- 关于seh的那些事二(易语言的try..except模块化封装)
- Extjs4 封装dropzonejs组件 2016.12.29
- 【ExtJS】关于自定义组件
- 关于封装--一个有趣的C++例子