javascript表单无法显示

javascript form cannot display

本文关键字:显示 表单 javascript      更新时间:2023-09-26

我有一个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;
    }

如果我理解正确,对于您想要获得的内容,您需要文本字段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, [...]