如何使ExtJs应用程序看起来像Feed示例？ [英] How to get an ExtJs application to look like the Feed Example?

问题描述

在我的ExtJS应用程序中，我有3个组件，一个 Ext.tree.Panel 和 Ext.grid.Panel 和 Ext.Img 。我希望他们具有与Feed Viewer示例相同的布局：

In my ExtJS Applications I have 3 components, an Ext.tree.Panel, and Ext.grid.Panel and an Ext.Img. I want them to have the same layout as the Feed Viewer example here:

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

我一直在试图看代码，但是我仍然无法让我的组件看起来像这样（左边的一个组件和两个在右边的另一个顶部）。任何人都可以解释如何使用边框布局来做到这一点？ （这是他们正在使用的）。

I have been trying to look at the code but I am still having trouble getting my components to look like that (One component on the left, and two on the right one on top of the other). Can anyone explain how I can do this using 'Border' layout? (Which is what it looks like they are using).

编辑：尝试创建嵌套边框布局。左侧的 Ext.tree.Panel 和右侧的$ code Exttab.Panel $ c> Ext.grid.Panel 和 Ext.Img 里面。这会导致整个选项卡面板显示为空白。代码如下：

tried creating a Nested Border Layout. The Ext.tree.Panel on the left and a Ext.tab.Panel on the right with the Ext.grid.Panel and the Ext.Img inside of it. This causes the entire tab panel to show up blank. Code below:

 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();

推荐答案

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

This is actually a nested border layout:

您的主要布局与...有边框：

You have the main layout, which is border with:

• 西： / li>
  
• 中心：Feed信息面板

Feed信息面板还具有边框布局：

And the feed info panel has border layout as well with:

• 中心：网格。


• 南：所选的Feed。

Feedviewer的代码有些涉及。您可能会找到此更有帮助。

The code of the feedviewer is somewhat involved. You will probably find this more helpful.

如果您仍然无法使用，请提交代码。

Submit your code if you still can't work it out.

这篇关于如何使ExtJs应用程序看起来像Feed示例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！