也不算是原创，因为这个例子的原型在网上就有，是DOJOCHINA 的EXT视频中的一个小例子，只不过我做了点布局的改动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>人员注册</title>
<script type="text/javascript" src="../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../EXTJS/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Window({
title:"添加人员",
width:500,
closeAction:"hide",
height:350,
resizable:false,
plain:true,
//defaults{anchor:"95%"},
items:[{
layout:"column",
baseCls:"x-plain",
style:"padding:5px",
items:[{
columnWidth:.5,
layout:"form",
baseCls:"x-plain",
labelWidth:55,
defaults:{xtype:"textfield" , width:170},
items:[{
fieldLabel:"姓名"
},{
fieldLabel:"年龄",
value:"27",
readOnly:true
},{
xtype:"datefield",
format:"Y-m-d",
readOnly:true,
value:"1982-08-22",
fieldLabel:"出生日期",
listeners:{
"change":function(_df){
var _age = _df.ownerCt.findByType("textfield")[1];
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());
}
}
},{
fieldLabel:"联系电话"
},{
fieldLabel:"手机号码"
},{
fieldLabel:"电子邮件"
},{
fieldLabel:"性别",
xtype:"combo",
readOnly:true,
triggerAction:"all",
mode:"local",
value:"男",
displayField:"sex",
//数据存储器
store:new Ext.data.SimpleStore({
fields:["sex"],
data:[["男"] , ["女"]]
})
}]
},{
columnWidth:.5,
layout:"form",
baseCls:"x-plain",
labelWidth:55,
items:{
xtype:"textfield",
fieldLabel:"个人照片",
inputType:"image",
width:168,
height:177
}
}]
},{
layout:"form",
defaults:{xtype:"textfield" , width:407},
labelWidth:55,
baseCls:"x-plain",
style:"padding:5px",
items:[{
fieldLabel:"具体地址"
},{
fieldLabel:"身份证号"
},{
fieldLabel:"职位",
width:170
}]
}],
buttons:[{
text:"确定"
},{
text:"取消"
}],
showLock:false,
buttonAlign:"center",
listeners:{
"show":function(_window){
if(!_window["showLock"]){
_window.findByType("textfield")[5].getEl().dom.src = "layout.jpg";
}
}
}
}).show();
});
</script>
</head>
<body>
</body>
</html>
今天太晚了，下次加注释
分享到：
相关推荐
EXTJS WebUi标签库使用说明 例子等
5.3.3. 下一个例子是进度条 5.3.4. 动画效果，跳出来，缩回去 5.4. 让弹出窗口，显示我们想要的东东，比如表格 5.4.1. 2.0的弹出表格哦 5.4.2. 向2.0的window里加表格 5.4.3. 1.x里的叫做BasicDialog 5.4.4. 把form...
所需要的文件 ，此例子需要几个css文件 jquery.dimensions.js ui.mouse.js ui.resizable.js 用法： $(document).ready(function(){ $("#example").resizable(); }); CSS文件：...
5.3.3. 下一个例子是进度条 5.3.4. 动画效果，跳出来，缩回去 5.4. 让弹出窗口，显示我们想要的东东，比如表格 5.4.1. 2.0的弹出表格哦 5.4.2. 向window里加表格 5.4.3. 把form放进对话框里 6. 奔腾吧！让不同的...
5.3.3. 下一个例子是进度条 5.3.4. 动画效果，跳出来，缩回去 5.4. 让弹出窗口，显示我们想要的东东，比如表格 5.4.1. 2.0的弹出表格哦 5.4.2. 向2.0的window里加表格 5.4.3. 1.x里的叫做BasicDialog 5.4.4. ...
本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom。 目 录 EXT 中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始！ 4 Element：...
Extjs4的demo 很不错的例子
2.9 为本书示例准备一个模板 / 60 2.10 本章小结 / 61 第3章 调试工具及技巧 / 62 3.1 使用firebug进行调试 / 62 3.2 在ie中调试 / 76 3.2.1 使用debugbar和companion.js调试 / 76 3.2.2 使用ietester测试 / ...
列模型（Column Model） 52 Grid组件的简易分页 53 Grid数据 53 怎么做一个分页的Grid 54 分页栏Toolbar 55 EXT Menu组件 55 创建简易菜单 56 各种Item的类型 57 Item属性 57 在UI中摆放...
怎么做一个分页的Grid 54 分页栏Toolbar 55 EXT Menu组件 55 创建简易菜单 56 各种Item的类型 57 Item属性 57 在UI中摆放菜单 58 Menu的分配方式： 58 练一练 60 动态添加菜单按钮到Toolbar 61 更方便的是 61 下一步...
5.3.3. 下一个例子是进度条 5.3.4. 动画效果，跳出来，缩回去 5.4. 更进一步撒。 6. 奔腾吧！让不同的浏览器里显示一样的布局。 6.1. 有了它，我们就可以摆脱那些自称ui设计师的人了。 6.2. 关于...
所需要的文件 ，此例子需要几个css文件 jquery.dimensions.js ui.mouse.js ui.resizable.js 用法： $(document).ready(function(){ $("#example").resizable(); }); CSS文件：...
列模型（Column Model） 52 Grid组件的简易分页 53 Grid数据 53 怎么做一个分页的Grid 54 分页栏Toolbar 55 EXT Menu组件 55 创建简易菜单 56 各种Item的类型 57 Item属性 57 在UI中摆放...
放大镜效果(magnifier)、阴影效果(shadow) 第一部分：鼠标交互 1.1 Draggables:拖拽所需文件： ui.mouse.js ui.draggable.js ui.draggable.ext.js 用法：文件载入后，可以拖拽class = "block"的层 $(document).ready...
增加菜单框架ext实现，类路径调整 1.0.7 增加http工具类，demo例子 1.0.8 socket工具类，权限组件,菜单组件，jdbc分页支持多种数据库,ant路径工具类,增加jquery easyUI 1.0.9 版本管理,服务根路径工具类,文件上传...
在微服务结合前端AJAX越加普遍的今天，以一种没有后端的web开发理念，极大缩小了开发成本，此博客结合这个概念做了一个数据服务原型。 主要有如下特色： 用户只需以JSON格式定义表结构，以所见即所得的方式快速创建...