1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    355
    Answers
    15
    Vote Rating
    4
    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,207
    Answers
    3517
    Vote Rating
    856
    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
    5,092
    Answers
    398
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    355
    Answers
    15
    Vote Rating
    4
    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
    Answers
    124
    Vote Rating
    85
    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.