0

我刚开始使用 Sencha Touch 2.3。

我有一个导航视图。在它里面有一个由两个面板（flex：0）和一个tabpanel（flex：1）组成的视图（布局：'vbox'）。视图应该是完全可滚动的。

问题是标签面板的内容不是完全可见的，也没有填满整个页面。

如果选项卡面板的布局属性设置为“适合”，则它的内容会正确显示，整个视图会按纵横比滚动，但选项卡面板会停止工作。如果我将标签面板放在外部容器中并将其设置为“布局：适合”，则结果相同。

这是我的代码的摘录：

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
        }
    ]
}

在“组件包装器”内部，我动态创建并添加了上述 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 回答