Ext 复杂Form布局
<HTML> <HEAD> <TITLE> New Document </TITLE> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css"/> <script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../../ext-all.js"></script> <SCRIPT LANGUAGE="JavaScript"> <!-- /**//* * msgTarget的几种配置 * qtip 当光标停留在域上时显示一个快速提示 title 显示一个默认的浏览标题属性弹出 under 增加一个空div在域下面并显示错误信息 side 增加一个错误图标在域右边,鼠标悬停时显示错误信息 */ Ext.onReady(function() { //初始化快速提示 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'qtip'; var bd = Ext.getBody(); bd.createChild({ tag : 'h3', html: 'Form中的复杂编辑器' }); var form = new Ext.FormPanel({ labelAlign : 'top', title : 'Inner Tabs', bodyStyle : 'padding : 5px', width : 600, frame : true, onSubmit: Ext.emptyFn, submit: function() { this.getForm().getEl().dom.submit(); }, items : [ { layout : 'column', border : false, items : [ { columnWidth : .5, layout : 'form', border : false, items:[{ xtype : 'textfield', allowBlank : false, blankText : '名字不能为空', fieldLabel : '名', name : 'first', anchor : '95%' //上级容器宽度的百分比,即此控件的宽度 }, { xtype : 'textfield', minLength : 3, maxLength : 5, minLengthText : '公司长度不能小于3', maxLengthText : '公司长度不能大于5', fieldLabel : '公司', name : 'company', anchor : '95%' }] } ] }, { columnWidth : .5, layout : 'form', border : false, items : [ { xtype : 'textfield', fieldLabel : '地址', maxLength : 50, maxLengthText : '地址长度不能超过50个字符', name : 'address', anchor : '95%' }, { xtype : 'textfield', fieldLabel : '邮箱', name : 'email', vtype : 'email', vtypeText : '邮箱格式不正确', anchor : '95%' } ] }, { xtype : 'tabpanel', plain : true, //不用背景图片 activeTab : 0, height : 235, defaults : {bodyStyle : 'padding : 10 px'}, items:[ { title : '个人信息', layout : 'form', defaults : {width : 230}, defaultType : 'textfield', items : [ { fieldLabel : '名字', name : 'first', allowBlank : false, value : '天使' }, { fieldLabel : '编辑器', name : 'editor', xtype : 'htmleditor' } ] }, { title : '电话号码', layout : 'form', defaults:{width : 230}, defaultType : 'textfield', items :[ { fieldLabel : '宅电', name : 'home', value : '(888) 555-1212' }, { fieldLabel : '公司电话', name : 'mobile' }, { fieldLabel : '传真', name : 'fax' } ] }, { cls : 'x-plain', title : 'Html编辑器', layout : 'fit', items : { xtype : 'htmleditor', //html复杂编辑器 id : 'bio2', fieldLabel : 'Biogarphy' } }, { title : '弹出式编辑器', layout : 'form', items: [ { xtype : 'button', text : '弹出式html编辑器', handler : function() { new Ext.form.HtmlEditor( { renderTo: 'editor', //Ext.getBody(), width: 300, draggable : true, height: 300, x : 200, y :200, frame: true, layout: 'fit' }); } } ] } ] } ], buttons : [ { text : '保存', handler : function() { if(form.getForm().isValid()) { form.getForm().getEl().dom.action = 'http://www.blogjava.net/supercrsky'; form.getForm().getEl().dom.submit(); } } }, { text : '重置', handler : function() { form.getForm().getEl().dom.reset(); } } ] }); form.render(document.body); }); //--> </SCRIPT> </HEAD> <BODY> <div id='editor'></div> </BODY></HTML>