PDA

View Full Version : About layouts and creating controls in a non-traditional way



ncardeli
24 Apr 2008, 6:52 PM
For different reasons (it's a long story), in the scenario I'm currently working I must define each control independently from the other, and in the end, add the inner controls to the container controls using the add method.

When creating each control, I indicate them the <div> element they should render to. For example:

Markup:


<div id="West"></div>
<div id="Center">
<div id="MarkupInTheMiddle">
<div id="GridContainer">
</div>
</div>
</div>


JS:


Ext.onReady(function(){
var panel = new Ext.Viewport({
id: "layout1",
layout: 'border',
frame: true,
items: [
{
region: "center",
contentEl: "Center",
title: "Center",
layout: "fit",
split: true
},
{
region: "west",
title: "West",
contentEl: "West",
width: 300,
split: true
}
]
});


var grid = new Ext.grid.GridPanel({id: 'grid1',
border:false,
autoExpandColumn: 'Name',
columns:[
{id:'Name',header: 'Name'},
{id:'Tel',header: 'Tel'},
{id:'Fax',header: 'Fax'}
],
ds: new Ext.data.Store({}),
renderTo: "GridContainer",
viewConfig:{
forceFit: true
}
});

panel.add(grid);
});



By following this approach, resizing is not handled automatically and, in the particular case of grids with forceFit in true, in IE the grid columns total width is 10000px, and in Firefox the columns are not resized automatically.

Is there anything I can do to make this behave the same way it would If I did it in the traditional way? For example, the way it behaves in this example:



<div id="West"></div>
<div id="Center">
<div id="GridContainer">
</div>
</div>



Ext.onReady(function(){
var panel = new Ext.Viewport({
id: "l",
layout: 'border',
frame: true,
items: [
{
region: "center",
contentEl: "Center",
title: "Center",
layout: "fit",
split: true,
items: {id: 'g',
xtype: "grid",
border:false,
autoExpandColumn: 'Name',
columns:[
{id:'Name',header: 'Name'},
{id:'Tel',header: 'Tel'},
{id:'Fax',header: 'Fax'}
],
ds: new Ext.data.Store({}),
renderTo: "GridContainer",
viewConfig:{
forceFit: true
}
}
},
{
region: "west",
title: "West",
contentEl: "West",
width: 300,
split: true
}
]
});
});


Let me know if you need more information or examples.

Thanks for your time.

evant
24 Apr 2008, 6:59 PM
Not really. The containers themselves are the things that layout child components. The first and second cases are fundamentally different, because you're adding things to different containers.

ncardeli
25 Apr 2008, 6:05 AM
Thanks for replying evant. My sample code wasn't right, here is the corrected sample code:



Ext.onReady(function(){
var panel = new Ext.Viewport({
id: "layout1",
layout: 'border',
frame: true,
items: [
{
id: "CenterRegion",
region: "center",
contentEl: "Center",
title: "Center",
layout: "fit",
split: true
},
{
region: "west",
title: "West",
contentEl: "West",
width: 300,
split: true
}
]
});


var grid = new Ext.grid.GridPanel({id: 'grid1',
border:false,
autoExpandColumn: 'Name',
columns:[
{id:'Name',header: 'Name'},
{id:'Tel',header: 'Tel'},
{id:'Fax',header: 'Fax'}
],
ds: new Ext.data.Store({}),
renderTo: "GridContainer",
viewConfig:{
forceFit: true
}
});

Ext.getCmp("CenterRegion").add(grid);
});

ncardeli
28 Apr 2008, 5:19 AM
Adding a call to panel.doLayout() solves the problem.

Thanks for your help evant.