使用TabPanel时,如果两个页面存在相同的id。

我左边是一颗tree,右边是TabPanel。当点击一个结点 A,autoload一个页面 A.jsp 在TabPanel中。再点击另一个结点 B,autoload另一个页面 B.jsp 在TabPanel中。这时就存在问题了,如果我 A 页面和 B 页面同时存在

,那么,如果我先点击结点 A,页面 A.jsp 正常显示,再结点 B,页面 B.jsp 不能显示,反之相反。

如果将 B 页面的

,改为
,就能是正常的。
我知道 id 是唯一的,不能相同。但 A.jsp 和 B.jsp 是TabPanel 中两个不同的页面,为什么是存在这个问题?

希望大家帮忙!!
谢了!

3个回答

如果采用A.jsp中这种定义一个

---这个地方的id是必须要写的,但是一定要唯一,不然显示会有冲突,而且A.jsp不能在浏览器重同时被载入两次,这里说的意思是在下一次载入A.jsp之前先前的A.jsp所在的页面必须先remove掉。不知道你是否明白,还是那句话就是为了避免dom节点id冲突。

Ext组件的id不设定的话是ext渲染的时候自动生成的,一般都是什么 ext-com-1321
之类的字符串,不用去管这些。你要这个Ext组件,有两种方式:

1、该组件已经设定了Id时,使用Ext.getCmp(组件id)---(不建议使用)
2、没有设定id时, 将这个组件的引用传递给你需要使用的他的对象中去。
如 var panel1 = new Ext.Panel();
你可以将这个panel传递给你要用它的对象,
如 var panel2 = new Ext.MyPanel({panel1 : panel1});
MyPanel定义如下,是一个继承Ext.Panel的一个自定义panel组件。我们组开发写ext代码的一个规范格式,送给你参考一下。
MyPanel = function(config){
Ext.apply(this,config);//将config中的属性赋值给MyPanel

你现在就可以在这个panel中通过 this.panel1 来操作panel1了;
MyPanel.supperclass.constructor.call(this,{*一些配置与定义*});
}
Ext.extend(MyPanel,Ext.Panel,,{*一些配置与定义*});

你是用tabpanel autoload一个jsp页面,这种方式的底层效果应该是这样的,首先在tabpanel的body节点下先附加上你jsp页面中写的那个节点,再把jsp写的ext组件渲染到那个节点上。

如你上面的例子:
生成的节点应该为:




jsp中写的ext组件在这一层开始生成dom节点


大致就是这么一个意思。
所以当点A后生成了A页面,也就是id为tree的dom节点已经生成,再点B的时候又要去生成一个id为tree的dom节点这是就有问题了。

同时给你一个解决方案,
jsp_A 定义


jsp_B 定义

点击 A节点, var panelA = new Ext.Panel({
xx属性:xx值,
autoload : {
url : A.jsp,
script:true//加载该页面后执行该页面中的js代码。
}
})
tabPanel.add(panelA );
panelA .doLayout();
同理点击B节点时也是这么做。
同时你应该注意一下tabPanel和Panel的用法,从这个问题中感觉到你对tabPanel的使用好像理解的不是很正确,tabPanel是一个可以添加多标签页的容器。
希望能对你有所帮助。

不知道你说的组件的id是不是ext组件中设定的id,
若是,则渲染的时候,后来者将顶替前面组件的实现,会造成显示不正常,归根结底还是dom节点的id冲突。

解决办法是,A.jsp,B.jsp中的div 节点id不要定义的一样,然后Ext组件尽量不要使用id属性,id由ext渲染的时候自动生成,除非你在其他地方需要使用Ext.getCmp(组件Id)来获取该组件,这时可以使用id,但个个组件的id要设定为不同的值,这是要严格控制的。

最好的方式就是不要设定组件的id,由ext随机取生成id。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问