116 lines
3.2 KiB
JavaScript
116 lines
3.2 KiB
JavaScript
Ext.onReady(function(){
|
|
|
|
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
|
|
|
|
// create some portlet tools using built in Ext tool ids
|
|
var tools = [{
|
|
id:'gear',
|
|
handler: function(){
|
|
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
|
|
}
|
|
},{
|
|
id:'close',
|
|
handler: function(e, target, panel){
|
|
panel.ownerCt.remove(panel, true);
|
|
}
|
|
}];
|
|
|
|
var tbDashboard = new Ext.Toolbar({
|
|
height: 30,
|
|
items: [
|
|
{
|
|
xtype: 'tbbutton',
|
|
text : 'Three Columns',
|
|
handler : function(a) {
|
|
var vp = Ext.getCmp('viewportDashboard');
|
|
var pd = Ext.getCmp('portalDashboard');
|
|
while (pd.items.items[0].items.items[1]) {
|
|
pd.items.items[2].add(pd.items.items[0].items.items[1]);
|
|
}
|
|
pd.items.items[0].columnWidth = 0.33;
|
|
pd.items.items[1].columnWidth = 0.33;
|
|
pd.items.items[2].columnWidth = 0.33;
|
|
pd.doLayout();
|
|
}
|
|
},
|
|
{
|
|
xtype: 'tbbutton',
|
|
text : 'Two Columns',
|
|
handler : function(a) {
|
|
var vp = Ext.getCmp('viewportDashboard');
|
|
var pd = Ext.getCmp('portalDashboard');
|
|
pd.items.items[0].columnWidth = 0.49;
|
|
pd.items.items[1].columnWidth = 0.49;
|
|
while ( pd.items.items[2].items.items[0] ) {
|
|
pd.items.items[0].add( pd.items.items[2].items.items[0] );
|
|
}
|
|
pd.items.items[2].columnWidth = 0.01;
|
|
pd.doLayout();
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
var viewport = new Ext.Viewport({
|
|
layout:'fit',
|
|
name : 'viewportDashboard',
|
|
id : 'viewportDashboard',
|
|
items:[{
|
|
xtype:'portal',
|
|
region:'center',
|
|
margins:'35 5 5 0',
|
|
tbar: tbDashboard,
|
|
name : 'portalDashboard',
|
|
id : 'portalDashboard',
|
|
items:[{
|
|
columnWidth:.33,
|
|
style:'padding:10px 0 10px 10px',
|
|
items:[]
|
|
},{
|
|
columnWidth:.33,
|
|
style:'padding:10px 0 10px 10px',
|
|
items:[]
|
|
},{
|
|
columnWidth:.33,
|
|
style:'padding:10px',
|
|
items:[]
|
|
}]
|
|
|
|
/*
|
|
* Uncomment this block to test handling of the drop event. You could use this
|
|
* to save portlet position state for example. The event arg e is the custom
|
|
* event defined in Ext.ux.Portal.DropZone.
|
|
*/
|
|
// ,listeners: {
|
|
// 'drop': function(e){
|
|
// Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' +
|
|
// e.columnIndex + '<br />Position: ' + e.position);
|
|
// }
|
|
// }
|
|
}]
|
|
});
|
|
|
|
var pd = Ext.getCmp('portalDashboard');
|
|
for (var i = 0; i < dashletsInstances.length; i++) {
|
|
var np = new Ext.ux.Portlet({
|
|
title: dashletsInstances[i].DAS_TITLE,
|
|
index: i,
|
|
dasInsUid : dashletsInstances[i].DAS_INS_UID,
|
|
html: 'Gauge Placeholder',
|
|
listeners: {
|
|
'resize': function(p, w, h) {
|
|
var template = new Ext.XTemplate(dashletsInstances[p.index].DAS_XTEMPLATE).apply({
|
|
id: p.dasInsUid,
|
|
page: 'dashboard/renderDashletInstance',
|
|
width: w - 12,
|
|
random: Math.floor(Math.random() * 1000000)
|
|
})
|
|
p.update(template);
|
|
}
|
|
}
|
|
});
|
|
pd.items.items[i % 3].add(np);
|
|
}
|
|
pd.doLayout();
|
|
});
|