如何获得一个ExtJS的应用程序看起来像供稿示例？(How to get an ExtJs appl

在我的ExtJS的应用我有3个组成部分，一个Ext.tree.Panel和Ext.grid.Panel和Ext.Img 。我希望他们有布局为这里的饲料阅读器例子一样：

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:

这实际上是一个嵌套的边界布局：

你已经为主的布局，这是边境：