Question

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


}
});

在控制台上，我收到错误"Uncaught TypeError: Cannot read property 'items' of undefined"。

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

谢谢，

Answer 1

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

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

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

请更明确地了解UI呈现问题：

您的目标分辨率是什么？
哪些组件无法正确呈现？

无法在sencha touch中刷新面板

1 个答案: