1

背景: senchatouch 2 MVC フレームワークを使用してアプリケーションを開発しています。2 つのタブを持つタブパネルを使用する画面で作業しています。

問題: 最初のタブで、titleBar と List を表示したい。titleBar は表示できますが、タブ内のリストは表示できません。Google Chrome を使用して要素を検査すると、リストが空として表示されます。sencha の Web サイトのサンプル List コードを使用しています。別のパネルにリストを表示できますが、tabPanel のアイテムとして配置すると表示されません。

これは私が使用しているコードです:

Ext.define('POC.view.WUHomePage', {
    extend: 'Ext.TabPanel',
    requires: ['Ext.TitleBar', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
    alias: 'widget.wuHomePageView',

    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',
        cardSwitchAnimation: 'slide',
        defaults: {
            styleHtmlContent: true
        },

        items: [{
            // This is first tab
            title: 'Home',
            iconCls: 'home',
            items: [{
                xtype: 'titlebar',
                title: 'Hello',
                docked: 'top',
                items: [{
                    xtype: 'button',
                    text: 'LogOut',
                    ui: 'action',
                    itemId: 'newButton',
                    align: 'right'
                }]
            }, {
                xtype: 'list',
                title: 'Sample',
                fullscreen: true,
                itemTpl: '{title}',
                data: [{
                    title: 'Item 1'
                }, {
                    title: 'Item 2'
                }, {
                    title: 'Item 3'
                }, {
                    title: 'Item 4'
                }]
            }]
        },
        // This is second tab
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }]
    },

});
4

1 に答える 1

5

リストをフルスクリーンに設定しないでください。フルスクリーンに設定する必要があるコンポーネントは 1 つだけです。この場合は TabPanel です。代わりに、リストを高さ 100% に設定し、親コンポーネントを適切なレイアウトに設定します。

于 2012-12-13T05:38:37.233 に答える