extjs tabpanel autoload新增tab时新tab页内部布局异常

现有左边一个树,右边是一个tabpanel,点击树叶节点时新增一个tab页,用的是autoload方式,
树事件代码:
[code="java"]
treePanel.on('click', function(node, e) {
if (node.isLeaf()) {
e.stopEvent();
var tab = contentPanel.getComponent(node.id);
if (!tab) {
tab = contentPanel.add({
id : node.id,
title : node.text,
closable : true,
frame : false,
layout:'fit',
autoLoad : {
url : node.attributes.href,
scripts : true
}
tab.show().doLayout();
}
}
});

[/code]

其中某一个链接新增的页面代码如下:
[code="java"]
<%@ page language="java" contentType="text/html; charset=gbk"
pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



测试页面 new Ext.Panel( { title:'aaaa', [color=red]layout:'border',[/color] region:'center', frame:true, renderTo:'5a', autoScroll : true, tbar:[{text:'顶部工具栏topToolbar'}], items:[ new Ext.Panel({ title : '嵌套面板一', region:'north', html:'ddddddddddddddddss' }),new Ext.FormPanel({ title:'查询', id:'qformPanel1qqq', region:'center', width:200, items:[{ xtype:'textfield', fieldLabel:'测试1' },{ xtype:'textfield', fieldLabel:'测试2' },{ xtype:'textfield', fieldLabel:'测试3' }] }) ] });



[/code]

发现新tab页面中显示如下:
[img]http://i3.6.cn/cvbnm/21/6d/15/90b674e141a7b398dfc20926cc25f90d.jpg[/img]

如果把新增的页面中主panele修改为 layout:'fit'则显示如下:
[img]http://i3.6.cn/cvbnm/86/4e/47/2cac099500f86237486fc38c095e2763.jpg[/img]

为何border布局就会有问题呢,有人遇到吗,该怎么解决。。

5个回答

tab= contentPanel.add({
id : node.id,
title : node.text,
closable : true,
frame : false,
layout : 'fit',
listeners : {
render : function(p) { //在render玩之后 手动执行 load 加载页面
p.load({
url : node.attributes.href,
params : {
id : p.id //传递 当前 panel id 在 jsp 使用 Ext.getCmp('<%=request.getParameter("id")%>').add(panel); 获取组件添加新面板
},
scripts : true,
callback : function() {
p.doLayout(); //加载完毕刷新面板
}
});
}
}

                            })

//在jsp 里直接使用 Ext.getCmp('<%=request.getParameter("id")%>').add(panel);添加你的新panel 不需要 renderTo:'5a', 和div了

貌似是你的代码写错了

[code="java"]
treePanel.on('click', function(node, e) {

if (node.isLeaf()) {

e.stopEvent();

var tab = contentPanel.getComponent(node.id);

if (!tab) {

tab = contentPanel.add({

id : node.id,

title : node.text,

closable : true,

frame : false,

layout:'fit',

autoLoad : {

url : node.attributes.href,

scripts : true

}

tab.show().doLayout();

})
}
}
});
[/code]

你再用这段代码试下吧,我试过[color=red]layout:'border',[/color] 这个应该是用border的

不清楚你现在怎么改的。没发帮你调试。
load 是远程加载jsp 或者html 吧内容放在panel的body上面不会使用到布局

你之前使用了renderTo 不会使用到布局
我这里没问题
吧你的 jsp 的panel改成 layout:'border'
autoLoad 添加 callback : function(p) {
tab.doLayout();
}

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