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 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
Angular的事件和表单详解
Dec 26 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
详解Angular路由之路由守卫
May 10 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python中获取对象信息的方法
2015/04/27 Python
深入理解Django的自定义过滤器
2017/10/17 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
校友会欢迎辞
2014/01/13 职场文书
平安校园建设方案
2014/05/02 职场文书
国际金融专业自荐信
2014/07/05 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
捐书活动倡议书
2015/04/27 职场文书
五年级数学教学反思
2016/02/16 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript
Python实现聚类K-means算法详解
2022/07/15 Python