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();
This is actually a nested border layout:
You have the main layout, which is border with:
And the feed info panel has border layout as well with:
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.