Ext 表单布局实例代码


Posted in Javascript onApril 30, 2009
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 相关文章推荐
prototype 1.5 & scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
Z-Blog中用到的js代码
Mar 15 Javascript
通过javascript设置css属性的代码
Dec 28 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
js 方法实现返回多个数据的代码
Apr 30 #Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 #Javascript
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 #Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 #Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 #Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 #Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 #Javascript
You might like
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php获取错误信息的方法
2015/07/17 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
js获取域名的方法
2015/01/27 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python 爬取疫情数据的源码
2020/02/09 Python
python如何使用代码运行助手
2020/07/03 Python
python中reload重载实例用法
2020/12/15 Python
实习教师自我鉴定
2013/12/09 职场文书
关于赌博的检讨书
2014/01/08 职场文书
公务员诚信承诺书
2014/05/26 职场文书
销售类求职信
2014/06/13 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
大学生团员个人总结
2015/02/14 职场文书
自我推荐信怎么写
2015/03/24 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
Django路由层如何获取正确的url
2021/07/15 Python