Question

Sencha Touch n00b在这里。我正在尝试使用tabpanel中的tabpanel创建一个表单。它们工作正常，但外部tabpanel有一个巨大的缩进（或左/上边距或其他东西），内部tabpanel也是如此。

我已经尝试过每一个布局/边距/边框/填充/弹性/对齐选项，没有任何区别！

代码（留下多余的过度杀伤选项）：

MyApp.views.pendingDetails = new Ext.form.FormPanel({
    id: 'pendingDetails',
    padding: 0,
    margin: 0,
    layout: 'auto',
    align: 'stretch',
    items: [{
        height: 500,
        xtype: 'tabpanel',
        activeTab: 0,
        //width: 400,
        tabBar: { //pack: 'center', // this will center the menu,
            cls: 'MainTabHeader',
            padding: 0,
            margin: 0
        },
        padding: 0,
        layout: 'auto',
        border: false,
        margin: 0,
        align: 'stretch',
        layout: 'auto',
        items: [{
            xtype: 'tabpanel',
            border: true,
            title: 'Customer',
            activeTab: 0,
            padding: 0,
            border: false,
            margin: 0,
            height: 300,
            align: 'stretch',
            layout: 'auto',
            tabBar: { //pack: 'center', // this will center the menu,
                cls: 'SubTabHeader',
                padding: 0,
                margin: 0
            },
            items: [{
                xtype: 'panel',
                title: 'Site',
                border: true,
                padding: 0,
                items: [{
                    xtype: 'textfield',
                    name: 'StJobId',
                    cls: "detailText",
                    readOnly: true,
                    label: 'Job #'
                }, {
                    xtype: 'textfield',
                    name: 'Priority',
                    readOnly: true,
                    cls: "detailText",
                    label: 'Priority'
                }, {
                    xtype: 'textfield',
                    id: 'txtAddress',
                    cls: "detailText",
                    readOnly: true,
                    label: 'Address'
                }, {
                    xtype: 'textfield',
                    id: 'txtSuburb',
                    readOnly: true,
                    cls: "detailText",
                    label: 'Suburb'
                }, {
                    xtype: 'textfield',
                    name: 'Company',
                    readOnly: true,
                    cls: "detailText",
                    label: 'Company'
                }]
            }, {
                xtype: 'panel',
                border: true,
                title: 'Contacts'
            }, {
                xtype: 'panel',
                border: true,
                title: 'Security'
            }]
        }, {
            xtype: 'panel',
            border: true,
            title: 'Install',
            height: 300,
            items: [{
                xtype: 'button',
                text: 'Install tab',
                iconCls: 'jobrequests',
                iconMask: true,
                iconAlign: 'top',
                ui: 'plain',
                cls: "TBButton"

            }]
        }, {
            xtype: 'panel',
            border: true,
            title: 'History'
        }]
    }],

    dockedItems: [
    MyApp.views.pendingDetailsTopToolbar]
});

它呈现为：

TabPanel Padding

如何摆脱红色标记的缩进？

Answer 1

显然，FormPanels是为基本CRUD设计的。他们无法处理tabpanels作为项目。

我将FormPanel更改为Panel，手动处理数据，现在呈现正常。

Sencha Touch：嵌套TabPanel布局

1 个答案: