PDA

View Full Version : Auto Adjusting Ext js grid width with screen resolution



farooqafridi
23 Dec 2010, 3:14 AM
Hi ,
how adjust Ext js grid width as we increase screen resolution ext js grid expand accordingly.

can we set ext js column width in percentage as we do with html table.

Regards.

devtig
23 Dec 2010, 3:40 AM
You can only set the initial width in pixels of the column.
manual on Column: http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.Column

You could set autoExpandColumn to the number of the column to be auto expanded:

{
xtype: 'viewport',
layout: 'fit',
items: [
{
xtype: 'grid',
title: 'My Grid',
autoExpandColumn: 1,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100
}
]
}
]
}
manual on GridPanel: http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel?class=Ext.grid.GridPanel


Or forceFit all columns through the GridView:


{
xtype: 'viewport',
layout: 'fit',
items: [
{
xtype: 'grid',
title: 'My Grid',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100
}
],
view: new Ext.grid.GridView({
forceFit: true
})
}
]
}
manual on GridView: http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridView

farooqafridi
23 Dec 2010, 4:20 AM
Thank you very much sir for the help.
by using forcefit = true solved my problem.

Thank you for the quick and accurate response.

farooqafridi
31 Dec 2010, 5:58 AM
Hi,

i want to set the view: new Ext.grid.GridView({
forceFit: true}),

on basis of some condition.

some times i show 18 columns in grid panel in that case i want grid panel to be on full screen, but in other cases i have more then 25 columns and in that case i donot want my grid to be force fit = true because there are enough columns on the screen and no need for force fit = true and in this case it also creates mess.

so how can i do that after store load event because after store load event i have the number of columns on the basis of which i can take decision.

although i tried to do like that am i right or wrong, show me another way, it is not working.
<CODE>
view: new Ext.grid.GridView({

var daysData = $(store.reader.xmlData).find("Days")[0];
var cellFilled = false;
var totalIncomingColumns = 0;
if ($(store.reader.xmlData)[0].xml != "")
totalIncomingColumns = daysData.childNodes.length;
if (totalIncomingColumns == 7)
{
forceFit: true;
}
else if(totalIncomingColumns > 7)
{
forceFit: false;
}
}),
</CODE>

Thanks.

devtig
2 Jan 2011, 11:55 PM
I'm sorry, but this is: "Too many syntax errors". This is A. not javascript and B. no way to make an instance of a component in ExtJs.

Make an instance of a component like so:


new Ext.grid.GridView({
a : 123,
b : 'abc',
forceFit : totalIncomingColumns > 7 ? true : false
});


And use the CODE tags around your posted code so that code looks like it does in my post instead of how it looks in your post.

farooqafridi
3 Jan 2011, 3:48 AM
you have set the
forceFit : totalIncomingColumns > 7 ? true : false
while creating new instance of grid, but at that time i don't have totalIncomingColumns initialized, i want to do that after store load event.

Thanks.

devtig
3 Jan 2011, 4:19 AM
You could try this but I don't think it works, because forceFit is a config option and not a public property.


myGrid.getStore().on('metachange', function(store, meta) {
myGrid.getView().forceFit=meta.colModel.length > 7 ? true : false;
myGrid.doLayout();
});


(disclaimer: untested code)

Or don't use the forceFit approach at all, but assign a column to be the one that auto-expands. Check out autoExpandColumn config option in GridPanel: http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel?class=Ext.grid.GridPanel

devtig
3 Jan 2011, 4:26 AM
You might want to read thess posts about dynamic grids (changing columns):
http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html
http://erhanabay.com/2009/01/29/dynamic-grid-panel-for-ext-js/

farooqafridi
11 Jan 2011, 12:03 AM
Hi,

i am successful in setting "autoExpandColumn" and now my grid auto expands, but you identified to set "autoExpandColumn" as no of column but actually we have to set the column name.

ok let me know if there is way to autoExpand two or more columns.

Thanks.

Condor
11 Jan 2011, 12:27 AM
Configure the columns you don't want to resize with fixed:true and configure the gridview with autoFill:true (or forceFit:true).

farooqafridi
11 Jan 2011, 3:11 AM
thanks,
yea i know that force fit can do that,
but my question is how to auto adjust two or more columns like we do with "autoExpandColumn" config option which auto expand only a single column, but i want two or more column to auto adjust.

Thanks.

Condor
11 Jan 2011, 3:42 AM
No, GridView doesn't support multiple autoExpandColumns.

But did you try the fixed:true/autoFill:true combination?