1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    357
    Vote Rating
    4
    Answers
    15
    maneljn is on a distinguished road

      0  

    Default Unanswered: wich event i have to listen for all components rendered

    Unanswered: wich event i have to listen for all components rendered


    i have a panel, inside a form, inside some fields.

    Wich component rendered event i have to listen in mvc controller to be sure that all components has been rendered.

    Code:
            // ---------------------------------------------------------------
            // Formulario para editar los registros
            // ---------------------------------------------------------------
            me.formularioExpedientes = Ext.create('Ext.form.Panel', {
                name: 'formularioExpedientes',
                border: false,
                bodyPadding: 10,
                hidden: false,
                autoScroll: true,
                fieldDefaults: {
                    labelAlign: 'left',
                    labelWidth: 125,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 5 0'
                },
                layout: 'fit',
    
                //                            
                // Campos del formulario
                //
                items: [{
                    xtype: 'panel',
                    title: '',
                    border: false,
                    layout: 'border',
            
                    items: [{
                        xtype: 'panel',
                        border: false,
                        layout: 'anchor',
                        region: 'north',
                        items: [{
                            xtype: 'fieldset',
                            title: gt.dgettext('mensionexp','Datos generales'),
                            collapsible: true,
                            padding: '5 5 0 5',                        
                            items: [{
                                xtype: 'panel',
                                border: false,
                                layout: 'column',
    
                                items: [{
                
                                    // Columna izquierda
                                    xtype: 'container',
                                    columnWidth:.75,
                                    layout: 'anchor',
                                                                                
                                    items: [{
                                        xtype: 'fieldcontainer',
                                        fieldLabel: '',
                                        labelSeparator: '',
                                        labelWidth: 0,
                                        layout: {
                                            type: 'hbox',
                                            pack: 'ratio',
                                            align: 'top'
                                        },
                                        anchor: '100%',
                                        defaultType: 'cesitextfield',
                                        fieldDefaults: {
                                            labelAlign: 'right',
                                            labelStyle: 'font-weight:bold;'
                                        },
                                        defaults: {
                                            margins: '0 5 0 0'
                                        },
                    
                                        items: [{
                                            name: 'exped_titulo',
                                            xtype: 'displayfield',
                                            fieldLabel: gt.dgettext('mensionexp','Título/Número'),
                                            labelAlign: 'left',
                                            labelWidth: 125,
                                            flex: 1
                                        }, {
                                            name: 'exped_activo',
                                            xtype: 'checkboxfield',
                                            fieldLabel: gt.dgettext('mensionexp','Activo'),
                                            labelWidth: 50,
                                            boxLabel: '',
                                            margins: '0 0 0 0',    
                                            inputValue: true,
                                            uncheckedValue: false,        // Si no definimos uncheckedValue solo se incluye en el getValues del form si esta chequedado.
                                            tabIndex: -1,                // Para que el cambio de campos con tabulador no se pare aqui 
                                            hidden: true
                                        }]
                                    },{
                                        xtype: 'fieldcontainer',
                                        fieldLabel: '',
                                        labelSeparator: '',
                                        labelWidth: 0,
                                        layout: {
                                            type: 'hbox',
                                            pack: 'ratio',
                                            align: 'top'
                                        },
                                        anchor: '100%',
                                        defaultType: 'cesitextfield',
                                        fieldDefaults: {
                                            labelAlign: 'right',
                                            labelStyle: 'font-weight:bold;'
                                        },
                                        defaults: {
                                            margins: '0 5 0 0'
                                        },
                    
                                        items: [{
                                            // Tipo expediente asignado a la gestion
                                            name: 'exped_tipexp_id',
                                            xtype: 'combobox',
                                            fieldLabel: gt.dgettext('mensionexp','Tipo Expediente'),
                                            labelAlign: 'left',
                                            labelWidth: 125,
                                            store: me.storeTiposExpedientesDisponiblesAsociado,
                                            queryMode: 'remote',                                
                                            displayField: 'tipexp_nombre',
                                            valueField: 'tipexp_id',
                                            forceSelection: true,
                                            typeAhead: true, 
                                            editable: true,
                                            flex: 1,
                                            fieldCls: 'campo_obligatorio',
                                            allowBlank: false
                                        },{
                                            name: 'escoge_cto_nombre_fiscal',
                                            xtype: 'cesifieldtriggerescoge',
                                            fieldLabel: gt.dgettext('mensionexp','Cliente/Contacto'),
                                            labelAlign: 'right',
                                            labelWidth: 125,
                                            flex: 1,
                                            windowEscoge: me.windowEscogeContactoAsociado,
                                            emptyText: gt.dgettext('mensionexp','Introduzca id o nombre'),
                                            fieldCls: 'campo_obligatorio',
                                            forzarMayusculas: false,
                                            allowBlank: false,
                                            submitValue: true
                                        },{
                                            name: 'exped_contacto_id',
                                            xtype: 'hiddenfield',
                                            submitValue: true,
                                            margins: '0 0 0 0',
                                            width: 0
                                        }]
                                    }]
    
    
                                }, {
                                    // Columna derecha
                                    xtype: 'container',
                                    columnWidth:.25,
                                    layout: 'anchor'
                                }]
    
                            }]
                        }]
    
                    // Parte inferior
                    },{
                        xtype: 'panel',
                        border: false,
                        region: 'center',
                        layout: 'fit',
                        items: [{                    
                        
                            // Tab panel de subfichas
                            name: 'exped_tabpanel_subfichas',
                            xtype: 'mensionexp_view_tabpanelBase',
                            title: '',
                            border: true,
                            closable: false,
                            defaults: {
                                padding: '5 5 5 5',                        
                                layout: 'anchor'
                            },
                            items: [{
    
                                xtype: 'mensionexp_view_panelSubfichaBase',
                                title: gt.dgettext('mensionexp','Detalles'),
                                layout: 'anchor',
                                autoScroll: true,
                                items: [{
                                    name: 'exped_fechaInicio',
                                    xtype: 'datefield',
                                    fieldLabel: gt.dgettext('mensionexp','Fecha Inicio'),
                                    labelWidth: 125,
                                    format: 'd-m-Y',
                                    startDay: 1,
                                    submitFormat: 'Y-m-d',
                                    width: 250,
                                    allowBlank: true
                                }, {
                                    name: 'exped_fechaCierre',
                                    xtype: 'datefield',
                                    fieldLabel: gt.dgettext('mensionexp','Fecha Cierre'),
                                    labelWidth: 125,
                                    format: 'd-m-Y',
                                    startDay: 1,
                                    submitFormat: 'Y-m-d',
                                    width: 250,
                                    allowBlank: true
                                }, {
                                    // Sección asignado a la gestion
                                    name: 'exped_seccion_id',
                                    xtype: 'cesiclearablecombobox',
                                    fieldLabel: gt.dgettext('mensionexp','Sección'),
                                    labelAlign: 'left',
                                    labelWidth: 125,
                                    store: me.storeSeccionesDisponiblesAsociado,
                                    queryMode: 'remote',                                
                                    displayField: 'secc_nombre',
                                    valueField: 'secc_id',
                                    forceSelection: true,
                                    typeAhead: true, 
                                    editable: true,
                                    anchor: '50%',
                                    allowBlank: true
                                }, {
                                    // Gestión asignado a la gestion
                                    name: 'exped_gestion_id',
                                    xtype: 'cesiclearablecombobox',
                                    fieldLabel: gt.dgettext('mensionexp','Gestión'),
                                    labelAlign: 'left',
                                    labelWidth: 125,
                                    store: me.storeGestionesDisponiblesAsociado,
                                    queryMode: 'remote',                                
                                    displayField: 'gest_nombre',
                                    valueField: 'gest_id',
                                    forceSelection: true,
                                    typeAhead: true, 
                                    editable: true,
                                    anchor: '75%',
                                    allowBlank: true
                                }, {
                                    name: 'exped_campo1',
                                    xtype: 'cesitextfield',
                                    fieldLabel: gt.dgettext('esicontactos','Campo 1'),
                                    labelAlign: 'left',
                                    labelWidth: 125,
                                    forzarMayusculas: true,                    
                                    enforceMaxLength: true,
                                    maxLength: 50,                    
                                    anchor: '100%',
                                    allowBlank: true
                                }, {
                                    name: 'exped_campo2',
                                    xtype: 'cesitextfield',
                                    fieldLabel: gt.dgettext('esicontactos','Campo 2'),
                                    labelAlign: 'left',
                                    labelWidth: 125,
                                    forzarMayusculas: true,                    
                                    enforceMaxLength: true,
                                    maxLength: 50,                    
                                    anchor: '100%',
                                    allowBlank: true
                                }, {
                                    name: 'exped_campo3',
                                    xtype: 'cesitextfield',
                                    fieldLabel: gt.dgettext('esicontactos','Campo 3'),
                                    labelAlign: 'left',
                                    labelWidth: 125,
                                    forzarMayusculas: true,                    
                                    enforceMaxLength: true,
                                    maxLength: 50,                    
                                    anchor: '100%',
                                    allowBlank: true
                                }]                            
    
                            }, {
    
                                // Panel observaciones                            
                                xtype: 'mensionexp_view_panelSubfichaBase',
                                title: gt.dgettext('mensionexp','Observaciones'),
                                layout: 'fit',
                                autoScroll: false,
                                items: [{
                                    xtype: 'textareafield',
                                    name: 'exped_observaciones',
                                    autoScroll: true,
                                    fieldLabel: gt.dgettext('mensionexp','Observaciones'),
                                    allowBlank: true
                                }]
                                
                            }, {
                                // Ficha con datos del contacto
                                xtype: 'mensionexp_view_panelSubfichaBase',
                                title: gt.dgettext('mensionexp','Datos del contacto'),
                                items: [{
                                    xtype: 'panel',
                                    border: false,
                                    layout: 'column',
        
                                    items: [{
                    
                                        // Columna izquierda
                                        xtype: 'container',
                                        columnWidth:.75,
                                        layout: 'anchor',
                                                                                    
                                        items: [{
                                            // Datos del contacto
                                            // Contiene todos los campos que muestran la información del contacto asociado
                                            xtype: 'mensionexp_view_contactos_mostrarInfo',
                                            name: 'infoContactoAsociado'                                        
                                        }, {
                                            xtype: 'box',
                                            height: 10
                                        }, {
                                            // Datos de la direccion
                                            // Contiene todos los campos que muestran la información de la direccion asociado
                                            xtype: 'mensionexp_view_direcciones_mostrarInfo',
                                            name: 'infoDireccionAsociado'                
                                        }]
                                        
                                    },{
                                        // Columna derecha
                                        xtype: 'container',
                                        columnWidth:.25,
                                        layout: 'anchor',
    
                                        items: [{
                                            xtype: 'container',
                                            name: 'contenedorImagenFoto',
                                            width: 110,
                                            height: 110,
                                            bodyPadding: 0,
                                            margins: 0,
                                            padding: 0,
                                            items: [{                                    
                                                xtype: 'image',                            
                                                name: 'imagenFoto',
                                                border: false,
                                                maxWidth: 110,
                                                maxHeight: 110,
                                                imgCls: 'mensionexp-foto_contacto',
                                                src: 'index.php?downloaderClase=mensionexp_expedientes&downloaderMetodo=outputFoto&exped_id=' + me.registroAsociado.get('exped_id') + "&exped_guid=" + me.registroAsociado.get('exped_guid') + "&nocache=" + parseInt(new Date().getTime().toString().substring(0, 10))
                                            }]
                                        }]
    
                                    }]
                                }]
                            }, {
    
                                // Panel informacion de registro
                                xtype: 'mensionexp_view_panelSubfichaBase',
                                title: ' ',   // Dejar un espacio en blanco en el titulo.
                                iconCls: 'icono_informacion',
                                items: [{
                                    name: 'exped_id',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('mensionexp','Id')
                                }, {
                                    name: 'exped_guid',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('mensionexp','Guid')
                                }, {
                                    name: 'exped_fechaalta',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('mensionexp','Creada'),
                                    renderer: function(value) {
                                        return Ext.util.Format.date(value,'d-m-Y H:i:s')
                                    }
                                }, {
                                    name: 'exped_usralta_nombre',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('mensionexp','Creada por')
                                }, {
                                    name: 'exped_fechamod',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('mensionexp','Modificada'),
                                    renderer: function(value) {
                                        return Ext.util.Format.date(value,'d-m-Y H:i:s')
                                    }
                                }, {
                                    name: 'exped_usrmod_nombre',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('mensionexp','Modif. por')
                                }]
                            }]
                        }]
                    }]
                }]
            });
    -------------------
    Manel Juàrez

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Which have you tried?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,052
    Vote Rating
    215
    Answers
    484
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    What I've done is use boxready. In one app I have a controller's control doing:

    Code:
    this.control({
    	'viewport component': {
    		boxready: function () { // pulls down the splash page }
    	}
    });

  4. #4
    Sencha User
    Join Date
    Feb 2010
    Posts
    357
    Vote Rating
    4
    Answers
    15
    maneljn is on a distinguished road

      0  

    Default


    i've tried in control mvc, this which is the parent container of the form
    Code:
    ...
                'mensionexp_view_expedientes_mantEdicion' : {
                    render: me.onRenderFichaEdicion
                },
    ...
    and in aother test i've tried this which is the form
    Code:
                'mensionexp_view_expedientes_mantEdicion form[name="formularioExpedientes"]' : {
                    render: me.onRenderFichaEdicion
                },
    and in both situations not all fields where rendered.
    -------------------
    Manel Juàrez

  5. #5
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi maneljn,

    You can use afterrender event of the form panel. The afterrender event is fired after form component has been render.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.