PDA

View Full Version : Height in percentage not working for Ext.Grid.Panel (Extjs 4)?



frankpeng
8 Apr 2013, 8:51 AM
I have a grid where I set width and height in percentages for the grid (not the columns). As I stretch my IE (IE-8) browser, the width gets adjusted accordingly. However, it doesn't appear the height gets adjusted at all.

Can someone please tell me if this is a bug or if there is a workaround?

Here is the code for the grid:


Ext.define('view.site', {
extend: 'Ext.grid.Panel',
alias: 'widget.site',


initComponent: function () {
var me = this;


Ext.apply(me, {
renderTo: 'container',
collapsible: false,
frame: false,
store: 'site',
width: '80%',
height: '60%',
maxHeight: 400,
features: [{ ftype: 'grouping' }],
scroll: 'vertical',
columns: [{
text: 'Catalog Number',
flex: 1,
dataIndex: 'catalog'
}, {
text: 'Description',
flex: 1,
dataIndex: 'description'
}, {
xtype: 'checkcolumn',
text: 'Assigned?',
dataIndex: 'assigned',
width: 60
}]
});


me.callParent(arguments);
}
});

slemmon
8 Apr 2013, 9:30 AM
Are you rendering the grid to an element on the document directly or is the grid a child item of a parent container?

frankpeng
8 Apr 2013, 10:10 AM
Thanks for getting on this quickly. Here is the main code.

Also, I removed an unnecessary line above "renderTo: 'container'"



launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
border: false,
items: [
{
xtype: 'container',
name: 'sitetitle',
html: 'Site info'
},
{
xtype: 'container',
html: 'Instructional message',
margin: '5 10 5 10'
},
{
xtype: 'site', ////////////////////////////// use it here /////////////////
margin: '0 10 0 10'
}
]
}]
});
}

slemmon
8 Apr 2013, 11:19 AM
Your viewport has one child container and it has 3 child components under it in the example. Are the first two components supposed to be taking up a height as well?
The container they belong to doesn't have a layout specified. Since you're wanting the third component to take up a percentage of space I take it you'll be using a vbox (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.layout.container.VBox) layout for the container of those three components, yes?

frankpeng
8 Apr 2013, 1:16 PM
I tried 'vbox' instead of 'fit', but it didn't show anything.

I also tried by removing the first two children which just have html text and only keeping the grid panel (view.site), height: '60%' still had no effect, when the browser height size was changed.





launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit', //'vbox' showed nothing
items: [{
border: false,
items: [


{


xtype: 'site',
margin: '0 10 0 10'
}
]
}]
});

slemmon
8 Apr 2013, 3:15 PM
See if this snippet helps out. It doesn't use percentages in the height, but instead participates in the owning container's vbox layout by specifying flex (which is in effect a calculated percentage). In this example I'm using a vbox layout with align: stretch. With that the height is determined either by the height (set in pixels) or flex which is a ratio operator that is used in conjunction with the heights/flexes configured for its peer components.

In this example I set a component with a flex of 4 (our 40%) and the panel, which could be any component, at a flex of 6 (giving us out 60%).

Now, the component should resize along with the viewport/window if resized - maintaining its 60% height.



Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox'
, align: 'stretch'
},
items: [{
xtype: 'component'
, flex: 4
}, {
xtype: 'panel'
, title: '60%'
, flex: 6
}]
});

frankpeng
9 Apr 2013, 5:29 AM
That seems to work. Thanks!