0

senchatouchは初めてです。

私のモバイルWebサイトでは、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要素の正しいレンダリングを取得できるように、上記のパネルを更新または「更新」する方法を教えてください。

ありがとうございました、

4

1 に答える 1

2

まず、このコードをonReadyイベントの下部に移動する必要があります。

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

理由は、loginPanelコンポーネントをまだ定義していないため、そのコンポーネントへの参照は空になります。一番下に移動するか、より具体的には、loginPanel定義の後で、アイテムの未定義エラーを解決します。

UIレンダリングの問題についてより明確にしてください。

  • どの解像度をターゲットにしていますか？
  • どのコンポーネントが正しくレンダリングされていませんか？
于 2012-05-21T16:06:20.583 に答える