Sencha Touch 2 - my form does not display

Question

I am new to Sencha touch. I am trying to define a form (because I want to re-use it) but I cannot manage to display it on the screen.

This is my form code:

Ext.define('WSCP.view.form.PersonForm' , {
    extend: 'Ext.form.Panel'

    , requires: [
        'WSCP.view.text.IdText'
        ,'WSCP.view.text.FirstNameText'
        ,'WSCP.view.text.LastNameText'
        ]
    ,xtype: 'personform'

    ,config: {
        items: [{
            xtype: 'fieldset'
            ,title: 'Who are You'
            ,instructions: 'enter your data'
            ,items: [
                {
                    xtype: 'textfield',
                    name : 'firstName',
                    label: 'First Name'
                }
                ,{ xtype: 'idText' }
                ,{ xtype: 'firstNameText' }
                ,{ xtype: 'lastNameText' }
            ]
        }]
    }   

    ,initialize: function() {
        console.log('initialize form');
        this.callParent();
    }
});

And this is the code from my view:

Ext.define('WSCP.view.HomeView' , {
    extend: 'Ext.Panel'


    ,xtype: 'homecard'

    , requires: [
        'WSCP.view.button.GetButton'
        ,'WSCP.view.button.GetOneButton'
        ,'WSCP.view.button.PutButton'
        ,'WSCP.view.button.PostButton'
        ,'WSCP.view.button.DeleteButton'
        ,'WSCP.view.form.PersonForm'
    ]

    ,config: {
        title: 'Home'
        ,iconCls: 'home'

        ,items: [
            {                
                xtype: 'titlebar'
                ,docked: 'top'
                ,title: 'Home'


                ,items: [
                    { xtype: 'getbutton' }
                    ,{ xtype: 'getOnebutton' }
                    ,{ xtype: 'putbutton' }
                    ,{ xtype: 'postbutton' }
                    ,{ xtype: 'deletebutton' }
                    ,{
                        text: 'Ping'
                        ,action: 'pingAction'
                        ,align: 'right'
                    }
                ]
            }   
                //WHY DOESN'T THIS WORK?
            ,{ xtype: 'personform' }
        ]
    }
});

Many Thanks, Alex

daithi44 daithi44 · Accepted Answer · 2012-03-19T19:00:06

I can replicate that issue here when I try that.

Experimenting I was also trying to add it dynamically in a controller via a reference and had the following result

//WORKS var myPanel = new Ext.Panel ({ items :[......] }); this.get....().add(myPanel)

//DOESN"T WORK var myPanel = new Ext.form.Panel ({ items :[.......] }); this.get....().add(myPanel);

//BUT WORKS var myPanel = new Ext.form.Panel ({
height:300, items :[.......] }); this.get....().add(myPanel);`

I got the Ext.form.Panel working when I set the height property. By default this is null according to the config spec. If you set the height it works where I said it doesn't work. see BUT WORKS above

Sencha Touch 2 - my form does not display

2 Answers