当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Ext 表单布局实例代码

Javascript
Mootools 1.2教程 排序类和方法简介
Mootools 1.2 手风琴(Accordion)教程
Mootools 1.2教程 类(一)
Mootools 1.2教程 Tooltips
Mootools 1.2教程 选项卡效果(Tabs)
Mootools 1.2教程(21):类(二)
Mootools 1.2教程 同时进行多个形变动画
Mootools 1.2教程 滑动效果(Slide)
不安全的常用的js写法
javascript 检测浏览器类型和版本的代码
javascript 弹出层居中效果的制作
javascript 遮照层效果
Javascript createElement和innerHTML增加页面元素的性能对比
颜色快速采集器javascript代码
var与Javascript变量隐式声明
javascript 面向对象编程 万物皆对象
jQuery 事件队列调整方法
JavaScript switch case 的用法实例[范围]
控制input的CSS但不影响CheckBox以及Radio的样式
ext 同步和异步示例代码

Javascript 中的 Ext 表单布局实例代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 490 ::
收藏到网摘: n/a

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