Before Beta 3 we had a DataView that utilized an XTemplate to create one Header at the top using the x-toolbar class. I am struggling to mimic the following behavior. Any suggestions or pointers would be appreciated.
Code:
Ext.namespace('csi'); csi.wo__template = new Ext.XTemplate('<div><table class="invCLhead">',
'<tr class="x-toolbar x-toolbar-dark" style="font-weight: bold; color:white; vertical-align: middle;">',
'<td class="invCLdsHead">Description</td>',
'<td class="invCLstHead">Status</td>',
'</tr></table></div>',
'<tpl for=".">',
'<div id = "div.clwrap">',
'<table class="invCL"><tr>',
'<td class="invCLds">{question}</td>',
'<td class="invCLst">{response}</td>',
'</tr></table></div>',
'</tpl>'
);
Ext.define('csi.view.WorkorderDataview',{
extend: 'Ext.DataView',
xtype: 'workorderDataview',
config: {
title: "wo_dataview",
useComponents: true,
tpl: csi.wo_template,
selectorId: 'workorderDataview',
store: 'Workorder',
scrollable: false,
emptyText:'<div class="emptytext">None Available<br></div><hr>'
}
});
This is the modified code in Beta3. I can get the DataView to render. However, Since the itemTpl is rendered for each line, I get the toolbar header everytime. Is it possible to get it only to render the first time?
Code:
Ext.namespace('csi'); csi.wo_template = new Ext.XTemplate('<div><table class="invCLhead">',
'<tr class="x-toolbar x-toolbar-dark" style="font-weight: bold; color:white; vertical-align: middle;">',
'<td class="invCLdsHead">Description</td>',
'<td class="invCLstHead">Status</td>',
'</tr></table></div>',
'<tpl for=".">',
'<div id = "div.clwrap">',
'<table class="invCL"><tr>',
'<td class="invCLds">{question}</td>',
'<td class="invCLst">{response}</td>',
'</tr></table></div>',
'</tpl>'
);
Ext.define('csi.view.WorkorderDataview',{
extend: 'Ext.DataView',
xtype: 'workorderDataview',
config: {
title: "wo_dataview",
itemTpl: csi.wo_template,
selectorId: 'workorderDataview',
store: 'Workorder',
scrollable: false,
emptyText:'<div class="emptytext">None Available<br></div><hr>'
}
});