复制代码 代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = 'under'; //第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有： var tdate = new Ext.form.DateField({ fieldLabel: '日期', emptyText: '请选择日期', format: 'Y-m-d', disabledDays: [0, 7] }); var txt = new Ext.form.TextField({ fieldLabel: '请输入姓名', allowBlank: false, emptyText: '空', maxLength: 50, minLength: 10, bodyStyle: 'padding-left:5px', anchor: '90%'//给错误提示留下10的空间, }); var htmlEdt=new Ext.form.HtmlEditor({ fieldLabel:'在线编辑器', enableAlignments:true, enableColors:true, enableFont:true, enableFontSize:true, enableFormat:true, enableLinks:true, enableLists:true, enableSourceEdit:true }); var txt2 = new Ext.form.TextField({ fieldLabel: '请输入姓名', allowBlank: false, emptyText: '空', maxLength: 50, minLength: 10, bodyStyle: 'padding-left:5px', anchor: '90%' //给错误提示留下10的空间 }); var frm1 = new Ext.form.FormPanel({ labelAlign: 'right', labelWidth: 100,//注意修改标题的宽度 title: 'form1', frame: true, width: 700, url: 'sender/data.aspx', items: [{ layout: 'column',//正点的地方来了表示下一曾items都是按列"Column"排序 items: [{ columnWidth: .5, layout: 'form',//第一列里面内容就是form排序了,从上到下 items: [txt2] }, { columnWidth: .5, layout: 'form',//第二列里面内容就是form排序了,从上到下 items: [txt, tdate] }] }, htmlEdt] }); frm1.render("frm"); });

　　推荐阅读

　　jQuery select的操作实现代码

//改變時的事件 复制代码 代码如下:$("#testSelect").change(function(){ //事件發生 jQuery('option:selected', this).each(function(){ //印出選到多個值 alert(this.value); }); }); //印出選到的項目 复制代码>>>详细阅读

本文标题：Ext 表单布局实例代码

地址：http://www.17bianji.com/kaifa2/JS/28752.html

 1/2    1