Results 1 to 5 of 5

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

  1. #1
    Sencha User
    Join Date
    Feb 2010
    Location
    Figueres (Spain)
    Posts
    370
    Answers
    15

    Default 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','Ttulo/Nmero'),
                                            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
                                }, {
                                    // Seccin asignado a la gestion
                                    name: 'exped_seccion_id',
                                    xtype: 'cesiclearablecombobox',
                                    fieldLabel: gt.dgettext('mensionexp','Seccin'),
                                    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
                                }, {
                                    // Gestin asignado a la gestion
                                    name: 'exped_gestion_id',
                                    xtype: 'cesiclearablecombobox',
                                    fieldLabel: gt.dgettext('mensionexp','Gestin'),
                                    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 informacin 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 informacin 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 Juarez

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Which have you tried?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    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
    Location
    Figueres (Spain)
    Posts
    370
    Answers
    15

    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 Juarez

  5. #5
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •