Form panel not showing by set active item

Question

Am new to sencha touch, my problem is i have a separate view to show a form panel by clicking on control event the form panel view will load, but when i click on the event nothing display on my screen. Just a blank screen to show..I dont know what am doing. The form panel is taken from sencha form panel tutorial

The following are my form panel view

Ext.define('WinReo.view.AddContact', {
    extend: 'Ext.Container',
    xtype: 'addcontact',
    requires: [
        'Ext.TitleBar'
        //'Ext.Video'
    ],
    config: {
        layout:'fit'

    },
    initialize:function(){
        console.log('inside initialize');
        var formPanel = Ext.create('Ext.form.Panel', {
            //xytpe:'formpanel',
            fullscreen: true,
            layout:'fit',

            items: [{
                xtype: 'fieldset',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        label: 'Name'

                    },
                    {
                        xtype: 'emailfield',
                        name : 'email',
                        label: 'Email'
                    },
                    {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password'
                    }
                ]
            }]
        });

        formPanel.add({
            xtype: 'toolbar',
            docked: 'bottom',
            layout: { pack: 'center' },
            items: [
                {
                    xtype: 'button',
                    text: 'Set Data',
                    handler: function() {
                        formPanel.setValues({
                            name: 'Ed',
                            email: '[email protected]',
                            password: 'secret'
                        })
                    }
                },
                {
                    xtype: 'button',
                    text: 'Get Data',
                    handler: function() {
                        Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
                    }
                },
                {
                    xtype: 'button',
                    text: 'Clear Data',
                    handler: function() {
                        formPanel.reset();
                    }
                }
            ]
        });

    }
});

This is the controller event to show form panel view

    onItemSwiped: function(list,index,target,record,e)
        {
var addcontact= Ext.create('WinReo.view.AddContact');
            Ext.Viewport.add(addcontact);
            Ext.Viewport.setActiveItem(addcontact);
        },

Just a simple task but am spending too much time to fix this one..please help me to solve this issue. Thanks in advance..

try to set formpanel flex value to 1 and see what happens, also let me know if you getting any error — Viswa
Sorry for late reply, i tried this way var formPanel = Ext.create('Ext.form.Panel', { flex:1, ........ but its not working..not getting any error in my console.. Actually the form is there when i give formPanel.show(); command at the end of the form i can see the bottom tool bar buttons but the text fileds are not visible. when i click the set data and get data buttons i can see the popup data. the only problem is the text field is hidden..thanks in advance plz help to solve this issue... — Dibish

Viswa Viswa · Accepted Answer · 2013-06-10T05:06:24

Your right about setActiveItem and you need to use it. because Ext.Viewport.add() only adds to viewPort not shows the view.

So only problem in your code is you created formPanel, but not added it in the AddContact View.

    ........... 
    // same code
                {
                    xtype: 'button',
                    text: 'Get Data',
                    handler: function() {
                        Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
                    }
                },
                {
                    xtype: 'button',
                    text: 'Clear Data',
                    handler: function() {
                        formPanel.reset();
                    }
                }
            ]
        });
        this.add(formPanel); // add this line
    }
});

See this fiddle

Form panel not showing by set active item

1 Answers