ExtJS treepanel沒有顯示

所以我做了一個簡單的應用程序與4個區域，北部，東部，南部和西部。我想在西部地區加載一個treepanel（靜態）。我對westregion代碼如下：ExtJS treepanel沒有顯示

........................ 
{ 
     region: 'west', 
     title: 'Hierarchy', 
     iconCls:'icon-map', 
     width: 250, 
     items: treepanel 
} 
........................

我的面板和存儲來自文檔教程之一，如下所示：

var store = Ext.create('Ext.data.TreeStore', { 
root: { 
    text: "/", 
    expanded: true, 
    children: [ 
     { text: "detention", leaf: true }, 
     { text: "homework", expanded: true, children: [ 
      { text: "book report", leaf: true }, 
      { text: "alegrbra", leaf: true} 
     ] }, 
     { text: "buy lottery tickets", leaf: true } 
    ] 
} 
}); 

var treepanel = Ext.create('Ext.tree.Panel', { 
    title: 'Simple Tree', 
    width: 200, 
    height: 150, 
    store: store, 
    rootVisible: true, 

});

唯一的問題是，樹視圖沒有顯示。有人知道如何解決這個問題嗎？

來源

2014-10-30 user3464409

您可以將區域添加到樹面板自言自語：

var treepanel = Ext.create('Ext.tree.Panel', { 
    region: 'west', 
    title: 'Simple Tree', 
    width: 200, 
    height: 150, 
    store: store, 
    rootVisible: true, 
});

和他們，在視口中您添加TreePanel中的物品：

Ext.create('Ext.container.Viewport', { 
    layout: 'border', 
    renderTo: Ext.getBody(), 
    items: [{ 
     region: 'north', 
     ... 
    }, treepanel, { 
     region: 'south', 
     ... 
    }, { 
     region: 'east', 
     ... 
    }, { 
     region: 'center', 
     ... 
    }] 
});

完整的工作例如：

<html lang="en"> 
<head> 

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> 
    <script type="text/javascript" src="ext-all.js"></script> 

</head> 
<body> 
<script> 
Ext.onReady(function(){ 
    var store = Ext.create('Ext.data.TreeStore', { 
    root: { 
     text: "/", 
     expanded: true, 
     children: [ 
      { text: "detention", leaf: true }, 
      { text: "homework", expanded: true, children: [ 
       { text: "book report", leaf: true }, 
       { text: "alegrbra", leaf: true} 
      ] }, 
      { text: "buy lottery tickets", leaf: true } 
     ] 
    } 
    }); 

    var treepanel = Ext.create('Ext.tree.Panel', { 
     title: 'Simple Tree', 
     region: 'west', 
     width: 200, 
     height: 150, 
     store: store, 
     rootVisible: true, 
     renderTo: Ext.getBody() 

    }); 

    Ext.create('Ext.container.Viewport', { 
     layout: 'border', 
     renderTo: Ext.getBody(), 
     items: [{ 
      region: 'north', 
      title: 'North', 
      html: 'North' 
     }, treepanel, { 
      region: 'south', 
      title: 'South', 
      html: 'South' 
     }, { 
      region: 'east', 
      title: 'East', 
      html: 'East' 
     }, { 
      region: 'center', 
      title: 'Center', 
      html: 'Center' 
     }] 
    }); 

}); 
</script> 
</body> 
</html>

來源

2014-10-30 10:17:14

我試過這個，但面板不舒服不會顯示... – user3464409 2014-10-30 10:20:50

我已經添加了一個工作示例。嘗試一下。 – 2014-10-30 11:52:55

ExtJS treepanel沒有顯示

回答

相關問題