View Full Version : Accessing the container of a XTemplate object

21 Jan 2014, 2:46 AM

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',
print: function(vData) {
var g = this.up("[itemId=my-grid]");
return vData + g.someProperty;
dataIndex: 'col1',
text: 'String'



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?

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.

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


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
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.overwrite(panel.body, data.kids);

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