javascript - 如何让 ExtJs 应用程序看起来像 Feed 示例？

Question

在我的 ExtJS 应用程序中，我有 3 个组件，一个 Ext.tree.Panel、Ext.grid.Panel 和一个 Ext.Img >。我希望它们具有与此处的 Feed 查看器示例相同的布局:

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

这实际上是一个嵌套的边框布局:

您有主布局，其边框为:

• West:提要
• 中心:提要信息面板

提要信息面板也有边框布局:

• 中心:网格。
• 南:所选 Feed。

提要查看器的代码有些复杂。您可能会发现this更有帮助。

如果您仍然无法解决问题，请提交您的代码。