PDA

View Full Version : Need help to show Xtemplate in a dataview from a grid selection.



shawnb457
27 Nov 2010, 11:02 AM
I have a JsonStore, Gridpanel,Dataview with XTemplates. I would like to click on the grid and loop through the XTemplates and show the same data as the grid in. I have look at the databind example but it will not work for me since my jsonstore is updated with a web socket(live updates). The databind example pass the data to the xtemplate i just need to hide/show the template.




AllGroupGrid = Ext.extend(Ext.grid.GridPanel, {
id:'allgroup',

initComponent: function(){
var editIcon = new Ext.XTemplate('<div id="tools"></div>');
var tpl = new Ext.XTemplate('test ');

Ext.apply(this, {

columns: [{
id: 'header',
hidden: true,
},
{
header: "Group Id",
width: 60,
align: 'center',
dataIndex: 'groupid',
sortable: true,
filterable: true
},
{
header: "Group Name",
width: 60,
align: 'center',
dataIndex: 'grouplabel',
sortable: true,
filterable: true
},{
header: "Asset Type",
width: 60,
align: 'center',
dataIndex: 'type',
sortable: true,
filterable: true
},
{
header: "Asset",
width: 60,
align: 'center',
dataIndex: 'label',
sortable: true
},{
header: "Status",
width: 60,
align: 'center',
dataIndex: 'enabled',
sortable: true
},{
header: "Mode",

align: 'center',
dataIndex: 'operatingmode',
width: 60,
sortable: false,

},{
header: "SOC",
dataIndex:'',
align: 'center',
dataIndex: 'averagesoc',
width: 60,
sortable: false,

}, {
header: "Power",
dataIndex: 'realpoweroutput',
align: 'center',
width: 60,
sortable: false,

}, {
header: "Min",
dataIndex: 'realpowerdemand',
align: 'center',
width: 60,
sortable: false,

},
{
header: "Max",
dataIndex: 'realpowerdemand',
align: 'center',
width: 60,
sortable: false,

},
{
header: "Alarms",
dataIndex: 'realpowerdemand',
align: 'center',
width: 60,
sortable: false,

},
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: false
}),

store: assetStore,

viewConfig: {
forceFit: true,
showPreview:false,
scrollOffset: 2
},
loadMask: true


});

AllGroupGrid.superclass.initComponent.call(this);

}

});

Ext.reg('allgroupgrid', AllGroupGrid);



AllGroupDetail = Ext.extend(Ext.DataView, {
style: 'background:#fff;',
store: assetStore,
itemSelector: 'div',
tpl:assetDetails,

});


AllGroupMasterDetail = Ext.extend(Ext.Panel, {

initComponent: function(){

Ext.applyIf(this, {
frame: true,
title: 'Select',
collapsible: true,
plugins: new Ext.ux.MaximizeTool(),
width:'auto',
height: 600,
layout: 'border',
items: [{
xtype: 'allgroupgrid',
itemId: 'allgridPanel',
loadMask : true,
region: 'north',
height: 280,
stripeRows: true,
width:'auto',
autoScroll: true,
split:true,


}, {
xtype: 'allgroupdetail',
itemId: 'allgroupmasterdetail',
region: 'center',
loadMask : true,
}]
})

GroupMasterDetail.superclass.initComponent.call(this);
},

initEvents: function(){

GroupMasterDetail.superclass.initEvents.call(this);
var AllGroupGridSm = this.getComponent('allgridPanel').getSelectionModel();
AllGroupGridSm.on('rowselect', this.onRowSelect, this);


},

onRowSelect: function(sm, rowIdx, record){



},

var assetDetails = new Ext.XTemplate('<tpl for=".">' +
'<div style="display:none">' +
'<table width="99%" >' +
'<caption><span class="group-title"> {label} </span>Details</caption>' +

'</table>' +
'</div>' +

'</tpl>', {
pctChange:function(val){
//alert(val);
if (val >= 0) {
return 'value-green';
}
else
if (val < 0) {
return 'value-red';
}
return val;
}

}
)

});