Ext.define('Ext.app.MainViewport', {
extend: 'Ext.container.Viewport',
uses: [
'Ext.app.domino.MaintainSession',
'Ext.app.io.IconMgr',
'Ext.app.domino.Outline',
'Ext.app.panel.Portlet',
'Ext.app.container.PortalColumn',
'Ext.app.panel.PortalPanel',
'Ext.app.dd.PortalDropZone',
'Ext.app.locale.LocaleManager'
],
initComponent: function () {
Ext.app.domino.MaintainSession.init();
var lm = Ext.app.locale.LocaleManager;
var lParam = Ext.Object.fromQueryString(window.location.search).l
lm.setConfig({
ajaxConfig : {
method : 'GET',
async : false
},
path : lParam ? 'locale/locale_' + lParam + '.js' : 'locale/locale_es.js',
type : 'ajax'
});
lm.loadLocale();
var iconMgr14x14 = new Ext.app.io.IconMgr('/img/icons/14x14/');
var iconMgr16x16 = new Ext.app.io.IconMgr('/img/icons/16x16/');
var iconMgr24x24 = new Ext.app.io.IconMgr('/img/icons/24x24/');
var imgMgr = new Ext.app.io.IconMgr();
var northCenterRegion = {
xtype: 'container',
region: 'center',
layout: {
type: 'hbox',
padding: '2',
pack: 'start',
align: 'middle'
},
items: [{
xtype: 'buttongroup',
columns: 2,
items: [{
xtype: 'button',
text: lm.get('MainViewport.northRegion.actionButton.text'),
scale: 'large',
width: 170,
iconCls: imgMgr.getIcon('/img/index/process.png'),
iconAlign: 'left',
arrowAlign: 'right',
menu: [{
text: lm.get('MainViewport.northRegion.actionButton.menu.0.text'),
iconCls: iconMgr16x16.getIcon('extjs'),
handler: Ext.bind(this.addApp, this, [
iconMgr16x16.getIcon('extjs'),
lm.get('MainViewport.northRegion.actionButton.menu.0.text'),
'data/extjs.xml',
'img/icons/16x16/',
'app-center-container'
])
}, {
text: lm.get('MainViewport.northRegion.actionButton.menu.1.text'),
iconCls: iconMgr16x16.getIcon('sitemap'),
handler: Ext.bind(this.addApp, this, [
iconMgr16x16.getIcon('sitemap'),
lm.get('MainViewport.northRegion.actionButton.menu.1.text'),
'data/sites.xml',
'img/icons/16x16/',
'app-center-container'
])
}, {
text: lm.get('MainViewport.northRegion.actionButton.menu.2.text'),
iconCls: iconMgr16x16.getIcon('cup'),
handler: Ext.bind(this.addApp, this, [
iconMgr16x16.getIcon('cup'),
lm.get('MainViewport.northRegion.actionButton.menu.2.text'),
'data/projects.xml',
'img/icons/16x16/',
'app-center-container'
])
}]
}]
}]
};
var northEastRegion = {
xtype: 'container',
region: 'east',
width: 400,
layout: {
type: 'hbox',
padding: '1',
pack: 'end',
align: 'top'
},
items: [{
xtype: 'buttongroup',
frame: false,
columns: 3,
items: [{
xtype: 'button',
text: lm.get('MainViewport.northRegion.loginButton.text'),
align: 'middle',
autoWidth: true,
iconCls: iconMgr16x16.getIcon('user'),
menu: [{
text: lm.get('MainViewport.northRegion.loginButton.menu.0.text'),
iconCls: iconMgr16x16.getIcon('login'),
handler: Ext.bind(this.msg, this)
}, {
text: lm.get('MainViewport.northRegion.loginButton.menu.1.text'),
iconCls: iconMgr16x16.getIcon('logout'),
handler: Ext.bind(this.msg, this)
}]
}, {
xtype: 'button',
text: lm.get('MainViewport.northRegion.themeButton.text'),
iconCls: iconMgr16x16.getIcon('draw'),
menu: [{
text: lm.get('MainViewport.northRegion.themeButton.menu.0.text'),
iconCls: iconMgr16x16.getIcon('blue-theme'),
handler: Ext.bind(this.changeStylesheet, this, ['ext-4.0.2a/resources/css/ext-all.css'])
},{
text: lm.get('MainViewport.northRegion.themeButton.menu.1.text'),
iconCls: iconMgr16x16.getIcon('gray-theme'),
handler: Ext.bind(this.changeStylesheet, this, ['ext-4.0.2a/resources/css/ext-all-gray.css'])
}]
}, {
xtype: 'button',
text: lm.get('MainViewport.northRegion.languageButton.text'),
iconCls: iconMgr16x16.getIcon('world'),
menu: [{
text: lm.get('MainViewport.northRegion.languageButton.menu.0.text'),
iconCls: iconMgr16x16.getIcon('eu'),
handler: Ext.bind(this.changeLanguage, this, ['eu']),
disabled: Ext.Object.fromQueryString(window.location.search).l == 'eu' ? true : false
},{
text: lm.get('MainViewport.northRegion.languageButton.menu.1.text'),
iconCls: iconMgr16x16.getIcon('es'),
handler: Ext.bind(this.changeLanguage, this, ['es']),
disabled: Ext.Object.fromQueryString(window.location.search).l == 'es' ? true : (Ext.Object.fromQueryString(window.location.search).l === undefined ? true : false)
}, {
text: lm.get('MainViewport.northRegion.languageButton.menu.2.text'),
iconCls: iconMgr16x16.getIcon('gb'),
handler: Ext.bind(this.changeLanguage, this, ['gb']),
disabled: Ext.Object.fromQueryString(window.location.search).l == 'gb' ? true : false
}, {
text: lm.get('MainViewport.northRegion.languageButton.menu.3.text'),
iconCls: iconMgr16x16.getIcon('fr'),
handler: Ext.bind(this.changeLanguage, this, ['fr']),
disabled: Ext.Object.fromQueryString(window.location.search).l == 'fr' ? true : false
}]
}]
}]
};
var northRegion = {
id: 'northRegion',
xtype: 'container',
region: 'north',
cls: imgMgr.getIcon('/img/index/header.png'),
layout: 'border',
height: 68,
items: [northEastRegion, northCenterRegion]
};
var centerRegion = {
xtype: 'container',
region: 'center',
layout: 'border',
defaults: {
split: true
},
border: false,
items: [{
id: 'app-container',
//title: 'Aplicaciones',
region: 'west',
hidden: true,
animCollapse: true,
collapsible: true,
width: 200,
stateful: false,
minWidth: 150,
maxWidth: 400,
layout: 'accordion',
layoutConfig: {
animate: true
}
}, {
id: 'app-center-container',
xtype: 'tabpanel',
removePanelHeader: true,
region: 'center',
resizeTabs: true,
enableTabScroll: true,
plain: true,
items: [{
xtype: 'portalpanel',
title: lm.get('MainViewport.centerRegion.homeTab.title'),
iconCls: iconMgr14x14.getIcon('home'),
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
height: 200,
title: lm.get('MainViewport.centerRegion.homeTab.items.0.title'),
html: ''
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
height: 140,
title: lm.get('MainViewport.centerRegion.homeTab.items.1.title'),
html: ''
}]
},{
id: 'col-3',
items: [{
id: 'portlet-2',
height: 100,
title: lm.get('MainViewport.centerRegion.homeTab.items.2.title'),
html: ''
},{
id: 'portlet-4',
title: lm.get('MainViewport.centerRegion.homeTab.items.3.title'),
height: 110,
html: ''
}]
}]
}],
listeners: {
tabchange: Ext.bind(this.expandAppTree, this)
}
}]
};
Ext.apply(this, {
id: 'appMainViewport',
layout: {
type: 'border',
padding: '0 5 5 5'
},
items: [northRegion, centerRegion]
});
this.callParent(arguments);
},
msg: function () {
var lm = Ext.app.locale.LocaleManager;
Ext.app.io.NotificationBox.msg({
title: lm.get('MainViewport.globalMsgTest.title'),
message: lm.get('MainViewport.globalMsgTest.msg'),
hPad: '30%',
vPad: '0.5%',
position: 'tl',
icon: 'img/notificationbox/warning2.png'
})
},
changeLanguage: function(l) {
window.location.href = 'index.html?l='+l;
},
changeStylesheet: function(css) {
Ext.util.CSS.swapStyleSheet('mainStyle', css);
Ext.util.CSS.swapStyleSheet('bugsStyle', 'css/bugs.css');
Ext.util.CSS.swapStyleSheet('portalStyle', 'css/portal.css');
//Change header
var imgMgr = new Ext.app.io.IconMgr();
Ext.get('northRegion').removeCls();
css.indexOf('gray') > -1 ? Ext.get('northRegion').addCls(imgMgr.getIcon('/img/index/header.png')) : Ext.get('northRegion').addCls(imgMgr.getIcon('/img/index/header-blue.png'));
//Notify
this.msg();
},
expandAppTree: function (tp, nc, oc, o) {
var title = nc ? nc.app : tp;
var treePanel = Ext.getCmp('app-container');
for (var x = 0; x < treePanel.items.length; x++) {
if (treePanel.items.items[x].title == title) {
return treePanel.items.items[x].expand(true)
}
}
return null
},
addApp: function (iconCls, title, url, iconsPath, targetCmp) {
//1) Revisamos si existe o no es el 'Trepanel' del menú izquierdo.
var mainWestResgion = this.layout.regions.center.layout.regions.west;
mainWestResgion.hidden == true ? mainWestResgion.setVisible(true) : Ext.emptyFn();
mainWestResgion.collapsed === true ? mainWestResgion.show() : Ext.emptyFn();
var treePanel = Ext.getCmp('app-container');
//2) Si existe lo expandimos y sino lo añadimos.
if (this.expandAppTree(title) == null) {
return treePanel.add({
xtype: 'outline',
iconCls: iconCls,
title: title, //App
targetCmp: targetCmp,
url: url,
iconsPath: iconsPath,
listeners: {
destroy: function (c, o) {
//2.1) Ocultamos la region 'West' del viewport si no quedan más aplicaciones.
var westRegion = Ext.getCmp('appMainViewport').layout.regions.center.layout.regions.west;
if (westRegion.items.length == 0) {
westRegion.hide();
}
//2.2) Eliminamos los pestañas abiertas correspondientes a la aplicación que estamos cerrando.
var centerRegion = Ext.getCmp('appMainViewport').layout.regions.center.layout.regions.center;
for (var x = 0; x < centerRegion.items.length; x++) {
if (centerRegion.items.items[x].app != undefined) {
if (centerRegion.items.items[x].app == c.title) {
centerRegion.items.items[x].destroy();
x = x - 1;
}
}
}
}
}
}).expand(true)
}
}
});
