PDA

View Full Version : Make Grid Panel Span Container and Resize Accordingly



latterd
16 Dec 2011, 9:49 AM
Hi All,

Merry xmas :)

What is the best way to make a grid panel span the with of the container it sits in, and also resize accordingly when I resize the browser window?

Scenario:

I have a tabpanel, on each tab there is form panel with a nested grid panel. I can make the tabpanel span the entire browser window but how can I get the gridpanel to span the entire browser window aswell? furthermore, how can I get the tabpanel contents to resize accordingly also?

Many Thanks
latterd

mitchellsimoens
16 Dec 2011, 12:07 PM
The grid is within the form? Should be able to use the anchor config as the form should be using anchor layout. anchor take a string and can be 1 or 2 values within it. Let's take this for an example:


anchor : '90% 50%'

That means the grid will take 90% of the available width and 50% of the available height at all times (when the parent container resizes)

If you pass one value it is assumed to be the width:


anchor : '100%'

will take up 100% of the available width.

You can also don't have to use percentages:


anchor : '-20'

Means that the width will be 100% minus 20 pixels.

latterd
16 Dec 2011, 2:51 PM
Hi,

Many Thanks for your reply, I did try what you suggested but to no avail? I have included my code below to see if this changes anything?

NOTE: I have ommitted some code for brevity but
grid3 is a gridpanel,



candidatesGridForm = Ext.create('Ext.form.Panel', {
url: 'http://rest/candidates/',
method: 'POST',
id: 'candidates-form',
width: '100%',
frame: false,
title: 'Candidates',
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
tbar:candidatesToolbar,
items: [
grid3
]
});




var tabs = Ext.createWidget('tabpanel', {
renderTo: 'xapp',
//width: "100%"
activeTab: 0,
defaults :{
bodyPadding: 0
},
items: [tabHome, candidatesGridForm]
});


So, as you can see I create my gridpanel, add it to a formpanel, which is then finally added to a tabpanel.

Many Thanks for any help.
latterd.

skirtle
16 Dec 2011, 5:21 PM
Get rid of the width: '100%', it isn't valid.

Currently you don't have a layout specified on the form. This is the cause of your problems.

If you want the grid to fit the width and height of the form then use a fit layout.

If you want to do cleverer things with percentages or pixel offsets then you'll need to use anchor layout or absolute layout.

Check out the layout browser example:

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout-browser/layout-browser.html

The layout option needs to be specified on the form but the details go on the grid itself. If you can't get it to work then please post your code including your attempts at using the layouts so that we can point you in the right direction.

latterd
26 Dec 2011, 9:33 AM
Hi skirtle,

Thanks for the reply, sorry mine is a bit late but it is the holidays and all :).

I tried your suggestion but to no avail, so I'm posting my code as you kindly suggested:



candidateProfileForm = Ext.create('Ext.form.Panel', {
url: 'http://localhost.testing.com/rest/rest/candidates/1',
method: 'POST',
id: 'candidateProfile-form',
frame: false,
title: 'Profile',
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
items: [ ... ]
}).hide();




grid3 = Ext.create('Ext.grid.Panel', {
store: candidatesStore,
selModel: sm,
columnLines: true,
frame: false,
title: 'Candidates',
columns: [ ... ],
bbar: candidatesPagingBar
});




candidatesGridForm = Ext.create('Ext.form.Panel', {
url: 'http://localhost.testing.com/rest/rest/candidates/1',
method: 'POST',
id: 'candidates-form',
frame: false,
title: 'Candidates',
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
tbar:candidatesToolbar,
items: [
grid3,
candidateProfileForm
]
});




var tabs = Ext.widget('tabpanel', {
renderTo: 'xapp',
activeTab: 0,
defaults :{
bodyPadding: 0
},
items: [tabHome, candidatesGridForm]
});


Many Thanks, please let me know if you need more info.

danielleng
26 Dec 2011, 4:46 PM
You did not do what skirtle mentioned. You need to specify the LAYOUT of the panel so that your items inside the panel can be sized and placed properly.



candidatesGridForm = Ext.create('Ext.form.Panel', {
url: 'http://localhost.testing.com/rest/rest/candidates/1',
method: 'POST',
id: 'candidates-form',
layout: 'anchor', // or fit/column/watever layout you want.
frame: false,
title: 'Candidates',
bodyPadding: 5,
fieldDefaults: {
abelAlign: 'left',
msgTarget: 'side' },
tbar:candidatesToolbar,
items: [
grid3,
candidateProfileForm
]
});





It seems to me you did not look at the examples at all. Theres alot of info there, and also in the api documentation.
Once u have specified the layout THEN you can go on ahead and put
anchor: '100% 50%'
For the items INSIDE that panel.