Ext.onReady(function() {
Ext.QuickTips.init();
var indicatorViewPanel = new Ext.ux.tree.TreeGrid({
title : 'Dashboard - Indicators View',
enableDD : true,
id : 'dashboard-view-indicators',
autoScroll : true,
closable : false,
tbar: ['->',
{
iconCls: 'icon-expand-all',
tooltip: 'Expand All',
handler: function () {
indicatorViewPanel.root.expand(true);
},
scope: this
}, {
iconCls: 'icon-collapse-all',
tooltip: 'Collapse all',
handler: function () {
indicatorViewPanel.root.collapse(true);
},
scope: this
}, {
iconCls: 'icon-expand-selected',
tooltip: 'Expand selected',
handler: function () {
if (indicatorViewPanel.selModel.selNode != null) {
indicatorViewPanel.selModel.selNode.expand(true);
}
},
scope: this
}, {
iconCls: 'icon-collapse-selected',
tooltip: 'Collapse selected',
handler: function () {
if (indicatorViewPanel.selModel.selNode != null) {
indicatorViewPanel.selModel.selNode.collapse(true);
}
},
scope: this
},{
tooltip: 'Reload',
iconCls: 'icon-reload',
handler: function () {
indicatorViewPanel.root.reload();
}
}],
columns : [
{
header : 'Name',
dataIndex : 'dashname',
width : 430
},
{
header : 'Status',
width : 50,
dataIndex : 'status',
align: 'center',
tpl : new Ext.XTemplate('{status:this.showIcon}', {
showIcon : function(v) {
if (v != ''){
return '
';
}
else {
return '';
}
}
})
}, {
header : 'Trend',
dataIndex : 'trend',
width : 50,
align: 'center',
tpl : new Ext.XTemplate('{trend:this.showTrendIcon}', {
showTrendIcon : function(trend) {
switch (trend) {
case '1':
return '
';
break;
case '-1':
return '
';
break;
case '0':
return '
';
break;
default:
return '';
break;
}
}
})
}, {
header : 'Unit',
dataIndex : 'unit',
width : 100
},{
header : 'My Value',
dataIndex : 'myvalue',
width : 100
}, {
header : 'Is Value',
dataIndex : 'is',
width : 100
}, {
header : 'Previous Period',
dataIndex : 'prevperiod',
width : 100
}, {
header : 'Score',
dataIndex : 'scor',
width : 100
}, {
header : 'Scorebar',
width : 100,
dataIndex : 'scorbar'
} ],
dataUrl : 'data.json'
});
var modelsPanel = new Ext.TabPanel({
id : 'models-panel',
region : 'center',
anchor : '100%, 75%',
enableTabScroll : true,
margins : '5 5 5 5',
cmargins : '5 5 5 5',
items : [ indicatorViewPanel ],
activeTab : 0,
listeners : {
render : function(component) {
component.loadMask = new Ext.LoadMask(component.el, {
msg : "Loading ...."
});
// NOT NEEDED; since nothing there initially - FIXME
// setTimeout(function() { component.loadMask.show(); }, 100);
}
}
});
var viewport = new Ext.Viewport({
layout : 'border',
items : [ {
region : 'north',
border : false,
tbar : menu
}, modelsPanel ]
});
});