0

作成中のMVC Sencha Touchアプリケーションがあり、TabPanel を正しく機能させるのに問題があります。問題はこれです。PosViewport.js をこのようにすると、すべて正常に動作します。

touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
    console.log("inside initComponent() of PosViewport.js");
    touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
    dock: 'bottom',
    layout: {
        pack: 'center'
    }
},
layout: 'fit',
scroll: 'vertical',
items: [
    {
        title: 'Reciepts',
        iconCls: 'bookmarks',
        html: 'one'
    },
    {
        title: 'POS',
        iconCls: 'Favorites',
        html: 'two'
    }
]
});

ここでは、すべてが素晴らしいです！タブ バーは下部に表示され、ぴったりと収まり、2 つの間を問題なく切り替えることができます。

ただし、これらのパネルを PosViewport.js ファイル内に保持する代わりに、2 つの個別のファイルに移動しましょう。

View1.js:

touch.views.View1 = new Ext.extend(Ext.Panel, {
initComponent: function () {
    touch.views.View1.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: 'Reciepts',
iconCls: 'bookmarks',
html: 'panel one'
});

および View2.js:

touch.views.View2 = new Ext.extend(Ext.Panel, {
initComponent: function () {
    touch.views.View2.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: '2',
iconCls: 'bookmarks',
html: 'panel two'
});

両方の新しいビューを index.html に追加します。ここで、新しいビューを指すようにPosViewport.js を更新します。

touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
    console.log("inside initComponent() of PosViewport.js");
    touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
    dock: 'bottom',
    layout: {
        pack: 'center'
    }
},
layout: 'fit',
scroll: 'vertical',
items: [ touch.views.View1, touch.views.View2]
});

そして、それはすべて地獄に行きます。上部のごく一部しかページに表示されないため、下部タブ バーは表示されません。パネルがまったく表示されず、HTML コンテンツがまったく表示されません。

ここで何が起こっているのですか？なぜこのような振る舞いをしているのか、私にはまったくわかりません。正しい方向へのポインタは大歓迎です、ありがとう!

4

1 に答える 1

1

2 番目のケースでは、次のように 2 つのクラスを作成しました。

touch.views.View2 = new Ext.extend(Ext.Panel, {          // Class definition

一方、これらのパネルの 2 つのインスタンスが必要でした。したがって、次のように項目を追加します。

items: [new touch.views.View1(), new touch.views.View2()]   // Panel instance

これで動作するはずです。fullscreen:trueこれらのパネルからオプションを削除します。fullscreenつまり、パネルがビューポート領域全体を占めるようになります。

于 2011-11-04T07:52:55.023 に答える