如何把樹面板中視區的Ext JS 4

這我的代碼，而只顯示該樹面板（請幫我）：如何把樹面板中視區的Ext JS 4

Ext.define（「用戶」，{ 擴展：' Ext.data.Model'， fields：['name'] }）;

var tree = Ext.create('Ext.tree.Panel', { 
    height: 300, 
    renderTo: Ext.getBody(), 
    width: 300,  region: 'east', 
    columns: [ 
     {dataIndex: 'name', flex: 1, header: 'Tree Panel', xtype: 'treecolumn'} 
    ], 
    store: { 
     model: 'User', 
     root: { 
      name: 'Rumah', 
      children: [ 
       {name: 'Gavin Renaldi', children: [{name: 'Benar Sekali', age: 2, children: []}]}, 
       {name: 'Gavin Ripharbowo', children: []} 
      ] 
     } 
    }, 
    viewConfig: { 
     plugins: { 
      ddGroup: 'user-dd', 
      ptype: 'treeviewdragdrop' 
     } 
    } 
});

Ext.onReady（函數（）{

Ext.create（ 'Ext.container.Viewport'，{ 佈局： '邊界'，項目：[{ 區域： '北' ， HTML： '頁面標題'， autoHeight：真，邊界：假的，寬度：100，高度：100，邊距： '0 0 5 0'

}, { 
    region: 'west', 
    collapsible: false, 
    html: '<h1 class="x-panel-header">Page Title</h1>', 
    title: 'Navigation', 
    width: 150,  height:100,   items:'tree' 

    // could use a TreePanel or AccordionLayout for navigational items 
}, { 
    region: 'center', 
    xtype: 'tabpanel', // TabPanel itself has no title 
    activeTab: 0,  // First tab active by default 
    items: [{ 
     title: 'First Tab', 
     html: 'For A While', 
    },{   title: 'Second Tab',   html : 'The Second Tab Content'   }] 
}] }) })

來源

2012-02-07 Mohammad Gavin Renaldi Ripharb

這就是爲什麼：

renderTo: Ext.getBody(),

剛剛擺脫這一行樹的定義，通常把它添加到視口。例如：

{ 
    region: 'center', 
    xtype: 'tabpanel', // TabPanel itself has no title 
    activeTab: 0,  // First tab active by default 
    items: tree 
}

（您可能需要添加renderTo到視口的定義）

來源

2012-02-07 14:00:34 Izhaki

感謝您的答案，但我已經通過將樹視圖插入視口來解決問題 – 2012-02-08 06:20:59

通過這一點，我可以插入TreePanel中視口

<html> 
<head> 
    <title> <Getting Started Example </title> 
    <link rel ="stylesheet" type="text/css" 
     href="resources/css/ext-all.css" /> 

    <script src="extjs/adapter/ext/ext-base.js"> </script> 
    <script src="ext-all-debug.js"> </script> 
    <script src="/src/tree/Panel.js"> </script> 
    <script src="/src/windows/Window.js"> </script> 
    <script src="/src/panel/Panel.js"> </script> 
    <script type="text/javascript" src="reorder.js"></script> 

    <script> 
    Ext.define('User', { 
     extend: 'Ext.data.Model', 
     fields: ['name'] 
    }); 

    var tpanel = new Ext.create('Ext.tree.Panel', { 
     height: 100, 
     renderTo: Ext.getBody(), 
     width: 200, 
     region: 'west', 
     columns: [ 
      {dataIndex: 'name', flex: 1, header: 'Tree Panel', xtype: 'treecolumn'} 
     ], 
     store: { 
      model: 'User', 
      root: { 
       name: 'Rumah', 
       children: [ 
        {name: 'Gavin Renaldi', children: [{name: 'Benar Sekali', age: 2, children: []}]}, 
        {name: 'Gavin Ripharbowo', children: []} 
       ] 
      } 
     }, 
     viewConfig: { 
      plugins: { 
       ddGroup: 'user-dd', 
       ptype: 'treeviewdragdrop' 
      } 
     } 
    }); 
Ext.onReady(function() { 

    Ext.create('Ext.container.Viewport', { 
    layout: 'border', 
    items: [{ 
     region: 'north', 
     html: '<h1 class="x-panel-header">Page Title</h1>', 
     autoHeight: true, 
     border: false, 
     width:100, 
     height:100, 
     margins: '0 0 5 0' 

    }, tpanel, { 
     region: 'center', 
     xtype: 'tabpanel', // TabPanel itself has no title 
     activeTab: 0,  // First tab active by default 
     items: [{ 
      title: 'First Tab', 
      html: 'The first tab\'s content. Others may be added dynamically', 
     },{ 
      title: 'Second Tab', 
      html : 'Tab berfungsi untuk sdfkjdf' 
     }] 
    }] 
}); 

}) 

</script> 
</head> 
<body> 


</body>

來源

2012-02-08 06:22:05

如何把樹面板中視區的Ext JS 4

回答

相關問題