Ext 表单布局实例代码_Javascript教程-查字典教程网
Ext 表单布局实例代码
Ext 表单布局实例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:Ext.onReady(function(){Ext.QuickTips.init();//第一句的目的是为需要的元件提供...

复制代码 代码如下:

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

});

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类