PDA

View Full Version : templatecolumn



nitsko
29 Dec 2015, 9:35 AM
Hello,

I'm trying to create a grid with 2 template columns. The grid is empty at first, then I load data manually from a JSON response. I expect the template columns update automatically once the data is loaded, but this doesn't happen. I see the data coming back, so I know this isn't the problem. I also see the template rendering correctly when the grid is rendered at the first time (just the commas, since there is no data at this point), so it's not the template problem either. Here is the code snippet:


Ext.define('CustomModel', {
extend: 'Ext.data.Model',

fields: [{
name: 'pickup'
}, {
name: 'drop'
}]
});

Ext.define('CustomForm', {
extend: 'Ext.form.Panel',

layout: 'anchor',
border: false,
autoScroll: true,
defaults: {
anchor: '100%',
maxWidth: 1000
},

initComponent: function() {
var me = this;
me.grid = Ext.widget('grid', {
height: 200,
store: new Ext.create('Ext.data.Store', {
model: 'CustomModel'
}),
columns: [{
xtype: 'templatecolumn',
text: 'Pickup',
tpl: Ext.create('Event', {})
}, {
xtype: 'templatecolumn',
text: 'Drop',
tpl: Ext.create('Event', {})
}]
});
me.items = [ me.grid ];
me.mon(me, 'afterrender', function() {
me.load({
success : function(form, action) {
var result = action.result;
if (result.success) {
me.grid.getStore().loadData(result.data.legs);
}
}
});
});

me.callParent(arguments);
}
});


The template:


<textarea id="event" class="x-hidden">
<tpl for=".">
<div class="custom-class">{city}, {state} {country} {zip}</div>
<div class="custom-class">{contactName}, {contactPhone}, {contactEmail}</div>
</tpl>
</textarea>

Data coming back from the server:


{
"data":{
"legs":[ {
"pickup":{},
"drop":{}
}, {
"pickup":{
"city":"Haltom City",
"state":"TX",
"zip":"76117",
"country":"USA",
"contactName":"Babette Freemont",
"contactPhone":"555-555-5555",
"contactEmail":"[email protected]"
"drop":{}
}, {
"pickup":{},
"drop":{
"city":"Apex",
"state":"NC",
"zip":"27539",
"country":"USA",
"contactName":"James Hill",
"contactPhone":"123-555-9999",
"contactEmail":"[email protected]"
}
} ]
},
"success": true
}

nitsko
29 Dec 2015, 10:01 AM
Have figured this out. Wrong template after all.

tristan.lee
29 Dec 2015, 10:42 AM
I see you figured it out, but I did create a fiddle based on your code above to make this easier to debug. This renders, but the issue is that the templates are the same for the different columns. I ended up creating 2 distinct templates for the columns just to show the example, but you could make this one template and a bit more dynamic so that it knows to pull data from the pickup or drop field based on the column.

134k

nitsko
29 Dec 2015, 10:45 AM
You are absolutely right, this was the issue. Thanks for providing the fiddle! Your answer is definitely better, but don't know how to change current choice :(