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

在我的ExtJS的应用我有3个组成部分，一个Ext.tree.Panel，并Ext.grid.Panel和Ext.Img。我希望他们有布局作为Feed浏览器例如这里一样：如何让ExtJs应用程序看起来像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();

来源

2012-12-06 Art F

带边框布局的窗口具有tree_dir和button_panel作为项目，这些定义在哪里？所有具有区域的面板的容器是什么？如果grid_file具有区域，则它的容器（tab_panel）必须具有边界布局。 – Izhaki

tree_dir是'Ext.tree.Panel'，button_panel是'Ext.form.Panel'。我向tab_panel添加了'layout：'border''。它没有改变任何东西。 –

啊，我明白了。愚蠢的错误，我没有添加tab_panel赢得。 –

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

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

西：该饲料
中心：饲料信息面板

而馈送信息面板也有边框布局以及：

中心：网格。
South：选定的Feed。

的feedviewer的代码是较为复杂。您可能会发现this更有帮助。

提交你的代码，如果你仍然无法工作了。

来源

2012-12-06 15:43:37 Izhaki

嗯，添加了一些代码。我为嵌套布局添加的面板显示为空白。 –

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

来源

2012-12-08 19:48:09 Psycho

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

回答

相关问题