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,请高手们赐教

解决方案 »

  1.   


    <!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如果不设置高度的话是出不来的。希望可以帮到楼主
      

  2.   

    你的错误在于单独使用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.
      

  3.   

    也就是说,要在treePanel中添加一个renderTo,但是,我加了之后还是没有效果的?