0

Sencha Touch 2.3 を使い始めたところです。

私はNavigationViewを持っています。その内部には、2 つのパネル (フレックス: 0) と 1 つのタブパネル (フレックス: 1) で構成されるビュー (レイアウト: 'vbox') があります。ビューは完全にスクロール可能である必要があります。

問題は、タブパネルのコンテンツが完全に表示されておらず、ページ全体を埋めていないことです。

タブパネルのレイアウト プロパティが「フィット」に設定されている場合、コンテンツは適切に表示され、ビュー全体が縦横にスクロールしますが、タブパネルは機能しなくなります。tabpanel を外側のコンテナの中に入れて「layout: fit」に設定しても、同じ結果になります。

これは私のコードの抜粋です:

Ext.define('App.view.athletes.Detail', {
extend: 'Ext.Panel',
xtype: 'athleteDetail',

config: {
    itemId: 'view-athleteDetail',
    title: '...',
    layout: 'vbox',

    items: [
        {
            xtype: 'panel',
            itemId: 'component-wrapper',
            scrollable: true,
            flex: 1
        }
    ]
}

「component-wrapper」の内部で、上記の 3 つのコンポーネントを動的に作成して追加します。

this.topComponent = Ext.create('Ext.Panel', {
        flex: 0,
        layout: 'hbox',
        items: [
            {
            xtype: 'panel',
            ....
            ....
            },
            {
            xtype: 'panel',
            ....
            ....
            }
        ]
});

this.baseInfoComponent = Ext.create('Ext.Panel', {
    flex: 0,
    html: '...'
});


this.bottomComponent = Ext.create('Ext.TabPanel', {
        flex: 1,
        tabBarPosition: 'top',
        styleHtmlContent : true,

        items: [
            {
            ........
            },
            {
            ........
            }
        ]
});

事前にサンクス。

乾杯

4

2 に答える 2

0

「コンポーネント ラッパー」パネルを削除します。そして、これらの動的パネルを「view-athleteDetails」内に追加します。理解するために、これを試してください：

 config: {
        cls: 'main',
        itemId: 'view-athleteDetail',
        title: '...',
        layout: 'vbox',

        items: [{
            xtype: 'panel',
            flex: 0,
            layout: 'hbox',
            items: [{
                xtype: 'panel'
            }, {
                xtype: 'panel'
            }]
        }, {
            xtype: 'panel',
            flex: 0,
            html: 'O meri jaan'
        }, {
            xtype: 'tabpanel',
            flex: 1,
            tabBarPosition: 'bottom',
            styleHtmlContent : true,

            items: [{
                title: 'Home',
                iconCls: 'home',
                html: 'Home Screen'
            }, {
                title: 'Contact',
                iconCls: 'user',
                html: 'Contact Screen'
            }]
        }]
    }

これはページ全体に収まります。

于 2013-11-06T12:44:03.787 に答える
0

Sencha では、vbox 内のコンポーネントの自動高さを設定するのに問題があります。タブを切り替えるときに高さを手動で設定することをお勧めします。activeitemchange以下のリスナーとfixHeight関数を見てください。

Ext.application({
    name: 'Test',

    requires: [
        'Ext.MessageBox',
        'Ext.TitleBar',
        'Ext.tab.Panel'
    ],

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('Ext.Container', {
            scrollable: 'vertical',
            layout: 'vbox',
            items: [{
                xtype: 'titlebar',
                title: 'Test',
                docked: 'top'
            }, {
                xtype: 'panel',
                height: 100,
                layout: 'hbox',
                padding: 10,
                defaults: {
                    width: 80,
                    margin: '0 5px'
                },
                items: [{
                    style: {
                        'background-color': '#B1654B'
                    }
                }, {
                    style: {
                        'background-color': '#F79273'
                    }
                }, {
                    style: {
                        'background-color': '#FDC08E'
                    }
                }, {
                    style: {
                        'background-color': '#FFF6B9'
                    }
                },{
                    style: {
                        'background-color': '#99D1B7'
                    }
                }]
            }, {
                xtype: 'tabpanel',
                height: 0,
                style: {
                    'border': '2px solid #555'
                },
                defaults: {
                    style: {
                        'padding': '10px 5px',
                        'background-color': '#EFFFE0'
                    }
                },
                items: [{
                    xtype: 'panel',
                    title: 'tab 1',
                    html: 'panel 1<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
                }, {
                    xtype: 'panel',
                    title: 'tab 2',
                    html: 'panel 2<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
                }, {
                    xtype: 'panel',
                    title: 'tab 3',
                    html: 'panel 3<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.'
                }],
                listeners: {
                    activeitemchange: function() {
                        this.fixHeight();
                    },
                    scope: this,
                    order: 'after'
                }
            }]
        }));
        this.fixHeight();
    },

    fixHeight: function() {
        var tabPanel = Ext.Viewport.down('tabpanel'),
            tabBar = tabPanel.down('tabbar'),
            dh = 10,
            h;
        tabPanel.setHeight(0);// reset tab panel height
        h = tabPanel.getActiveItem().element.dom.scrollHeight + tabBar.element.getHeight() + dh;
        tabPanel.setHeight(h);
    }
});
于 2013-11-08T07:57:58.880 に答える