PDA

View Full Version : setting columnWidth and column header dynamically



adms
22 Oct 2011, 6:04 AM
hi every body,
in extjs3 we used the following functions to set proprieties:


var colMod = grid.getColumnModel();
colMod.setColumnHeader(1, 'new header');
colMod.setColumnWidth(1, 144);

but how to do it in extjs4 ?????????:-/
thanks

twaindev
22 Oct 2011, 1:53 PM
Here's one way:


var col = grid.headerCt.getHeaderAtIndex(1);
col.setText('new header');
col.setWidth(144);

adms
23 Oct 2011, 12:01 AM
thanks for reply,
the following code is working fine


var col = grid.headerCt.getHeaderAtIndex(2);
col.setText('new header');

but the statement:


col.setWidth(144);

sets the new width of the column only if the new width is grater than the old width,
but if the new width is smaller than the old width , no change in column width why??

twaindev
23 Oct 2011, 1:47 AM
Does the column have a flex (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Box-cfg-flex) config?

If it does you'll have to set it to 0 (zero) otherwise the width of the column can only be greater than the calculated width.


var col = grid.headerCt.getHeaderAtIndex(1);
col.setText('new header');
col.flex = 0;
col.setWidth(50);

adms
25 Oct 2011, 12:09 AM
sorry twaindev, I still have the same problem,
my column configuration is:


{
header : 'Name',
width:120,
dataIndex : 'name',
}





var col = grid.headerCt.getHeaderAtIndex(1);
col.setText('new header'); //works fine
col.flex = 0;
col.setWidth(50); // no result , can't be less than the old width(120)

twaindev
25 Oct 2011, 1:10 AM
What version do you use? In 4.0.7. it works just fine.

adms
26 Oct 2011, 3:24 AM
i'm using extjs4.0.7 now ,and evey thing works fine.
thank you very much twaindev.
but i want to ask you , if you have any idea about version 4.1, when to release it?
is it contain a pivot grid like version 3.2.1?
is it contain an rtl ?

twaindev
26 Oct 2011, 3:50 AM
I don't know about the release date.

You can read about the preview here:

http://www.sencha.com/blog/ext-js-4-1-developer-preview/

Please select the answer that helped you most to close this topic.