PDA

View Full Version : Extending a grid and adding columns to the original set of columns



tm8747a
11 Apr 2013, 12:05 PM
I have a grid that looks something like this:



Ext.define('MyAbstractGrid', {
extend: 'Ext.grid.Panel',

// These are the default colums that will show for every extended grid
columns: {
defaults: {
flex: 1
},
items: [
{ text: 'Col A', dataIndex: 'col_a' },
{ text: 'Col B', dataIndex: 'col_b' },
{ text: 'Col C', dataIndex: 'col_c' }
]
}
});


I'd like to use this grid as an abstract grid that I build upon, since I have several grids that start with cols A, B, and C, but then they each have a couple more different columns and a different store. I thought I could do this:



Ext.define('MyGrid', {
extend: 'MyAbstractGrid',

title: 'My Grid',

store: 'MyStore1',

initComponent: function() {
this.columns.items.push({ text: 'Col D', dataIndex: 'col_d' });

this.callParent(arguments);
}
});


But that doesn't work. If I have multiple grids extended this way, they all get loaded with the same columns. As far as I can tell, it's because when initComponent() runs the second time around, the columns have been modified. I can think of ways to make this work, but none of them are very elegant. Is there a clean, elegant way of extending a grid that's simple and best practice? Or do I really need to jump through hoops to do it. Note that I never need to add a column dynamically after render, I only want to be able to add to the grid's columns by extending a class.

Ilay
11 Apr 2013, 12:21 PM
Using a reconfigure (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure)( [store], [columns] ) methods.

tm8747a
11 Apr 2013, 3:00 PM
Using a reconfigure (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure)( [store], [columns] ) methods.

But doesn't that require me to re-specify all the columns? If so, I might as well just create two completely separate grid instances repeating all the columns in each.

Ilay
12 Apr 2013, 2:37 AM
But doesn't that require me to re-specify all the columns? If so, I might as well just create two completely separate grid instances repeating all the columns in each.
Maybe you want this method?

createColumns: function(data, tpl) { var grid;

//data - configure columns object
grid = this;
Ext.each(data, function(currVal, index, data) {
var currColumns;


currColumns = {
text: currVal.Name,
dataIndex: currVal.ID
};
return columnArray.push(currColumns);
});
return columnArray;
}
it's dynamicaly create your collumns , add it array to your basicColumns array and call reconfigure method in initComponent.

tm8747a
12 Apr 2013, 5:04 AM
Maybe you want this method?

createColumns: function(data, tpl) { var grid;

//data - configure columns object
grid = this;
Ext.each(data, function(currVal, index, data) {
var currColumns;


currColumns = {
text: currVal.Name,
dataIndex: currVal.ID
};
return columnArray.push(currColumns);
});
return columnArray;
}
it's dynamicaly create your collumns , add it array to your basicColumns array and call reconfigure method in initComponent.

I'm confused on this one. Where would this function be used? From the grid = this; call, I'd think it's in Ext.grid.Panel, but as far as I can tell all it does is return me an array of objects. It also doesn't seem to be overriding any existing ExtJs method. I've found a way to accomplish what I wanted, which I'll share in a separate post, but would still be interested in knowing if the solution you propose is viable.

tm8747a
12 Apr 2013, 5:11 AM
Here's how I managed to do what I wanted.



Ext.define('MyAbstractGrid', {
extend: 'Ext.grid.Panel',

initComponent: function() {
// These are the default colums that will show for every extended grid
var defaultColumns = [
{ text: 'Col A', dataIndex: 'col_a' },
{ text: 'Col B', dataIndex: 'col_b' },
{ text: 'Col C', dataIndex: 'col_c' }
];
this.columns = defaultColumns.concat(this.columns);

this.callParent(arguments);
}
});

Ext.define('MyGrid', {
extend: 'MyAbstractGrid',

title: 'My Grid',

store: 'MyStore1',

columns: [
{ text: 'Col D', dataIndex: 'col_d' }
]
});