Sencha Touch:入れ子のTabPanelレイアウト

Sencha Touch n00bはここにあります。私は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

赤でマークされたインデントを取り除くにはどうすればよいですか?

2

1 答え

明らかにFormPanelsは基本的なCRUD用に設計されています。タブパネルをアイテムとして扱うことはできません。

私はFormPanelをPanelに変更し、手動でデータを処理しましたが、今はうまく描画されます。

1
追加された