Question

I am new to sencha touch.

For my mobile website,I am facing the issue that rendering of UI elements overlaps each other and when I refresh or stretch the window, the rendering of UI elements appears as desired.

So,I am trying to refresh the panel using doLayout but not able to do it. May be I have not used doLayout() at correct place.

Here is my code.

var app=new Ext.Application({
    name:'entwoven',
    useLoadMask:true,
    launch:function()
    {

    Ext.setup({tabletStartupScreen:'tablet_startup.png',
        icon:'icon.png',
        glossOnIcon:true,
        onReady:function(){


     var loginScreen = Ext.getCmp('loginPanel').items.items[0];
     loginScreen.doLayout();



    entwoven.views.loginToolbar = new Ext.Toolbar({
    id:'loginToolbar',
    title: 'Login',
    dock :'top'
    });

    entwoven.views.imgPanel = new Ext.Panel({
        id: 'imgPanel',
        html : '<div class="volkwagen"><center></center></div>'

    });

    entwoven.views.formPanel = new Ext.form.FormPanel({
        id : 'formPanel',
        items: [{

            xtype : 'textfield',
            id: 'userId',
            name: 'name',
            placeHolder: 'UserId'
        },
        {
            xtype: 'passwordfield',
            id: 'passwordfield',
            name : 'password',
            placeHolder: 'Password'
        }

    ]
    });

    entwoven.views.storebtnPanel = new Ext.Panel({
        id: 'storebtnPanel',
        layout: 'hbox',
        items :[{
            xtype : 'button',
            cls : 'storebtnAction',
            activeCls : 'activeStore',
            id: 'storebtn'
            },{html : 'Store',
                id: 'storetext'}]
    });

    entwoven.views.btnPanel = new Ext.Panel({
        id: 'btnPanel',
        items:[{
            xtype : 'button',
            cls : 'btnAction',
            id: 'loginbtn',
            activeCls : 'activeLogin',
            name: 'loginButton',


        }]
    });


    entwoven.views.loginPanel = new Ext.Panel({
        id:'loginPanel',
        fullscreen:true,
        cls: 'panelBackground',
        dockedItems: entwoven.views.loginToolbar,
        items : [entwoven.views.imgPanel,entwoven.views.formPanel,entwoven.views.storebtnPanel,entwoven.views.btnPanel]

        });

entwoven.views.viewport = new Ext.Panel({
    layout: 'card',
    fullscreen: 'true',
    cardAnimation: 'slide',
    cls: 'com', 
         items: [entwoven.views.loginPanel]
    });
}
});


}
});

On the console, I am getting the error that "Uncaught TypeError: Cannot read property 'items' of undefined".

Please help on how to refresh or ‘update’ the above panel so I can get the correct rendering of the UI elements.

Thank you,

Answer 1

First thing, you need to move this code to the bottom of your onReady event:

 var loginScreen = Ext.getCmp('loginPanel').items.items[0];
 loginScreen.doLayout();

Reason being, you have yet to define the loginPanel component, so your reference to it will be empty. Moving it to the bottom, or more specifically, after the loginPanel definition will solve the items undefined error.

Please be more explicit about the UI rendering issues:

• What resolution are you targeting?
• What components are not rendering correctly?