How to get an ExtJs application to look like the Feed Example?

问题

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).

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

回答1:

This is actually a nested border layout:

You have the main layout, which is border with:

West: The feeds
Center: The feed info panel

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

Center: The grid.
South: The selected feed.

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.

回答2:

Open developer console in Chrome. And check sources. They are not compressed and readable. :) Viewport created in FeedViewer class. So this is your entry point.

来源：https://stackoverflow.com/questions/13746671/how-to-get-an-extjs-application-to-look-like-the-feed-example

标签

javascript

extjs

extjs4