Sencha touch 无法刷新sencha touch中的面板

我是新来的森查触摸

对于我的移动网站，我面临的问题是UI元素的呈现相互重叠，当我刷新或拉伸窗口时，UI元素的呈现会按需要显示

因此，我尝试使用doLayout刷新面板，但无法做到这一点。可能是我没有在正确的位置使用doLayout（）

这是我的密码

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]
    });
}
});


}
});

var-app=新的外部应用程序({
名称：'entwoven'，
useLoadMask：对，
启动：函数（）
{
Ext.setup（{tabletStartupScreen:'tablet_startup.png'，
图标：'icon.png'，
格洛松尼康：没错，
onReady:function（）{
var loginScreen=Ext.getCmp（'loginPanel'）.items.items[0]；
loginScreen.doLayout（）；
entwoven.views.loginToolbar=新的外部工具栏({
id:“登录工具栏”，
标题：“登录”，
码头：'顶部'
});
entwoven.views.imgPanel=新的外部面板({
id:“imgPanel”，
html:'
});
entwoven.views.formPanel=新的Ext.form.formPanel({
id:“formPanel”，
项目：[{
xtype:'textfield'，
id:'用户id'，
姓名：'姓名'，
占位符：“用户ID”
},
{
xtype:'密码字段'，
id:'密码字段'，
名称：“密码”，
占位符：“密码”
}
]
});
entwoven.views.storebtnPanel=新的外部面板({
id:'storebtnPanel'，
布局：“hbox”，
项目：[{
xtype:'按钮'，
cls:“storebtnAction”，
activeCls:“activeStore”，
id:'storebtn'
}，{html:'Store'，
id:'storetext'}]
});
entwoven.views.btnPanel=新的外部面板({
id:'btnPanel'，
项目：[{
xtype:'按钮'，
cls:“btnAction”，
id:'loginbtn'，
activeCls:'activeLogin'，
名称：“登录按钮”，
}]
});
entwoven.views.loginPanel=新的外部面板({
id:'loginPanel'，
全屏：对，
cls:“panelBackground”，
dockedItems:entwoven.views.loginToolbar，
条目：[entwoven.views.imgPanel，entwoven.views.formPanel，entwoven.views.storebtnPanel，entwoven.views.btnPanel]
});
entwoven.views.viewport=新的外部面板({
布局：“卡片”，
全屏：“正确”，
cardAnimation:“幻灯片”，
cls:“com”，
条目：[entwoven.views.loginPanel]
});
}
});
}
});

在控制台上，我得到一个错误，即

“uncaughttypeerror:无法读取未定义的属性'items'”

请帮助我如何刷新或“更新”上面的面板，以便我能够正确呈现UI元素

---

谢谢，

首先，您需要将此代码移至onReady事件的底部：

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

原因是，您尚未定义loginPanel组件，因此对它的引用将为空。将其移动到底部，或者更具体地说，在loginPanel定义之后，将解决items undefined错误

请更明确地说明UI呈现问题：

• 你的目标是什么
• 哪些组件渲染不正确