ExtJs学习笔记(19)_复杂Form示例
时间:2022-04-24
本文章向大家介绍ExtJs学习笔记(19)_复杂Form示例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Form布局在所有布局中是最为复杂,使用频度最广,同时也是最难掌握的,下面给出几个示例
1.登录UI界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<title>Form 布局应用_Login登录框</title>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var login = new Ext.FormPanel({
renderTo: Ext.getBody(),
labelAlign: 'top',//标签排在最上面
frame: true,
id: 'login',
bodyStyle: 'padding:5px 5px 0',
items: [{
layout: 'column', //把整个空间划分成两列
items: [{
html: '左侧登录Logo区', //左边列放一个logo
columnWidth: 0.5
}, {
columnWidth: 0.5,
layout: 'form', //右边列再分成上下两行
items: [{
xtype: 'textfield',
fieldLabel: '用户名', //第一行是用户名输入框
allowBlank: false,
blankText: "请输入用户名!",
name: 'name',
id: 'name',
anchor: '80%'
}, {
xtype: 'textfield',
fieldLabel: '密码', //第二行是密码输入框
allowBlank: false,
blankText: "请输入密码!",
name: 'pass',
id: 'pass',
anchor: '80%',
inputType: 'password'
}]
}]
}],
buttons: [{ text: '登录', handler: function() {
var name = Ext.get("name");
var pass = Ext.get("pass");
if (name.dom.value == "") {
Ext.MessageBox.alert("提示", "请输入登录名");
name.highlight();
name.focus();
return false;
}
if (pass.dom.value == "") {
Ext.MessageBox.alert("提示","请输入密码");
pass.highlight();
pass.focus();
return false;
}
}
}, { text: '重置', handler: function() {
Ext.get("name").dom.value = "";
Ext.get("pass").dom.value = "";
} }]
});
login.hide();
var wLogin;
var aLogin = Ext.get("aLogin");
aLogin.on("click", function() {
if (!wLogin) {
wLogin = new Ext.Window({
title: "用户登录",
width: 400,
plain: true,
modal: true,
height: 175,
resizable:false,
items: [login],
closeAction: "hide"
});
}
login.show();
wLogin.show();
})
});
</script>
</body>
<a href="#" id="aLogin">用户登录</a>
</html>
2.加入其它不同类型的输入组件后
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<title>Form 布局应用_Login登录框</title>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var login = new Ext.FormPanel({
renderTo: Ext.getBody(),
labelAlign: 'top', //标签排在最上面
frame: true,
id: 'login',
bodyStyle: 'padding:3px 3px 0',
items: [{
layout: 'column', //把整个空间划分成两列
items: [{
columnWidth: 0.5,
layout: 'form', //左边列分成三行(根据item个数来定的)
items: [{
xtype: 'textfield', //第一行,呢称
fieldLabel: "呢称",
allowBlank: false,
blankText: '请输入呢称!',
name: "nickname",
id: "nickname",
anchor: '80%'
}, {
xtype: 'textfield', //第二行,电子邮箱
fieldLabel: "电子邮箱",
allowBlank: false,
blankText: '请输入电子邮箱!',
vtype: "email",
name: "email",
id: "email",
anchor: '80%'
}, {
xtype: 'datefield',
fieldLabel: "出生日期", //第三行,出生日期
allowBlank: false,
name: "birthday",
id: "birthday",
anchor: '80%'
}]
}, {
columnWidth: 0.5,
layout: 'form', //左边列分成三行(根据item个数来定的)
items: [{
xtype: 'textfield',
fieldLabel: '用户名', //第一行是用户名输入框
allowBlank: false,
blankText: "请输入用户名!",
name: 'name',
id: 'name',
anchor: '80%'
}, {
xtype: 'textfield',
fieldLabel: '密码', //第二行是密码输入框
inputType: "password",
allowBlank: false,
blankText: "请输入密码!",
name: 'pass',
id: 'pass',
anchor: '80%',
inputType: 'password'
}, {
xtype: 'radiogroup',//第三行是爱好
fieldLabel: '爱好',
items: [{
xtype: "panel",
layout: "column", //也可以是table,实现多列布局
items: [{
width:55, //宽度为100px
xtype:"checkbox",
boxLabel: "足球", //显示在复选框右边的文字
name: ""
}, {
width:55,
xtype:"checkbox",
boxLabel: "篮球",
name: ""
}, {
width:55,
xtype:"checkbox",
boxLabel: "音乐",
name: ""
}]
}]
}]
}]
}],
buttons: [{ text: '登录', handler: function() {
var name = Ext.get("name");
var pass = Ext.get("pass");
if (name.dom.value == "") {
Ext.MessageBox.alert("提示", "请输入登录名");
name.highlight();
name.focus();
return false;
}
if (pass.dom.value == "") {
Ext.MessageBox.alert("提示", "请输入密码");
pass.highlight();
pass.focus();
return false;
}
}
}, { text: '重置', handler: function() {
Ext.get("name").dom.value = "";
Ext.get("pass").dom.value = "";
} }]
});
login.hide();
var wLogin;
var aLogin = Ext.get("aLogin");
aLogin.on("click", function() {
if (!wLogin) {
wLogin = new Ext.Window({
title: "用户登录",
width: 400,
height: 235,
plain: true,
modal: true,
resizable: false,
items: [login],
closeAction: "hide"
});
}
login.show();
wLogin.show();
})
});
</script>
</body>
<a href="#" id="aLogin">用户登录</a>
</html>
3.更加复杂的结构:
<script type="text/javascript">
Ext.onReady(function() {
var form = new Ext.FormPanel({
title: "复杂Form布局示例",
width: 640,
height: 400,
renderTo: Ext.getBody(),
labelWidth: 80,
labelAlign: "top",
frame: true,
items: [{
layout: "column",
items: [{
columnWidth: 0.5,
layout: "form",
items: {
xtype: "textfield",
fieldLabel: "A1",
anchor: "90%"
}
}, {
columnWidth: 0.5,
layout: "form",
items: {
xtype: "textfield",
fieldLabel: "A2",
anchor: "90%"
}
}]
}, { items: [{
layout: "column",
items: [{
columnWidth: 0.33,
layout: "form",
items: {
xtype: "datefield",
fieldLabel: "B1",
anchor: "90%"
}
}, {
columnWidth: 0.33,
layout: "form",
items: [{
xtype: "radiogroup",
fieldLabel: "B2",
columns: ["33%", "33%", "33%"],
items: [{ boxLabel: '我是', name: 'rb-auto', inputValue: 1 },
{ boxLabel: '一个', name: 'rb-auto', inputValue: 2, checked: true },
{ boxLabel: '好人', name: 'rb-auto', inputValue: 3}]
//下面也是一种解决办法,不管radiogroup或是下面的写法,都很难保证在所有浏览器下效果一致
// xtype: "panel",
// layout: "column",
// fieldLabel: "球类",
// isFormField: true,
// items: [{
// columnWidth: 0.33,
// xtype: "checkbox",
// boxLabel: "足球",
// name: "",
// anchor:"100%"
// }, {
// columnWidth:0.33,
// xtype:"checkbox",
// boxLabel:"蓝球",
// name:"",
// anchor: "100%"
// }, {
// columnWidth: 0.33,
// xtype: "checkbox",
// boxLabel: "乒乓球",
// name: "",
// anchor: "100%"
// }]
}]
}, {
columnWidth: 0.33,
layout: "form",
items: {
xtype: "textfield",
fieldLabel: "B3",
inputType: "password",
anchor: "90%"
}
}]
}]
}, {
xtype: "htmleditor",
fieldLabel: "详细内容",
height: 200,
anchor: "100%"
}]
, buttons: [{ text: "Save" }, {text:"cancel"}]
});
});
</script>
转载请注明来自"菩提树下的杨过"
技巧:1.先用
new Ext.FormPanel({items:[{...},{...},{...}...]})
类似的代码,确定整个form的行数,即items里{}的个数
2.每行如果要分列,再利用
{layout:"column",items:[{},{},{}...]}
以column布局,横向分切为N列,即items:[{},{},{}...]中{}的个数
3.每列中,如果要放输入项,再把每行相关列(其实就是单元格),采用form布局方式处理,并标明输入项,类似以下代码:
items: [{
columnWidth: 0.5,
layout: "form",
items: {
xtype:"textfield",
fieldLabel:"A1",
anchor:"90%"
}
}, {
columnWidth: 0.5,
html: "aaaaaaaaaaa"
}]
- 关于表联结方法(一)(r3笔记第57天)
- Go 语言读写 Excel 文档
- 关于索引的使用模式(r3笔记56天)
- 关于oracle中的半连接(r3笔记55天)
- 关于正则表达式第三篇(r3笔记第52天)
- 关于正则表达式第四篇(r3笔记第53天)
- 外部表简单总结(r3笔记第51天)
- 通过shell脚本监控sql执行频率(r3笔记第50天)
- 和Null有关的函数(r3笔记第48天)
- 关于查询转换的一些简单分析(二) (r3笔记第68天)
- 跨网络拷贝文件的简单实践(r3笔记第67天)
- 关于enq: TX - allocate ITL entry的问题分析(r3笔记第66天)
- Tensorflow学习:使用Tensorflow搭建深层网络分类器
- 关于interval partitioning(r3笔记65天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 分布式事物TCC
- docker环境搭建nexus私有maven私服
- mysql每天定时自动全库备份、灾备、docker
- wails Go+vue/angular/react编写桌面GUI客户端
- GIT仓库、源码管理服务器gitea的安装、htttps访问
- 微信小程序显示当前系统年月日时分秒
- 【每日一题】40. Combination Sum II
- nginx url自动301加斜杠
- 【剑指offer】47.求1+2+3+...+n
- 【剑指offer】48.不用加减乘除做加法
- Gradle 6.6 发布,引入配置缓存特性,大幅提升构建性能
- 61.Vue 结合webpack使用vue-router
- 拨云见日:揭开ORA-00600:[4193]的神秘面纱
- AUCell | 识别单细胞对“基因集”的响应
- 未来十年,机器学习工程师会消失吗?