Ext 表单布局实例代码

复制代码 代码如下:

  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");

  });