PDA

View Full Version : ExtJS 4.1.1 || grid.Columns 'autoSizeColumn' alternate option for column autofit



vick_44
24 Aug 2016, 6:42 AM
I need to make the column headers and content auto fit, but if i try to use autoSizeColumn : true with a listener, it works just fine but only on Version 4.2 and up.

but Version 4.1 doesnt have this feature. So is there any possible alternative option that i could use?

I went through this below one, but it advices the same for ExtJS 4.2.

https://www.sencha.com/forum/showthread.php?262891-Auto-fit-column-widths-instead-of-having-fix-widths

Sample test code, to explain my problem better,

> go to sencha fiddle, https://fiddle.sencha.com/#fiddle

> select framework as ExtJS 4.2.1.883 (any theme)
and paste below code, which would work and which will autofit the column title :"Name01234567890123456789" as per string length.

> now change the framework to ExtJS 4.1.1 (any theme), and run the code which will not autofit the column header and it will be cropped to half its size.

How do i get around this problem :(.

Any help/pointer is deeply appreciated. Thanks





Ext.application({
name: 'Fiddle',


launch: function() {





var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
autoScroll: true,
selType: 'rowmodel',
autoScroll: true,
selType: 'rowmodel',


plugins: [{
ptype: 'rowediting',
clicksToEdit: 2


}],


columns: {
defaults: {
menuDisabled: true,
sortable: true},
items: [
{
text: 'Name01234567890123456789',
dataIndex: 'name',
autoSizeColumn: true,
// width: 95
},
{
text: 'Age',
dataIndex: 'age',
autoSizeColumn: true,
// width: 95
},
{
text: 'Language',
dataIndex: 'lang',
autoSizeColumn: true,
// width: 95
}
]
},


viewConfig : {
listeners : {
refresh : function (dataview) {
Ext.each(dataview.panel.columns, function (column) {
if (column.autoSizeColumn === true)
column.autoSize();
});
}
}
},
height: 200,
width: 500,
renderTo: Ext.getBody()
});

}
});

jdkhamba
24 Aug 2016, 12:25 PM
You can use flex:1 for that column , that will take the available space.



{ text: 'Name01234567890123456789', dataIndex: 'name', flex: 1 }

vick_44
25 Aug 2016, 1:57 AM
I tried this already but it isnt working, please consider the below code in sencha fiddle,



Ext.application({ name: 'Fiddle',


launch: function() {





var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
autoScroll: true,
selType: 'rowmodel',
autoScroll: true,
selType: 'rowmodel',


plugins: [{
ptype: 'rowediting',
clicksToEdit: 2


}],


columns: {
defaults: {
menuDisabled: true,
sortable: true
},
items: [
{
text: 'Name01234567890123456789',
dataIndex: 'name',
flex:1
},
{
text: 'Age',
dataIndex: 'age',
flex:1
},
{
text: 'Language',
dataIndex: 'lang',
flex:1
},{
text: 'fex01234567890123456789',
dataIndex: 'fex',
flex:1


}, {
text: 'Grade01234567890123456789',
dataIndex: 'grade',
flex:1
}]
},
height: 200,
width: 500,
renderTo: Ext.getBody()
});

}
});

vick_44
18 May 2018, 4:15 AM
Bump!