Extjs,关于treepanel的问题
var rootNode={
text:'可选择的指标对象',
expanded:true,
children:[{
text:'宽带业务指标分析',
children:[{
text:'工单处理及时率',
leaf:true
},{
text:'ADSL故障申告率',
leaf:true
},{
text:'工单处理超时率',
leaf:true
}]
},{
text:'VPN业务指标分析'
},{
text:'我的E家保障情况',
leaf:true
},{
text:'重复申告率',
leaf:true
}]
};
var staticTree={
xtype : 'treepanel',
animate : true,
id : 'staticTree',
autoScroll: true,
enableDD : true,
root : rootNode
};
我建了一个静态树，用window控件可以看到
var mytree = new Ext.Window({
height : 500,
width : 400,
layout : 'fit',
border : false,
title : '我的树形',
items : staticTree
});
mytree.show();
但是用TabPanel里的一个子页全显示不出来，如下
var tabs = new Ext.TabPanel({
activeTab: 0,
frame:true,
items:[{
title: '指标考核',
layout:'border',
width:'auto',
/* listeners:{
activate:function(){alert('a')}
},*/
items:[{
region:'center',
title:'center'
},{
region:'west',
title:'west',
split:true,
width:300,
maxWidth:300,
items:staticTree
}]
},{
title: '过程监测'
},{
title: '指标仪表盘'
},{
title: '能耗评估'
},{
title: '更多'
}
]
});
这是为什么的呢？小弟初学EXTJS，请高手们赐教
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="ext.js"></script>
<script src="ext-all-debug.js"></script>
<script src="ux-all.js"></script>
<script src="AceFilteringBar.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/ext-ux-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/xtheme-gray.css" />
</head>
<body>
</body>
<script>
var rootNode={
text:'可选择的指标对象',
expanded:true,
children:[{
text:'宽带业务指标分析',
children:[{
text:'工单处理及时率',
leaf:true
},{
text:'ADSL故障申告率',
leaf:true
},{
text:'工单处理超时率',
leaf:true
}]
},{
text:'VPN业务指标分析',
leaf:true
},{
text:'我的E家保障情况',
leaf:true
},{
text:'重复申告率',
leaf:true
}]
};
var staticTree={
xtype : 'treepanel',
animate : true,
id : 'staticTree',
autoScroll: true,
enableDD : true,
root : rootNode
};
var tabs = new Ext.TabPanel({
activeTab: 0,
renderTo:Ext.getBody(),
height:400,
frame:true,
items:[{
title: '指标考核',
layout:'border',
width:'auto',
/* listeners:{
activate:function(){alert('a')}
},*/
items:[{
region:'center',
title:'center'
},{
region:'west',
title:'west',
split:true,
width:300,
maxWidth:300,
items:staticTree
}]
},{
title: '过程监测'
},{
title: '指标仪表盘'
},{
title: '能耗评估'
},{
title: '更多'
}
]
});
</script>
</html>
经过测试没有问题，只是tabpanel如果不设置高度的话是出不来的。希望可以帮到楼主
[解决办法]
你的错误在于单独使用panel不管是tabPanel\gridPanel组件除了Viewport\window等无需直接指定id即可显示的组件外,放在其他托管的组件内必须有一个渲染的ID, 如果你没有人为的设置可以用renderTo:Ext.getBody()或applyTo:Ext.getBody() 渲染到body,多数情况下是在页面的<body></body>内设置一个可供渲染的id,
<body><div id="myPanelId"></div></body>,
然后renderTo:'myPanelId'即可渲染panel.
[解决办法]
楼上已有答案，组件需要指定一个渲染目标
[解决办法]
学习了