Ext.onReady(function () {
	var backendViewport = new Ext.Panel({
        layout: 'fit',
        width: 625,
        height: 448,
        border: false,
        items: [{
            xtype: 'tabpanel', // En vez de instanciar directamente el objeto, utilizamos la notación del xtype
            height: 450,
            bodyStyle: 'padding:10px',
            activeTab: 0,
            enableTabScroll:true,
            plain: true,
            items: [{
                xtype: 'panel',
                title: 'Tab #1',
                layout: 'fit',
                items: [{
                    /*
                    * Panel con layout 'column'
                    */
                    xtype: 'panel',
                    layout:'column',
                    items: [{
                        title: 'Col 1',
                        columnWidth: .333
                    },{
                        title: 'Col 2',
                        columnWidth: .333
                    },{
                        title: 'Col 3',
                        columnWidth: .333
                    }]
                }]
            },{
                xtype: 'panel',
                title: 'Tab #2',
                layout: 'form',
                width: 300,
                minWidth: 300,
                autoScroll: true,
                split: true,
                items: [{
                        xtype: 'hidden',
                        id: 'gal_id_hidden',
                        name: 'gal_id'
                    },{
                        xtype: 'textfield',
                        name: 'gal_cat_id',
                        anchor: '90%',
                        fieldLabel: 'Categoría'
                    },{
                        xtype: 'textfield',
                        name: 'gal_weight',
                        anchor: '90%',
                        fieldLabel: 'Peso Galería'
                    },{
                        xtype: 'datefield',
                        name: 'gal_date',
                        anchor: '90%',
                        fieldLabel: 'Fecha Alta'
                    },{
                        xtype: 'textfield',
                        name: 'gal_relative_path',
                        anchor: '90%',
                        fieldLabel: 'Directorio'
                    },{
                        xtype: 'textfield',
                        name: 'gal_pho_id',
                        anchor: '90%',
                        fieldLabel: 'Imágen representativa'
                    }
                ]
            },
            {
                xtype: 'panel',
                title: 'Tab #3',
                layout: 'accordion',
                layoutConfig: {
                    titleCollapse: false,
                    animate: false,
                    activeOnTop: false
                },
                items: [{
                    title: 'Subpanel 1',
                    html: 'Contenido subpanel 1'
                },{
                    title: 'Subpanel 2',
                    html: 'Contenido subpanel 2'
                },{
                    title: 'Subpanel 3',
                    html: 'Contenido subpanel 3'
                }]
            }]
        }
        ]       
    });
	
	var windowExample = new Ext.Window({
	    closable: true,
	    resizable: true,
	    modal: false,
	    border: true,
	    plain: true,
	    closeAction: 'hide',
	    title: 'Ventana con paneles',
	    width: 640,
	    height: 480,
	    renderTo: 'divRender',
	    /*
	     * Aprovechamos para ver otro tipo de asignación de items,
	     * en vez de definirlos en el bloque 'items' lo asignamos
	     * desde una variable
	     */
	    items: [backendViewport]
	});
	
	windowExample.show();
});