Extjs中由于ID重复引起的各种异常的解决方法

很多人使用EXTJS中的Tabpanel遇到一个问题:


那就是在点击Tabpanel后,有时会发现Tabpanel出现错误,或无法Destroy已经关闭的panel,发现已经关闭的panel 中的组件出现在了页面其他地方。这个问题,网上问的人非常多,却没有答案,我是无意间发现问题的关键的。


Tabpanel中的panel关闭却无法销毁其子组件,原因是panel中可能存在与其他panel中组件ID相同的组件,这是非常常见的问题了。


EXTJS基本上是靠ID来识别组件的,假如你在panel1中有个ID:"keyword"的textfield,而panel2中有个ID相同的textfield ,那么,当你关闭panel2,由于extjs发现panel2中的ID:"keyword"组件在panel1中仍然使用中,是不会销毁掉它的,于是它成为一个孤立的对象,从而造成混乱。


无论如何,你得时刻记着,任何时候,必须确保对象ID是唯一的。这有两个做法:


1,不给对象指定ID,然后使用组件的find方法通过其他属性来查找对象,例如find("name","role"),结果产生一个array,当然,你的属性是唯一的,那你就可以用find("name","role")[0]这种形式引用组件。


2,你也可以用父组件ID+子组件ID的形式来指定子组件,这个方法更好,并且extjs内部就是这么做,子组件的ID变成了:this.id+"_role",注意,这里的this是指父组件。在实例时,由于父组件的ID指定的一定是唯一的,所以,即便实例了两次同一个组件,两个实例的子组件却拥有唯一ID。从而可以很好的处理ID重复问题 

ps:组件能不使用id就不要用id,很多人特别是初学者担心不使用id就没办法获得组件了(Ext.getCmp("id")),其实extjs已经提供了 相当多的方法和属性用来查找组件了,比如获取父类组件 有属性ownerCt,查找子类组件有方法child(‘‘) 和down(‘’)方法

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。