aria-form.js

Ext.require([
'Ext.form.*',
'Ext.layout.container.Column',
'Ext.tab.*'
]); Ext.onReady(function() { Ext.QuickTips.init(); var bd = Ext.getBody(); /*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'}); var simple = Ext.create('Ext.form.Panel', {
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
}, items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
fieldLabel: 'Qualified',
name: 'qualified',
xtype: 'checkbox'
}, {
fieldLabel: 'Which',
xtype: 'radiogroup',
items: [{
boxLabel: 'This',
name: 'which'
}, {
boxLabel: 'That',
name: 'which'
}]
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}], buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
}); simple.render(document.body); /*
* ================ Form 2 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'}); var fsf = Ext.create('Ext.form.Panel', {
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaults: {
anchor: '100%'
}, items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
defaultType: 'textfield',
collapsed: true,
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}], buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
}); fsf.render(document.body); /*
* ================ Form 3 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'}); var top = Ext.create('Ext.form.Panel', {
frame:true,
title: 'Multi Column, Nested Layouts and Anchoring',
bodyStyle:'padding:5px 5px 0',
width: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
}, items: [{
xtype: 'container',
anchor: '100%',
layout:'column',
items:[{
xtype: 'container',
columnWidth:.5,
layout: 'anchor',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'96%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'96%'
}]
},{
xtype: 'container',
columnWidth:.5,
layout: 'anchor',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'100%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'100%'
}]
}]
}, {
xtype: 'htmleditor',
name: 'bio',
fieldLabel: 'Biography',
height: 200,
anchor: '100%'
}], buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
}); top.render(document.body); /*
* ================ Form 4 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'}); var tabs = Ext.create('Ext.form.Panel', {
width: 350,
border: false,
bodyBorder: false,
fieldDefaults: {
labelWidth: 75,
msgTarget: 'side'
},
defaults: {
anchor: '100%'
}, items: {
xtype:'tabpanel',
activeTab: 0,
defaults:{
bodyStyle:'padding:10px'
}, items:[{
title:'Personal Details',
defaultType: 'textfield', items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Ed'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Spencer'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
defaultType: 'textfield', items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
}, buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
}); tabs.render(document.body); /*
* ================ Form 5 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'}); var tab2 = Ext.create('Ext.form.Panel', {
title: 'Inner Tabs',
bodyStyle:'padding:5px',
width: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
anchor: '100%'
}, items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
defaults: {width: 230},
defaultType: 'textfield', items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jamie'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Avins'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
defaults: {width: 230},
defaultType: 'textfield', items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls: 'x-plain',
title: 'Biography',
layout: 'fit',
items: {
xtype: 'htmleditor',
name: 'bio2',
fieldLabel: 'Biography'
}
}]
}], buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
}); tab2.render(document.body);
});

aria-form.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ARIA compliant Forms built with JavaScript</title> <!-- ExtJS -->
<link href="../resources/css/ext-all.css" rel="stylesheet"
type="text/css" />
<script src="../ext-all.js" type="text/javascript"></script> <!-- Example -->
<script type="text/javascript" src="aria-form.js"></script> </head>
<body> <hr color="blue" align="left">
<h1>
ARIA compliant Forms built with JavaScript
</h1> <p>
These forms do not do anything and have very little validation. They
solely demonstrate how you can use Ext Forms to build and layout ARIA
compliant forms on the fly.
</p> <p>
The js is not minified so it is readable. See
<a href="aria-form.js">aria-form.js</a>.
</p> </body>
</html>

运行效果:

一个简单的EXTJS案例的更多相关文章

  1. 如何用DAX实现查看每个月中不同类别排名前一位,以及一个简单的svg案例

    现在给大家带来的是如何用DAX实现查看每个月中不同类别的排名前一位,最终完成效果如下!!! 首先我们需要两张简单的表 基数表 和类别表 当我们创建好表之后,我们再创建一个表格,然后我们将类别表里的列值 ...

  2. 一个简单的ExtJS搜索建议框

    封装的是一个Ext4.2的组件,继承并兼容于Ext的ComboBox. 实现原理非常easy,在 combo 中监听 keyup 事件就可以. 搜索建议的Combo.基本上全然兼容, 使用方式与Com ...

  3. 一个简单的Extjs继承实现

    function extend(sub,sup){ //目地:实现只继承父类的原型对象 //1.用一个空函数据中转,目地进行中转 var F = new Function(); //2.实现空函数的的 ...

  4. day04 一个简单的代码优化案例

    import random punches = ['石头','剪刀','布'] computer_choice = random.choice(punches) user_choice = input ...

  5. Struts—自定义一个简单的mystruct

    传统mvc开发总结: 1. 跳转代码写死,不灵活 2. 每次都去写servlet,web.xml中配置servlet! (配置目的: 请求, Servlet处理类) 一个简单的struct案例,描述如 ...

  6. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

  7. 一个简单的python爬虫程序

    python|网络爬虫 概述 这是一个简单的python爬虫程序,仅用作技术学习与交流,主要是通过一个简单的实际案例来对网络爬虫有个基础的认识. 什么是网络爬虫 简单的讲,网络爬虫就是模拟人访问web ...

  8. 3小时搞定一个简单的MIS系统案例Northwind,有视频、有源代码下载、有真相

    一.瞎扯框架.架构 楼主自从1998年从C语言.MASM.Foxbase开始学计算机开始接触这个行当16年以来,2001年干第一份与程序.软件.然后是各种屌的东西开始,差不多干了13年了,这13年来, ...

  9. 从一个简单案例上手Spring MVC,同时分析Spring MVC面试问题

    很多公司都会用Spring MVC,而且初级程序员在面试时,一定会被问到这方面的问题,所以这里我们来通过一个简单的案例来分析Spring MVC,事实上,我们在培训中就用这个举例,很多零基础的程序员能 ...

随机推荐

  1. Linux常用命令2--用户问题、文件的打包压缩

    Linux常用命令 如何进行用户和群组的创建和更改 [1]groupadd:用于创建新的群组. 语法:groupadd [-option] 用户名:其常用参数有:-g groupadd -g 555 ...

  2. 让Sqlite脱离VC++ Runtime独立执行

    前段时间在开发OrayTalk(傲瑞通企业即时通信系统)的聊天记录模块时用到了Sqlite,这是我第一次接触和使用Sqlite,整体感觉还是很不错的.这里把我使用Sqlite的经验跟大家分享一下. 一 ...

  3. Microsoft dotnetConf 2015

    Microsoft dotnetConf 2015 一些整理   dotnetConf 2015 直播计划: 第一天 (10 个主讲) - .NET Product Teams 主讲人为 .NET 产 ...

  4. 记录近期小改K-Means至MapReduce上的心得

    背景: 在所有聚类算法中KMeans算是表面上最简单的一种,没有过多恼人的古希腊符号公式,没有过分繁杂的公式嵌套.对于一个初学矩阵或者仅有向量概念的非专业人士的来说,不可不畏是一把踹门利器.这个世界上 ...

  5. PhpStorm 超强语言模板的支持

    原文:[转]PhpStorm 超强语言模板的支持 最近遇到一些PhpStorm编程的问题: 在使用Zen Coding插件时,PHPStorm不像Notepad++那样随便使用.PHPStorm只有在 ...

  6. python向mysql中存储JSON及Nodejs取出

    虽然把JSON数据存入mysql也是比较蛋疼,但是相比使用Nodejs嵌套处理多个mysql查询并拼接返回数据也算是没mongo时的一个折中方案了. 我使用python拼接了一个json格式的字符串, ...

  7. PHP 9: 表达式

    原文:PHP 9: 表达式 本章介绍PHP的表达式.PHP的表达式其实和其他语言没有什么区别.普通的赋值是表达式,函数也是表达式,通过函数赋值也是.三元条件运算符也是,即: $first ? $sec ...

  8. Url.Content

    Url.Content了,Url是ViewPage的一个对象,它最常用的一个方法就是Content,它的功能是返回某个文件的路径.一般情况下,在使用了ASP.NET MVC后,目录结构变得有点诡异,像 ...

  9. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  10. Oracle中注意用户的访问权限

    新增表.序列.存储过程等,要注意用户(例如System)的权限.如果在增删改查过程中出现数据库读写权限的报错,则在建表(或者序列.存储过程等)时,在脚本前面加 GRANT CREATE TABLE T ...