PDA

View Full Version : Accessing the container of a XTemplate object



mehran
21 Jan 2014, 2:46 AM
Hi,

I'm using Sencha architect to design a grid with a template column in it. I would like to introduce a member function to the template in which I need to access the grid object and extract a property from it. This property will be used in the content printed in the column. Here's a sample code to demonstrate what I mean:


Ext.define('MyApp.view.MyGridPanel', {
extend: 'Ext.grid.Panel',


height: 250,
itemId: 'my-grid',
width: 400,
title: 'My Grid Panel',
someProperty: "$",


initComponent: function() {
var me = this;


Ext.applyIf(me, {
columns: [
{
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate',
'{[this.print(values.col1)]}',
{
print: function(vData) {
var g = this.up("[itemId=my-grid]");
return vData + g.someProperty;
}
}
),
dataIndex: 'col1',
text: 'String'
}
]
});


me.callParent(arguments);
}


});

The line which says `var g = this.up("[itemId=my-grid]");` it supposed to find the grid object so the next line can extract the `g.someProperty` out of it. But `this` in this context represents the XTemplate object which has no `up` method. Nor does it have any useful method/property to access its container.

Does anyone have any idea how to do this?

Considerations:
1. There might be several instances of this grid, so a global search to find it is useless.
2. Using a global variable to store the `someProperty` is also not acceptable since each grid object has its own version of this property.

evant
21 Jan 2014, 2:49 AM
You're already closing over the 'me' variable, so use that.



me.up('#my-grid')

mehran
21 Jan 2014, 3:00 AM
Thanks, you're right. It's just that, `me` is the grid!

bhagirathi behera
14 Dec 2014, 1:34 AM
Ext.onReady(function(){
var data = {
name: 'Don Griffin',
title: 'Senior Technomage',
company: 'Sencha Inc.',
drinks: ['Coffee', 'Water', 'More Coffee'],
kids: [
{ name: 'Aubrey', age: 17 },
{ name: 'Joshua', age: 13 },
{ name: 'Cale', age: 10 },
{ name: 'Nikol', age: 5 },
{ name: 'Solomon', age: 0 }
]
}


var tpl = new Ext.XTemplate(
'<p>Kids: ',
'<tpl for=".">',
'<p>{#}. {name}</p>',
'</tpl></p>'
)
tpl.overwrite(panel.body, data.kids);


var panel=Ext.create('Ext.panel.Panel', {
title:'Hello',
width: 700,
height:700,
renderTo: Ext.getBody()
})

});