PDA

View Full Version : How to set a default value of flex for all columns of a grid panel



Fire-Dragon-DoL
16 Apr 2012, 3:49 PM
As the title states, I would like to set a default value for all columns as this comment suggest (in the documentation):



columns: {
items: [
{
text: "Column A"
dataIndex: "field_A"
},{
text: "Column B",
dataIndex: "field_B"
},
...
],
defaults: {
flex: 1
}
}

vietits
16 Apr 2012, 4:12 PM
I think the way you do is correct.

Fire-Dragon-DoL
16 Apr 2012, 4:43 PM
I'm asking it because it's not working in that way, I have to write "flex: 1" on all columns :(

vietits
16 Apr 2012, 5:03 PM
The following code works well for me on Chrome, Ext 4.0.7. Column C & D will have flex set to 2 (default)


Ext.onReady(function(){
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width : 800,
height : 150,
columns: {
items: [{
text: "Column A",
width: 140
},{
text: "Column B",
flex: 1
},{
text: "Column C",
},{
text: "Column D",
},{
text: "Column E",
flex: 3
}],
defaults: {
flex: 2
}
}
});
console.log(grid)
});

Fire-Dragon-DoL
16 Apr 2012, 5:57 PM
I'm currently using this code:

Ext.apply(me, {
items: [
{
xtype: 'gridpanel',
region: 'center',
forceFit: true,
frame: false,
padding: 1,
columnLines: true,
//features: [filterFeature],
columns: {
items: gridColumns,
defaults: {
flex: 1,
}
},

tbar:
{
xtype: 'toolbar',
region: 'north',
items: [{
xtype: 'button',
text: 'Aggiungi'
},{
xtype: 'button',
text: 'Rimuovi'
}],
},
}],
});

Where "me" is a Ext.window.Window
I tried but it's not working (is not the same behaviour of writing flex: 1 on each column). I also tried with header: 'randomtext' to see if all headers are set to the same name but it's not working

vietits
16 Apr 2012, 6:26 PM
I have tried to simulate your case and it still works.


Ext.onReady(function(){
var gridColumns = [{
text: "Column A",
width: 140
},{
text: "Column B",
flex: 1
},{
text: "Column C",
},{
text: "Column D",
},{
text: "Column E",
flex: 3
}];
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
initComponent: function(){
var me = this;
Ext.apply(me, {
items: [{
xtype: 'gridpanel',
region: 'center',
forceFit: true,
frame: false,
padding: 1,
columnLines: true,
//features: [filterFeature],
columns: {
items: gridColumns,
defaults: {
flex: 2,
header: 'abc'
}
},
tbar: {
xtype: 'toolbar',
region: 'north',
items: [{
xtype: 'button',
text: 'Aggiungi'
},{
xtype: 'button',
text: 'Rimuovi'
}]
}
}]
});
me.callParent(arguments);
}
})
var win = Ext.create('MyWindow', {
width: 800,
height: 400,
layout: 'fit'
});
win.show();
});

Fire-Dragon-DoL
17 Apr 2012, 2:16 PM
I know it's mad but I tested your code and is correctly working, while mine not... i can't understand how this can happen while codes look the same.

Maybe there is something wrong connected with using the MVC approach, I don't know

EDIT: Ok seems I found the problem: if I set locked to false in any column, defaults are not applied.

Why this mad thing?

vietits
17 Apr 2012, 5:19 PM
Lockable grid is in fact two grids created internally. The constructing phrase of these two grids will use only items config and ignore all other configs in columns: {defaults: {}, items: []} from the original grid config. The other way to say is that with lockable grid, the two following configs are the same:


columns: {
defaults: {},
... //other configs
items: [{...}]
}



columns: [{...}]

That's why you could not apply defaults setting for lockable grid.

Fire-Dragon-DoL
17 Apr 2012, 5:21 PM
Mh ok thanks a lot, I avoid to use lockable grid so.