PDA

View Full Version : Resizing tabspanel and grid



silvaros
29 Jul 2009, 7:04 AM
I'm sorry to have to post this question as it seems have been covered elsewhere. But I've been reading a while and still can figure it out. I'm trying to put a grid in a tabpanel and have them resize on when the window is resized.

The info at https://yui-ext.com/forum/showthread.php?t=3170 is for 1.x, so would it still work in 3.0? Here's what I tried based on that link. It doesn't show tabs or resize.



var grid = new Ext.grid.GridPanel({
id: 'folderGridList',
region: 'center',
layout: 'fit',
store: store,
columns: getLinkTabLayout(),
viewConfig: {
forceFit: true
},
width: document.body.clientWidth,
height: document.body.clientHeight - 20,
frame: false
});

var panel = new Ext.Panel({
id: 'panel',
region: 'center',
html: 'new panel',
layout: 'fit'
});

var tc = new Ext.Panel({
renderTo: 'contentDiv',
layout: 'border',
height: document.body.clientHeight - 10,
width: document.body.clientWidth,
activeTab: 0,
id: "tabContainer",
items: [grid, panel]
});

Animal
29 Jul 2009, 7:48 AM
Resize to what?

The browser window?

An Ext.Window?

andycramb
29 Jul 2009, 7:55 AM
You also have 2 components that have their region set as 'center'
Only one is meant to go in the center for border layout.

silvaros
29 Jul 2009, 8:12 AM
A browser window.

I seemed to me that the comments at that link were saying that if you put more than one panel in the center region it would tab-ify them.

Animal
29 Jul 2009, 8:36 AM
What scheme would it use to resize?

If you insist on using "islands" of Ext inside static HTML instead of a Viewport, then perhaps Condor's FitToParent plugin might be for you.

Animal
29 Jul 2009, 8:37 AM
Do not read anything about Ext 1.*. The object model has completely changed.

silvaros
29 Jul 2009, 9:08 AM
So it seems that when ever I try to type in a 'new Viewport...' i get the "is not a constructor" error, but if I copy/paste from the example in the docs and replace/delete the content it works... sure i must have been doing something wrong...again.

Anyhow this seems to be working, thought I had already tried a viewport. This time I used 'items[{xtype:'tabpanel',...}]' instead of doing a 'var = new TabPanel({...})'

Thanks for the replys Animal, and thanks for not pulling a Dr. Cox on me.

Here's the code if someone stumbles upon a similar problem


var grid = new Ext.grid.GridPanel({
id: 'folderGridList',
title: 'Target Dev Folders',
store: store,
columns: getLinkTabLayout(),
viewConfig: {
forceFit: true
},
frame: false
});

new Ext.Viewport({
layout: 'border',
items: [ {
region: 'center',
xtype: 'tabpanel',
activeTab:0,
items: [grid]
}]
});

Animal
29 Jul 2009, 9:12 AM
WHy layout: 'border' with just a center?

That's layout: 'fit'!

silvaros
29 Jul 2009, 9:40 AM
Good point, but I will be adding buttons, etc. to the north region.

And just to spite dojo... I spent 2 days of tinkering and researching to try to get this done in dojo and never found a proper solution. Ext JS is obviously superior.

Animal
29 Jul 2009, 10:36 AM
You don't need a north region if all you want is a Toolbar.

Just make the single item in the layout:'fit' Viewport a layout: 'fit' Panel with a tbar config. That Panel then contains the TabPanel.