table表格布局

var addForm = new Ext.form.FormPanel({ labelAlign : 'right',//标签向右对齐 frame : true, border : false, width : '100%', height : 40, layout : 'table', //声明为表格布局 defaults : { bodyStyle : 'padding:2px;font-size:12px;text-align:right;margin:3px;'//基本样式 }, layoutConfig : { columns : 5 //表格每行生成5列 }, url : 'action!save.action', items : [{//表格第一行开始 html : '    ', colspan : 2 //跨2列 }, { html : '招聘企业：' }, combo, { html : ' ' }, {//表格第二行开始 html : '    ', colspan : 2 }, { html : '参会家数：' }, new Ext.form.NumberField({ name : 'ctn.joinNum', fieldLabel : '参会家数', allowBlank : false, emptyText : MESSAGE.empty_input, maxValue : 1000, // blankText : '参会家数不能为空', // msgTarget : 'under', allowNegative : false, allowDecimals : false, width : 60 }), { html : ' ' }, {//表格第三行开始 html : '    ', colspan : 2 }, { html : '参会日期：' }, new Ext.form.DateField({ fieldLabel : MESSAGE.joinDate, emptyText : MESSAGE.empty_select, labelWidth : 100, readOnly : true, allowBlank : false, value : new Date(), format : 'Y-m-d', disabledDays : [1, 2, 5], name : 'ctn.joinDate', id : 'joinDate' }),{ html : ' ' } , {//表格第四行开始，为一个空白行，为了将以上几个控件与按钮隔开 html : ' ', colspan : 5 //占用5列，即这行表现为空白行 }, {//表格第五行开始。按钮行 html : '           ', colspan : 3 }, new Ext.Button({//提交按钮 align : 'right', text : MESSAGE.submit, handler : function() { if (!addForm.getForm().isValid()) { return;//表单未通过验证，返回 } addForm.getForm().submit({ success : function(form, action) { var msg = action.result.msg;//取得返回消息 var id = action.result.id; if (msg == '1') { Ext.Msg.alert(MESSAGE.msg, '成功录入！'); addForm.getForm().reset();//重置表单 queryHandler();//处理查询 addWin.hide();//隐藏窗口 } else if (msg == '2') { Ext.MessageBox.confirm( MESSAGE.empty_select, '数据已存在，是否修改？', function(btn) { if (btn == 'yes') {//选择 是 addForm.getForm().id = id; addForm.getForm().submit({//提交修改的数据 url : 'action!updateCount.action', params : { 'ctn.id' : id }, success : function( form, action) { var msg2 = action.result.msg; if (msg2 == '1') { Ext.Msg .alert( MESSAGE.msg, '修改成功！'); queryHandler(); addWin.hide(); } else { Ext.Msg .alert( MESSAGE.msg, '修改失败！'); } }, failure : function() { Ext.Msg .alert( MESSAGE.msg, MESSAGE.connect_error); } }); } }) } else { Ext.Msg.alert(MESSAGE.msg, '录入失败！'); } }, failure : function(form, action) { if (action.failureType == Ext.form.Action.SERVER_INVALID) { Ext.Msg.alert(MESSAGE.error, MESSAGE.server_error); } else { Ext.Msg.alert(MESSAGE.error, MESSAGE.connect_error); } } }) } }), new Ext.Button({//关闭按钮 text : MESSAGE.close, handler : function() { addWin.hide(); } })] })