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 ] }); });