Ext formPanel 兩列布局的表單

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() { // 按鈕響應函數
                	
				}
			}]
		}
	});





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章