0

在我的 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左边的the和Ext.tab.Panel右边的aExt.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();
4

2 回答 2

2

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

你有主要的布局，它是边界：

  • 西部：饲料
  • 中心：Feed 信息面板

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

  • 中心：网格。
  • 南：选定的提要。

feedviewer 的代码有些复杂。您可能会发现这更有帮助。

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

于 2012-12-06T15:43:37.950 回答
0

在 Chrome 中打开开发者控制台。并检查来源。它们没有被压缩和可读。:) 在 FeedViewer 类中创建的视口。所以这是你的切入点。

于 2012-12-08T19:48:09.623 回答