Extjs,关于treepanel的有关问题

2013-01-12

Extjs,关于treepanel的问题var rootNode{text:可选择的指标对象,expanded:true,children:[{text:宽带

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，请高手们赐教 Extjs,关于treepanel的有关问题

[解决办法]


<!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.
[解决办法]
楼上已有答案，组件需要指定一个渲染目标
[解决办法]

引用:

你的错误在于单独使用panel不管是tabPanel\gridPanel组件除了Viewport\window等无需直接指定id即可显示的组件外,放在其他托管的组件内必须有一个渲染的ID, 如果你没有人为的设置可以用renderTo:Ext.getBody()或applyTo:Ext.getBody() 渲染到body,多数情况下是在页面的<body></body>内设置……

学习了

热点排行

JavaScript

Extjs,关于treepanel的有关问题