0

以下のような JS があり、複数のタブを含むフォームを作成しようとしています。各タブの下に、いくつかのラベル、フィールド、ラジオグループなどを追加したいと考えています。私はまだ始めたばかりですが、すでに問題に直面しています。タブは常に問題なく表示されますが、「連絡先番号」の後に表示されます。ラベルのすぐ下にアイテムが表示されませんが、アドレス タブは表示されます。誰がどこでこれを間違えているのか教えてもらえますか!! 「連絡先」が欲しい モバイル、ホーム、ポケットベル、および電子メールのテキスト フィールドの見出しとして機能するラベル。

this.buildForm = function(){
        this.myForm = new Ext.form.FormPanel({
            layout:'column',
            border: false,
            labelWidth: labelWidth,
            anchor: "100%",
            items:[{
                columnWidth: 1,
                xtype:'tabpanel',
                activeTab: 0,
                height:420,
                enableTabScroll: true,
                deferredRender: false,
                bodyStyle:'padding:10px',
                items: [
                    {
                        title: 'Contact No. & Address',
                        i18nTitle: 'Person.contactNoAndAddress.title',
                        border: false,
                        items: [
                            {
                                xtype:'label',
                                text: 'Contact No.',
                                i18nTitle: 'Person.contactNo.title',
                                id: 'contactNo',
                                layout: 'column',
                                items: [
                                    {

                                        columnWidth: 0.33,
                                        layout: 'form',
                                        items:[
                                            {
                                                xtype:'textfield',
                                                fieldLabel: 'Mobile',
                                                tabIndex:101, 
                                                colwidth: 40
                                            }
                                        ]
                                    },{
                                        columnWidth: 0.33,
                                        layout: 'form',
                                        items:[
                                            {
                                                xtype:'textfield',
                                                fieldLabel: 'Home',
                                                tabIndex:102, 
                                                colwidth: 40
                                            }
                                        ]
                                    },{
                                        columnWidth: 0.33,
                                        layout: 'form',
                                        items:[
                                            {
                                                xtype:'textfield',
                                                fieldLabel: 'Office',
                                                tabIndex:103, 
                                                colwidth: 40
                                            }
                                        ]
                                    },{
                                        columnWidth: 0.33,
                                        layout: 'form',
                                        items:[
                                            {
                                                xtype:'textfield',
                                                fieldLabel: 'Pager',
                                                tabIndex:104, 
                                                colwidth: 40
                                            }
                                        ]
                                    },{
                                        columnWidth: 0.33,
                                        layout: 'form',
                                        items:[
                                            {
                                                xtype:'textfield',
                                                fieldLabel: 'Fax',
                                                tabIndex:105, 
                                                colwidth: 40
                                            }
                                        ]
                                    },{
                                        columnWidth: 1,
                                        layout: 'form',
                                        items:[
                                            {
                                                xtype:'textfield',
                                                fieldLabel: 'Email',
                                                width:200,
                                                tabIndex:106, 
                                                width: 200
                                            }
                                        ]
                                    }
                                ]
                            },{
                                xtype:'tabpanel',
                                id: 'addressTab',
                                permission:'person:responsibleAdmin',
                                activeTab: 0,
                                height:220,
                                enableTabScroll: false,
                                deferredRender: false,
                                bodyStyle:'padding:10px',
                                layoutOnTabChange: true,
                                items: [
                                    {
                                        title: 'Home Address',
                                        i18nTitle: 'Person.homeAddress.title',
                                        border: false,
                                        // hideMode: "offsets",
                                        items:[{}]
                                    },{
                                        title: 'Work Address',
                                        i18nTitle: 'Patient.workAddress.title',
                                        border: false,
                                        // hideMode: "offsets",
                                        items:[{}]
                                    }
                                ]
                            }
                        ]
                    },{
                        title:'Next of Kin',
                        i18nTitle: 'Person.nextOfKin.title',
                        layout: 'column',
                        labelWidth: 100,
                        items:[{

                        }]
                    }
                ]
            }]
        });
        return this.myForm;
    }
4

1 に答える 1

0

私が正しく理解している場合、あなたが取得したいもののために、テキストフィールドMobileはラベルと同じレベルでありContact No、彼の子供ではない必要があります.

jsfiddle をどのように変更したかをご覧ください: http://jsfiddle.net/zWdXf/6/

必要なコード部分の詳細は次のとおりです。

            items: [{
                xtype: 'label',
                text: 'Contact No.2',
                i18nTitle: 'Person.contactNo.title',
                id: 'contactNo',
                layout: 'column',
                items: [{}]
            },{
                xtype: 'textfield',
                fieldLabel: 'Mobile',
                i18nTitle: 'Person.contactNo.title',
                id: 'contactNo2',
                layout: 'column',
                items: [{}]
            }, {
                xtype: 'tabpanel',
                id: 'addressTab',
                permission: 'person:responsibleAdmin',
                activeTab: 0, [...]
于 2013-08-13T13:41:08.200 に答える