PDA

View Full Version : Create columns for a grid with initComponent



delp
11 Mar 2014, 3:59 AM
I have a grid and I'm creating the columns on the fly.
This works, but I was trying to change the creating of the columns to use initComponent. In doing so I get errors when the grid is created.

this code will give errors such as

Uncaught TypeError: Cannot read property 'length' of undefined ext-all-debug.js:121114 (http://localhost:8080/ext-4.2.1/ext-all-debug.js)

Ext.define.init



column = {
xtype: 'templatecolumn',
sortable : true,
text : "blah",
width: 35,
initComponent : function(){
Ext.applyIf(this, {
items: [],
tpl : new Ext.XTemplate(
'<span style="cursor:pointer">' ,
'<img class="leftAlign" src=' + MyApp.iconUrl + '></img>',
'</span>'
)
});
this.callParent(arguments);
}
};
return column;


This code below works fine (so why change it?). There is more to the column than the below, but its the above that is stopping me from moving forward and I want to keep this question straight forward.


column = {
xtype: 'templatecolumn',
sortable : true,
width: 35,
tpl: new Ext.XTemplate(
'<span style="cursor:pointer">' ,
'<img class="leftAlign" src=' + MyApp.iconUrl + '></img>',
'</span>'
),
};
return column;


So how do I use the initComponent method to create a column at runtime. When creating the grid I push the returned column into an array and use that inside the grid.

evant
11 Mar 2014, 4:03 AM
You shouldn't override initComponent on the instance. You can either:

a) Create a templatecolumn subclass. Difficult to say whether this will help you because I don't know the detail.
b) Immediately invoke a function:



tpl: (function() {
var foo;
// Do some fancy stuff
return foo;
})()

delp
11 Mar 2014, 4:18 AM
Thanks for the quick reply.
If I can't override that they way I have done then I think I shall go down the route of overriding the templatecolumn.I don't really know enough about the way its all created - is there any links you'd recommend to find out more on why you can't use initComponent on the instance. What is going on with the code?

mankz
11 Mar 2014, 4:30 AM
You use initComponent with **classes**, not instances. Try subclassing your target Ext JS class and provide your own implementation and configuration in initComponent, that should work fine.


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

initComponent : function() {

// DO AWESOME STUFF HERE
this.callParent(arguments);
}