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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
js实现微信聊天效果
Aug 09 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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
PHP守护进程实例
2015/03/06 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
django如何实现视图重定向
2019/07/24 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
Python 发送邮件方法总结
2020/08/10 Python
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
平面设计师的工作职责
2013/11/21 职场文书
上学路上观后感
2015/06/16 职场文书
安全教育片观后感
2015/06/17 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
浅谈克隆 JavaScript
2021/11/02 Javascript