Ext formPanel 两列布局的表单-优快云博客

本文介绍了一个使用 ExtJS 框架设计的表单面板实例，该面板包括了基本信息和档案管理两个部分。基本信息部分展示了不可编辑的员工信息，而档案管理部分则允许用户输入档案的相关数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var archive_form = new Ext.form.FormPanel({
		autoHeight: true,
		autoWidth: true,
        layout: 'column',
        border: false,
        items: [{
            columnWidth: .5,
            xtype: 'fieldset',
            title: '基本信息',
            layout: 'form',
            defaults: {anchor: '95%'},
            style: 'margin-left: 5px;padding-left: 5px;',
            // 第一列中的表项
            items:[
                {xtype: 'textfield',fieldLabel: '职工编号',name: 'personNum',readOnly: true},
                {xtype: 'textfield',fieldLabel: '姓名',name: 'personName',readOnly: true},
                {xtype: 'textfield',fieldLabel: '院系',name: 'college',readOnly: true},
                {xtype: 'textfield',fieldLabel: '性别',name: 'sex',readOnly: true},
                {xtype: 'textfield',fieldLabel: '人员状态',name: 'personStatus',readOnly: true}
            ]
        }, {
            columnWidth: .5,
            xtype: 'fieldset',
            title: '要填写的信息',
            layout: 'form',
            defaults: {anchor: '95%'},
            style: 'margin-left: 5px;padding-left: 5px;',
            // 第二列中的表项 
            items:[
                {xtype: 'textfield',fieldLabel: '档案号',name: 'archiveNum'},
                {xtype: 'textfield',fieldLabel: '存放地点',name: 'location'},
                {xtype: 'datefield',fieldLabel: '转入时间',name: 'inDate'},
                {xtype: 'datefield',fieldLabel: '转出时间',name: 'outDate'},
                {xtype: 'textfield',fieldLabel: '校区',name: 'campusType'},
                {xtype: 'textarea',fieldLabel: '借阅记录',name: 'readRecord',height:80},
                {xtype: 'textfield',fieldLabel: '职工类别',name: 'personType'}
            ]
        }],
        
        buttons : {
			align : "right",
			items : [{
				text: "确定"
			}, {
				text : "取消",
				handler : function() { // 按钮响应函数
                	
				}
			}]
		}
	});