PDA

View Full Version : add method and 100% height



ziorufus
12 Jun 2010, 1:25 PM
Hello!
I'm using the add method of a Panel to add a grid in it, but I cannot make the grid take 100% of height of the panel.

How can I do?

This is the definition of the TabPanel:


{
region: 'center',
margins: '5 0',
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: "La mia griglia",
listeners: {
activate: function(panel) {
attivaPannello1(panel);
}
}
},
{
title: "Altro",
listeners: {
activate: function(panel) {
attivaPannello2(panel);
}
}
}
]
}
This is the function:




function attivaPannello1(panel) {
var store = new Ext.data.Store({
data: [
[10, "Titolo"],
[11, "Titolo2"],
[12, "Titolo"],
[13, "Titolo"],
[14, "Titolo"],
[15, "Titolo"],
[16, "Titolo"],
[17, "Titolo"],
[18, "Titolo"],
[19, "Titolo"],
[20, "Titolo"],
[21, "Titolo"],
[22, "Titolo"],
[23, "Titolo"],
[24, "Titolo"],
[25, "Titolo"]
],
reader: new Ext.data.ArrayReader({id: 'id'}, ['id', 'title'])
});

var grid = new Ext.grid.GridPanel({
store: store,
border: false,
layout: 'fit',
height: 200,
columns: [
{header: '#', dataIndex: 'id'},
{header: 'Title', dataIndex: 'title'}
]
});

panel.removeAll();
panel.add(grid);
panel.doLayout();
}

The Panel load the grid correctly, but shows only one line.
If I put height: 200 (for example) in the Panel, it works correctly, but by putting height: '100%' doesn't.

Thanks
Alessio

Animal
12 Jun 2010, 9:37 PM
You need to cosider how that Panel is going to lay out the grid that you add.

Read the full explanation of this at

http://www.extjs.com/deploy/dev/docs/?class=Ext.Container&member=layout

Expand that section and read the whole thing.

ziorufus
15 Jun 2010, 1:37 AM
I used the "fit" option because I wanted the inner panel to fill the entire space, but it doesn't work.
I think the problem is to use the add() method instead of loading it when the panel load.
My problem is that in tabpanel a tab content is loaded once and then it is "cached" and not loaded again in ajax. For example, if I click on Panel2 I can load the content of that panel by ajax. Then I click on Panel3 and again on Panel2, the content of that panel is the same as before, even if someone in another part of the world has modified a line of the grid in the meantime.
So I found the add() solution, that allow me to load the content everytime the tab change, even if it was already loaded before.

I hope this was more explaining (and sorry for my english).

Alessio

Animal
15 Jun 2010, 2:42 AM
FitLayout does work. You are not using it.




{
title: "La mia griglia",
listeners: {
activate: function(panel) {
attivaPannello1(panel);
}
}
},


You have NO layout. Which means, as the docs tell you in four separate places, that no sizing will be done.