PDA

View Full Version : several problems related to panels/subpanels



kyle
18 Jan 2010, 5:49 AM
Hi there

I have a panel which loads a subpanel inside it.
The 1st subpanel always load a grid and if you click in a row, a new subpanel is created and loads in it a form with data from the server.
This form contais 6 tabs with different information

Everything works ok, but I have 3 problems

1.- the active tab is not displayed properly. It always is loaded with height set to 0. Others are fine.
2.- How can I get the info from field ID, for instance, inside tab1 of the panel
3.- How can I communicate buttons from panel with form the information loaded in tabforms

Thanks in advance


Here the code



/*************************
* GRID EMPRESAS
**************************/

var SubPanel

Example.TabPanelEmpresas = Ext.extend(Ext.TabPanel, {

initComponent: function(){
var config = {
id: 'TabPanelEmpresas'
,autoHeight: true
,closable: true
,items: [ new Example.GridEmpresas() ]
,activeItem: 0
,layoutOnTabChange: true
}

Ext.apply(this, Ext.apply(this.initialConfig, config));

Example.TabPanelEmpresas.superclass.initComponent.apply(this, arguments);

this.on({
afterlayout:{scope:this, single:true, fn:function() {
SubPanel = this;
}}
});

}
});

Example.GridEmpresas = Ext.extend(Ext.grid.GridPanel, {

initComponent: function(){
var store_empresas = new Ext.data.JsonStore({
root: 'empresas'
,totalProperty: 'totalEmpresas'
,idProperty: 'threadid'
,remoteSort: true
,fields: ['id','nombre','nif','domicilio','tipoempresa'
]
,url:'../Remote/datos_empresas.php'
});

var config = {
autoHeight: true
,store: store_empresas
,title: 'Busqueda de Empresas'
,columns: [
{id:'id', header: "ID", width: 5, sortable: true, dataIndex: 'id'}
,{header: "NOMBRE", width: 50, sortable: true, dataIndex: 'nombre'}
,{header: "NIF", width: 50, sortable: true, dataIndex: 'nif'}
,{header: "DOMICILIO", width: 100, sortable: true, dataIndex: 'domicilio'}
,{header: "TIPOEMPRESA", width: 50, sortable: true, dataIndex: 'tipoempresa'}
]
,stripeRows: true
,viewConfig: {
forceFit: true
,autoFill:true
}
,sm: new Ext.grid.RowSelectionModel({singleSelect:true})
,frame:true
,iconCls:'icon-grid'
,bbar: new Ext.PagingToolbar({
pageSize: 10
,store: store_empresas
,displayInfo: true
,displayMsg: 'Mostrando resultados {0} - {1} de {2}'
,emptyMsg: "No hay resultados"
})
,tbar: [{
text: 'Edita Empresa'
,tooltip: 'Edita una Empresa'
,iconCls: 'edit_icon'
,listeners: {
click:{scope:this,fn:function() {
if (this.selModel.getSelected().data.id != null){
var open = false;
if (!open){
id_empresa = this.selModel.getSelected().data.id;
nombre_empresa = this.selModel.getSelected().data.nombre;
var nuevo_panel = SubPanel.add({title: nombre_empresa, closable:true, items: [ new EmpresaFormulario.Form ] });
SubPanel.activate( nuevo_panel );
}
}
}}
}
}]
};

Ext.apply(this, Ext.apply(this.initialConfig, config));

Example.GridEmpresas.superclass.initComponent.apply(this, arguments);

this.on({
afterlayout:{scope:this, single:true, fn:function() {
this.store.load({ params:{ limit: 10} });
}}
});

this.on({
rowdblclick: {scope:this, single:false, fn:function() {
if (this.selModel.getSelected().data.id != null){
var open = false;
if (!open){
id_empresa = this.selModel.getSelected().data.id;
nombre_empresa = this.selModel.getSelected().data.nombre;
var nuevo_panel = SubPanel.add({title: nombre_empresa, closable:true, items: [ new EmpresaFormulario.Form ] });
SubPanel.activate( nuevo_panel );
}
}
}}
});

}

});

Ext.reg('gridempresas', Example.GridEmpresas);


/*************************
* FORM EMPRESAS
**************************/

Ext.ns('EmpresaFormulario');

EmpresaFormulario.Form = Ext.extend(Ext.form.FormPanel, {

// defaults - can be changed from outside
border:false
,frame:true
,Height: 600
,url:'../Remote/edit_data_empresa2.php'

,initComponent:function() {

// hard coded - cannot be changed from outsid

var Guarda_Empresa_Formulario = new Ext.Action({
text: 'Guardar Empresa'
,tooltip: 'Guardar Informacion'
,handler: function(){
Ext.example.msg('','Empresa Guardada');
}
,iconCls: 'guardar_icon'
});

var config = {
defaultType:'textfield'
,monitorValid:true
,items:[{
xtype:'panel'
,layout: 'form'
,tbar: [ Guarda_Empresa_Formulario
, '-', {
text: 'Eliminar Empresa'
,tooltip: 'Eliminar Empresa'
,iconCls: 'delete_icon'
,handler: function(){
var nombre_get_empresa = Nombre_Empresa.getValue();
//Elimina_Empresa(id_empresa,nombre_get_empresa);
}
}, '-', {
text: 'Cerrar'
,tooltip: 'Cerrar Ventana'
,iconCls: 'cancel_icon'
}]
,items:[{
xtype:'tabpanel'
,activeItem:1
,closable: false
,border:true
,deferredRender:false
,layoutOnTabChange: true
,defaults:{
layout:'form'
,labelWidth:100
,defaultType:'textfield'
,bodyStyle:'padding:5px'
,hideMode:'offsets'
}
,items:[{
title:'Datos Empresa'
,autoScroll:true
,items:[{
name:'id'
,fieldLabel:'ID'
,width: 50
}]
},{
title:'Datos facturacion'
,autoScroll:true
,items:[{
name:'nif'
,fieldLabel:'NIF'
},{
fieldLabel:'JAJA2'
}]
},{
title:'Telefono-Internet'
,autoScroll:true
,items:[{}]
},{
title:'Contactos'
,autoScroll:true
,items:[{}]
},{
title: 'Credito'
,autoScroll:true
,items:[{}]
},{
title: 'Hacienda'
,autoScroll:true
,items:[{}]
}]
}]
}]

}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
EmpresaFormulario.Form.superclass.initComponent.apply(this, arguments);

} // eo function initComponent

,onRender:function() {

// call parent
EmpresaFormulario.Form.superclass.onRender.apply(this, arguments);

// set wait message target
this.getForm().waitMsgTarget = this.getEl();

} // eo function onRender

,on:function() {
if (id_empresa > 0 ) {
this.load({
url:this.url
,waitMsg:'Cargando datos...'
,params:{identificador: id_empresa, tarea: 'LOAD'}
});
}
} // eo function onLoadClick

}); // eo extend

// register xtype
Ext.reg('exampleform', EmpresaFormulario.Form);