PDA

View Full Version : xtemplate store adding data - colspan and rowspan



loumac
25 Oct 2013, 3:37 AM
I am trying to add a new record to the store bound to my Ext.view.View which has a template with colspan and rowspan - can anyone confirm that it is possible to add records to a store and have the template redraw itself with colspan and rowspan intact?
and point me in the right direction if the method i am using to add records is wrong

I would normally just use the grid but I need to have control over the colspan and rowspan layout


Ext.define('myNS.view.area.myTemplate', {
extend : 'Ext.view.View',
alias: 'widget.mytemplate',
cls: '',
renderTo: document.body,
initComponent: function() {
me=this;
this.store='path.myStore';

this.tpl = new Ext.XTemplate(
'<table class="mytable">',
'<tpl for=".">',
'<tpl if="values[\'array--rowedittable\'].valueOf()==true">',
'<tr class="row {[xindex % 2 === 0 ? "even" : "odd"]}"><td rowspan="2" width="60">x</td><td id="client_{#}" class="x-editable client">{array--clientname:htmlEncode}</td><td id="job_{#}" class="">{array--job:htmlEncode}</td>',
'<td rowspan="2" class="desc">{array--description}</td><td rowspan="2">{array--name}</td><td class="timer"></td>',
'<td rowspan="2" class="x-editable-day0">{array--day0:htmlEncode}</td><td rowspan="2">{array--day1:htmlEncode}</td><td rowspan="2">{array--day2:htmlEncode}</td><td rowspan="2">{array--day3:htmlEncode}</td><td rowspan="2">{array--day4:htmlEncode}</td><td rowspan="2">{array--day5:htmlEncode}</td><td rowspan="2">{array--day6:htmlEncode}</td><td rowspan="2">{array--total}</td></tr>',
'<tr class="{[xindex % 2 === 0 ? "even" : "odd"]}"><td colspan="2" class="desc"></td><td></td></tr>',
'<tpl else>',
'<tr class="row {[xindex % 2 === 0 ? "even" : "odd"]}"><td rowspan="2" width="60">x</td><td id="client_{#}" class="client">{array--clientname:htmlEncode}</td><td id="job_{#}" class="">{array--job:htmlEncode}</td>',
'<td rowspan="2" class="desc">{array--description}</td><td rowspan="2">{array--name}</td><td class="timer"></td>',
'<td rowspan="2" class="">{array--day0:htmlEncode}</td><td rowspan="2">{array--day1:htmlEncode}</td><td rowspan="2">{array--day2:htmlEncode}</td><td rowspan="2">{array--day3:htmlEncode}</td><td rowspan="2">{array--day4:htmlEncode}</td><td rowspan="2">{array--day5:htmlEncode}</td><td rowspan="2">{array--day6:htmlEncode}</td><td rowspan="2">{array--total}</td></tr>',
'<tr class="{[xindex % 2 === 0 ? "even" : "odd"]}"><td colspan="2" class="desc"></td><td></td></tr>',
'</tpl>',
'</table>'
);

I want to create a new record for the template to render
I create an instance of my model data for insertion

var rec = new myNS.model.area.Line({
"array--clientname": "",
"array--rowedittable": ""
etc

insert it into store
this.getStore().insert(this.getStore('path.myStore').getCount()+1, rec);

my template view breaks my rowspan and colspans

I can see the store is updated by inspecting the store in the console

loumac
28 Oct 2013, 1:02 AM
found the issue - xtemplate does not like x-editable editor selectors