如何使ExtJs應用程序看起來像Feed示例？

Question

在我的ExtJS應用程序中，我有3個組件，一個Ext.tree.Panel ，一個Ext.grid.Panel和一個Ext.Img 。 我希望它們具有與Feed Viewer示例相同的布局：

http://dev.sencha.com/deploy/ext-4.0.0/examples/feed-viewer/feed-viewer.html

我一直試圖查看代碼，但我仍然無法讓我的組件看起來像那樣（左邊是一個組件，另一個組件是另一個組件）。 任何人都可以解釋我如何使用'邊框'布局來做到這一點？ （這是他們正在使用的）。

編輯：嘗試創建嵌套邊框布局。 該Ext.tree.Panel左側和Ext.tab.Panel在與右側Ext.grid.Panel和Ext.Img它里面。 這會導致整個選項卡面板顯示為空白。 代碼如下：

 grid_file = Ext.create('Ext.grid.Panel', {
            title: 'File List',
            region: 'north',
            height:200,
            width:700, 
            store: store_file,
            dockedItems: [upload_toolbar],
            columns: [..]});

var imagePanel = Ext.create('Ext.Img', {
            src: 'DefaultImage',
            region: 'south',
            width: 700,
            height: 200
        });
 var tab_Panel = Ext.create('Ext.tab.Panel' , {
            width: 700,
            region: 'center',
            items: [grid_file, imagePanel]})

        win = Ext.create('Ext.window.Window', {
            title: 'ExtJS Simple File Browser',
            width: 900,
            height: 400,
            layout: 'border',
            bodyStyle: 'padding: 5px;',
            items: [tree_dir,button_panel]
        });

        win.show();

Answer 1

這實際上是一個嵌套的邊框布局：

你有主要的布局，邊界是：

• 西：飼料
• 中心：Feed信息面板

並且Feed信息面板還具有邊框布局以及：

• 中心：網格。
• 南：選定的飼料。

feedviewer的代碼有點牽扯。 您可能會發現這更有幫助。

如果仍然無法解決問題，請提交您的代碼。

Answer 2

在Chrome中打開開發者控制台。 並查看來源。 它們不是壓縮和可讀的。 :)在FeedViewer類中創建的視口。 所以這是你的切入點。