PDA

View Full Version : 100% height when loading into a div



jonwuwo
7 Mar 2011, 9:42 AM
Hey guys,

I'm an Ext JS newbie and have a question, (sorry if I have the wrong section)

I need a panel (or some type of Ext JS container) to load into, and fill the space of a fixed height <div>. I've managed to get the panel loaded into a <div> and strech the panels width to fill it, but I'm struggling to make it do the same for the height :-/

If anyone can help point me in the right direction that would be great,

Boycey

bryall
7 Mar 2011, 1:25 PM
layout: 'fit'

7 Mar 2011, 1:43 PM
I have the same issue and can't get my FormPanel to fill all the height of 'west-div' using fit:

<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug-w-comments.js"></script>
<script type="text/javascript">

Ext.onReady(function(){

var panel = new Ext.form.FormPanel({
renderTo:'west-div',
layout:'fit',
border:true,
items:[
{
xtype:'panel'
,layout:'column'
,style: {
marginTop: '14px',
marginRight: '15px',
},
title: 'Properties',
id:'propertiesPanel',
tbar:[
{
xtype: 'tbbutton',
text: 'Add',
},{
xtype: 'tbseparator'
}
]
}]
});
panel.doLayout();
});

</script>

</head>
<body>

<div id="west-div" style='height:100%'></div>

</body>
</html>

jonwuwo
8 Mar 2011, 6:16 AM
I've tried the layout : 'fit' but that doesn't seem to work.

My code is:


MyViewportUi = Ext.extend(Ext.Panel, {
title: 'Warehouse holder',
layout: 'fit',
initComponent: function() {
this.items = [
{

xtype: 'grid',
store: 'WarehouseStore',
layout: 'fit',
columns : [
{
xtype: 'gridcolumn',
header: 'name',
dataIndex: 'name',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'lat',
dataIndex: 'lat',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'lon',
dataIndex: 'lon',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'meterSq',
dataIndex: 'meterSq',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'existing',
dataIndex: 'existing',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'palletsPerMeter',
dataIndex: 'palletsPerMeter',
sortable: true
}
]
}
]


;
MyViewportUi.superclass.initComponent.call(this);
}
});And what I'm seeing is this:

25033

Many thanks

fay
8 Mar 2011, 6:47 AM
Remove the single quotes from your store config option:



// ...
store: WarehouseStore, // <-- expects a store object not a string
// ...

emils
8 Mar 2011, 7:02 AM
just got errors in the code ...

Define grid separately, for example:



Grid = Ext.extend(Ext.grid.GridPanel, {
id: 'grid',
initComponent:function() {
Ext.apply(this, {
ds: {store definition},
columns: [{column definition},{column definition},{column definition},{column definition}],
sm: new Ext.grid.RowSelectionModel({singleSelect:true}), // if needed
});
Grid.superclass.initComponent.apply(this, arguments);
},
other definitions ...
});
Ext.reg("Grid",Grid);
var NewGrid = new Grid;



then just put it in the panel, something like:



MyViewportUi = new Ext.Panel({
border:false,
bodyBorder:false,
layout: 'border',
items: [{
region: 'center',
layout: 'fit',
items: [NewGrid]
}]
});

jonwuwo
8 Mar 2011, 7:04 AM
If I Remove the single quotes that stops the data from being pulled in.

The data is being pulled into the grid. Its the surrounding panel that is hidding the grid, so I need the panel to stretch to the height of the pink box.

NoahK17
8 Mar 2011, 7:35 AM
Here's the issue: Your grid doesn't have any data. Once you load some data, and you use the layout: fit, your grid will expand to cover the whole div. Just send back some blank data and you should be good.

emils
8 Mar 2011, 7:44 AM
do not confuse people, the data have nothing to do with the problem

jonwuwo
8 Mar 2011, 9:52 AM
@emils

I have reworked the code to be closer to what you said;


MyViewportUi = Ext.extend(Ext.Panel, {
border:false,
bodyBorder:false,
layout: 'border',
initComponent: function() {
this.items = [
{
region: 'center',
layout: 'fit',
items: [{
xtype: 'grid',
store: 'WarehouseStore',
height: '',
columns : [
{
xtype: 'gridcolumn',
header: 'name',
dataIndex: 'name',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'lat',
dataIndex: 'lat',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'lon',
dataIndex: 'lon',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'meterSq',
dataIndex: 'meterSq',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'existing',
dataIndex: 'existing',
sortable: true
},
{
xtype: 'gridcolumn',
header: 'palletsPerMeter',
dataIndex: 'palletsPerMeter',
sortable: true
}
]
}
]
}]

;
MyViewportUi.superclass.initComponent.call(this);
}
});

this code gives me this result;

25037

If I add a height instead of the ' border:false,bodyBorder:false, ' I can then see the grid?

25038

Do you think this could be because of the way I have coded Grid, and that doing it your way said would correct the problem?

Thanks for your help :)

NoahK17
8 Mar 2011, 10:47 AM
What does code formatted like this give you?



var grid = new Ext.grid.GridPanel({
id: 'grid-id',
autoHeight: true,
store: storeName

title: 'Grid',

columns:[
{ header: "Column 1", dataIndex: 'column1', width: 100, sortable: true},
{ header: "Column 2", dataIndex: 'column2', width: 100, sortable: true}
]
});

var panel = new Ext.Panel({
id: 'panel-id',
width: 500,
items: [ grid ]
});

panel.render('div-id');

emils
8 Mar 2011, 10:58 PM
To summarize:

1. in extjs layouts work perfectly.
2. grid does not fill the entire height because you have an error in the code.
3. when I look the code, i see you can try the following:



// layout: 'border',
initComponent: function() {
layout: 'border',
this.items = [