globalContainerUi = Ext.extend(Ext.Viewport, {
    layout: 'border',
    id: 'globalContainer',
    initComponent: function () {
        this.items = [
        {
            xtype: 'box',
            region: 'north',
            height: 53,
            html: '<img src="/Images/banercabecerasistema.png"/><div id="informacion_usuario" style="float:right; width:300px; height:50px; padding:5px; font-family:Verdana; font-size:12px; "><table style="border:1px solid black; padding:3px; background-color:white"><tr><td valign="middle"><img style="20px;" src="/images/icons/user3.ico"/></td><td style="width:200px"><span id="session_nombre_usuario">' + firstName + ' ' + lastName + '</span></td><td valign="middle" align="center" ><input type="button" style="width:80px; border:1px solid black; cursor:pointer; background-color:#EFF5FB" id="session_cerrarsession" value="Logout" onClick="logout();" /></td></tr></table> </div>',
            style: 'background:url(/Images/bk2.png)',
            id: 'header'
        },
        {
            xtype: 'tabpanel',
            boxMinWidth: 300,
            boxMinHeight: 300,
            height: 300,
            width: 300,
            region: 'center',
            activeTab: 0,
            closable: true,
            enableTabScroll: true,
            ref: 'content',
            id: 'content',
            items: [
            {
                xtype: 'panel',
                title: 'Inicio',
                html: '<h1>Bienvenido a el Intranet de Fleming College</h1>',
                padding: 10,
                ref: 'home'
            }
            ]
        },
        {
            xtype: 'panel',
            region: 'west',
            width: 210,
            border: false,
            panel: true,
            layout: 'vbox',
            layoutConfig: {
                align: 'stretch',
                pack: 'start'
            },
            items: [
            {
                xtype: 'panel',
                height: 190,
                frame: true,
                bodyStyle: 'padding-left:3px; text-align:center;',
                items: [{
                    id: 'session_imagen_usuario',
                    html: "<img width=200 height=200 src='/Images/logofleming.jpg'/>"
                }]
            },
            {
                flex: 1,
                defaultType: 'treepanel', // esto jamaz se ubiera podido hacer con ext designer!!!
                title: 'Menu',
                width: 100,
                layout: 'accordion',
                activeItem: 1,
                boxMinWidth: 210,
                region: 'west',
                split: true,
                id: 'menu_general_globalContainer',
                layoutConfig: {
                    animate: true
                },
                border: false,
                defaults: {
                    border: false
                    ,
                    rootVisible: false
                    ,
                    bodyStyle: 'background:white;'
                    //de una ves asociamos el evento q capturara a click en cada nodo
                    ,
                    listeners: {
                        scope: this
                        ,
                        click: this.onNodeClick
                    }
                },
                items: leerdatos()
            }
            ]
        },
        {
            xtype: 'panel',

            width: 100,
            height: 28,
            region: 'south',
            split: false,
            id: 'footer',
            border: false,
            items: [ 
             {
                 bbar: ['->', 
              /*   {
                     xtype: 'label',
                     id: 'textTitle_newsEnglish',
                     labelAlign: "top",
                     text: firstName + ' ' + lastName
                 }, {
                     xtype: 'button',
                     text: 'Logout',
                     labelAlign: "top",
                     width: 80,
                     id: 'cerrarsesionboton'
                 },*/
                 '<div style="height:30px;  vertical-align:bottom;"><b>DESARROLLADO POR <a href=www.nlcode.com>NLCODE</a></b></div>']
            }]
         }
        ];
        globalContainerUi.superclass.initComponent.call(this);
    }
});

function leerdatos() {

    return menuPrincipalIzquierda;

}