1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    1
    Vote Rating
    0
    filippo.baruffaldi is on a distinguished road

      0  

    Default Ext.form.Panel does not render and not exists. Ext.getCmp does not find it by its id.

    Ext.form.Panel does not render and not exists. Ext.getCmp does not find it by its id.


    Hi Folks,

    I really don't know why... where is my fault... but this code below when executed it logs: undefined. The panel does not render and not gives any exception.

    Does someone can help me please? Thanks a lot!

    Code:
        Ext.create('Ext.form.Panel', {
            frame: true,
            style: 'border: none;border-radius:0;',
            width: 300,
            stateId: 'merlino-buildings-add-form',
            id: 'merlino-buildings-add-form',
            bodyPadding: 5,
            loadMask: true,
            waitMsgTarget: true,
            waitMsg: 'Inserimento in corso...',
            border: false,
            model: 'Building',
    
    
            fieldDefaults: {
                labelAlign: 'right',
                labelWidth: 147,
                msgTarget: 'side'
            },
    
    
            defaultType: 'textfield',
            defaults: {
                width: 390
            },
            items: [{
                xtype: 'fieldset',
                title: 'Informazioni Legali',
                collapsible: true,
                collapsed: false,
                defaultType: 'textfield',
                defaults: {
                    anchor: '100%',
                    labelSeparator: '',
                    labelStyle: 'font-weight:bold;',
    
    
                    fieldLabel: ''
                },
                items: [{
                    xtype: 'combobox',
                    fieldLabel: 'Contatto',
                    name: 'contact',
                    store: 'merlino-contacts',
                    valueField: 'key',
                    displayField: 'longname',
                    typeAhead: true,
                    queryMode: 'local',
                    emptyText: 'Cognome / Ragione Sociale'
                }, {
                    xtype: 'combobox',
                    fieldLabel: 'Contratto',
                    name: 'contract',
                    store: 'merlino-buildings-contract-types',
                    valueField: 'key',
                    displayField: 'longname',
                    typeAhead: true,
                    queryMode: 'local',
                    emptyText: 'Tipologia'
                }]
            },Ext.create('MerlinoFieldSetAddress', {
                border: true
            }),{
                xtype: 'fieldset',
                title: 'Dati Catastali',
                collapsible: true,
                collapsed: true,
                defaultType: 'textfield',
                defaults: {
                    anchor: '100%',
                    labelSeparator: '',
                    labelStyle: 'font-weight:bold;',
    
    
                    fieldLabel: ''
                },
                items: [{
                    xtype: 'combobox',
                    fieldLabel: 'Tipologia',
                    name: 'building_type',
                    store: 'merlino-buildings-types',
                    valueField: 'key',
                    displayField: 'longname',
                    typeAhead: true,
                    queryMode: 'local',
                    emptyText: 'Abitazione, Box, etc.'
                }, {
                    xtype: 'numberfield',
                    minValue: 0,
                    keyNavEnabled: true,
                    mouseWheelEnabled: true,
                    fieldLabel: 'm<sup>2</sup>',
                    emptyText: '100',
                    useThousandSeparator: true,
                    growAppend: 'mq',
                    name: 'mq'
                }]
            },{
                xtype: 'fieldset',
                title: 'Dettagli',
                collapsible: true,
                collapsed: true,
                defaultType: 'textfield',
                defaults: {
                    anchor: '100%',
                    labelSeparator: '',
                    labelStyle: 'font-weight:bold;',
    
    
                    fieldLabel: ''
                },
                items: [{
                    xtype: 'numberfield',
                    minValue: 0,
                    fieldLabel: 'Camere da Letto',
                    emptyText: '2',
                    name: 'bedrooms',
                    useThousandSeparator: false,
                    keyNavEnabled: true,
                    mouseWheelEnabled: true
                }, {
                    xtype: 'numberfield',
                    minValue: 0,
                    fieldLabel: 'Ascensori',
                    emptyText: '1',
                    name: 'elevators',
                    useThousandSeparator: false,
                    keyNavEnabled: true,
                    mouseWheelEnabled: true
                }, {
                    xtype: 'numberfield',
                    minValue: 0,
                    fieldLabel: 'Terrazzi',
                    emptyText: '4',
                    name: 'terrace',
                    useThousandSeparator: false,
                    inputAttrTpl: 'Terrazzi',
                    keyNavEnabled: true,
                    mouseWheelEnabled: true
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: 'Plus',
                    columns: 1,
                    vertical: true,
                    items: [
                        { boxLabel: 'Vista Mare', name: 'sea_seeking', inputValue: '1' },
                        { boxLabel: 'Spazi Esterni', name: 'outer_spaces', inputValue: '1' },
                        { boxLabel: 'Giardino', name: 'garden', inputValue: '1' }
                    ]
                }/*, {
                    xtype      : 'fieldcontainer',
                    fieldLabel : 'Vista Mare',
                    defaultType: 'checkfield',
                    defaults: {
                        flex: 1
                    },
                    layout: 'hbox',
                    items: [
                        {
                            boxLabel  : 'No',
                            name      : 'sea_seeking',
                            inputValue: '0',
                        }, {
                            boxLabel  : 'Si',
                            name      : 'sea_seeking',
                            inputValue: '1',
                        }
                    ]
                }, {
                    xtype      : 'fieldcontainer',
                    fieldLabel : 'Spazi Esterni',
                    defaultType: 'radiofield',
                    defaults: {
                        flex: 1
                    },
                    layout: 'hbox',
                    items: [
                        {
                            boxLabel  : 'No',
                            name      : 'outer_spaces',
                            inputValue: '0',
                        }, {
                            boxLabel  : 'Si',
                            name      : 'outer_spaces',
                            inputValue: '1',
                        }
                    ]
                }, {
                    xtype      : 'fieldcontainer',
                    fieldLabel : 'Giardino',
                    defaultType: 'radiofield',
                    defaults: {
                        flex: 1
                    },
                    layout: 'hbox',
                    items: [
                        {
                            boxLabel  : 'No',
                            name      : 'garden',
                            inputValue: '0',
                        }, {
                            boxLabel  : 'Si',
                            name      : 'garden',
                            inputValue: '1',
                        }
                    ]
                }*/]
            }, {
                xtype: 'fieldset',
                title: 'Informazioni Aggiuntive',
                collapsible: true,
                collapsed: true,
                defaultType: 'textfield',
                defaults: {
                    anchor: '100%',
                    labelSeparator: '',
                    labelStyle: 'font-weight:bold;',
    
    
                    fieldLabel: ''
                },
                items: [{
                    xtype: 'textarea',
                    fieldLabel: 'Note',
                    emptyText: 'Informazioni aggiuntive...',
                    name: 'notes'
                },{
                    hidden: true,
                    disabled: true,
                    submitValue: false,
                    name: 'user'
                },{
                    hidden: true,
                    disabled: true,
                    submitValue: false,
                    name: 'date'
                },{
                    hidden: true,
                    disabled: true,
                    submitValue: false,
                    name: 'update_user'
                },{
                    hidden: true,
                    disabled: true,
                    submitValue: false,
                    name: 'update_date'
                }]
            }],
    
    
            buttonAlign: 'center',
            buttons: [{
                text: 'Cancella',
                iconCls: 'icon-delete',
                handler: function(){
                    this.up('form').getForm().reset();
                }
            }, {
                text: 'Salva',
                iconCls: 'icon-save',
                disabled: true,
                formBind: true,
                handler: function(){
                    var self = this,
                        update = function(){
                            var form = self.up('form'),
                                values = form.getForm().getValues(),
                                record = Ext.create('Building', values);
                            form.setLoading(true);
                            record.save({
                                waitMsg: 'Salvataggio in corso...',
                                retryFn: update,
                                success: function(a,b){
                                    form.setLoading(false);
                                    Ext.MessageBox.show({
                                        constrain: true,
                                        closable: false,
                                        icon: Ext.MessageBox.INFO,
                                        title: 'Fatto!',
                                        msg: '<b>Salvataggio riuscito!</b><br /><br />Come intendi procedere?',
                                        buttons: Ext.MessageBox.YESNOCANCEL,
                                        buttonText:{
                                            yes: "Apri i dettagli di questo immobile",
                                            no: "Nuovo un altro immobile",
                                            cancel: "Chiudi"
                                        },
                                        fn: function(retry){
                                            if (retry == 'yes') {
                                                Ext.create('MerlinoBuildingsAdd', {show: false});
                                                var win = Ext.create('MerlinoBuildingsRead', {show: true, title: 'Immobile: '+ record.getData().longname, values: values}),
                                                    readform = win.down('form').getForm();
                                                readform.record = record;
                                                readform.loadRecord(record);
                                                readform.getFields().each(Merlino.hide_empty_fields);
                                                Merlino.handle_preview_and_shortcut(readform.record);
                                            } else if (retry == 'no')
                                                form.getForm().reset();
                                            else if (retry == 'cancel') {
                                                Ext.create('MerlinoBuildingsAdd', {show: false});
                                                Ext.create('MerlinoBuildingsListing', {show: true});
                                            }
                                        }
                                    });
                                },
                                failure: function(a,b){
                                    form.setLoading(false);
                                },
                            });
                    }
                    update();
                }
            }, {
                text: 'Chiudi',
                handler: function(){
                    Ext.create('MerlinoBuildingsAdd', {});
                }
            }]
        });
        console.log(Ext.getCmp('merlino-buildings-add-form'));

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,468
    Vote Rating
    202
    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


    Do you have that id (merlino-buildings-add-form) specified anywhere else other than this instance?
    Personally I've moved away from using id and only use itemId anymore to ensure I don't have the same ID anywhere on the document twice.

    Also, I took your example code and pulled out everything except for the panel itself (removed all child items, buttons, etc) and it found the component just fine using getCmp().

Thread Participants: 1

Tags for this Thread