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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
Javascript Objects详解
Sep 04 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
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
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
asp批量修改记录的代码
2008/06/25 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
javascript中Function类型详解
2015/04/28 Javascript
javascript实现动态标签云
2015/10/16 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
Python函数嵌套实例
2014/09/23 Python
python操作gmail实例
2015/01/14 Python
Python创建xml的方法
2015/03/10 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
用python对excel查重
2020/12/07 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
美国眼镜网站:LensCrafters
2020/01/19 全球购物
运动会100米解说词
2014/01/23 职场文书
债务纠纷起诉书
2015/05/20 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js