<!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=UTF-8">
<title>添加人员</title>
<script src="ext-3.0.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.0.0/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onReady(function(){
var _window=new Ext.Window({
title:"添加人员",
width: 500,
height: 350,
plain:true,
labelWidth:59,
defaultType:"textfield",
layout:"form",
buttonAlign:"center",
items:[
{
xtype:"panel",
layout:"column",
baseCls:"x-plain",
style:"padding:5px",
items:[
{
columnWidth:.5,
defaultType:"textfield",
layout:"form",
baseCls:"x-plain",
defaults:{width:160},
labelWidth:55,
items:[{
fieldLabel:"姓名"
},
{
fieldLabel:"密码"
},{
fieldLabel:"性别",
readOnly:true
},{
xtype:"datefield",
format:"Y-m-d",
value:new Date(),
readOnly:true,
fieldLabel:"日期" ,
listeners:{
"blur":function(_df){
var d=_df.ownerCt.findByType("textfield")[2];
d.setValue(new Date().getFullYear()-_df.getValue().getFullYear());
}
}
},{
fieldLabel:"联系电话"
},{
fieldLabel:"性别",
xtype:"combo",
displayField:"sex",
mode:"local",
readOnly:true,
triggerAction:"all",
value:"男",
store:new Ext.data.SimpleStore({
fields:["sex","b"],
data:[["男","a"],["女","b"]]
})
}]
},
{
columnWidth:.5,
defaultType:"textfield",
layout:"form",
labelWidth:55,
baseCls:"x-plain",
items:[{
fieldLabel:"个人照片",
inputType:"image",
width:170,
height:160
}]
}
]
},{
xtype:"panel",
layout:"form",
baseCls:"x-plain",
defaultType:"textfield",
style:"padding:5px",
labelWidth:55,
items:[
{
fieldLabel:"身份证号",
width:400
},
{
fieldLabel:"具体地址",
width:400
},
{
xtype:"panel",
layout:"column",
baseCls:"x-plain",
items:[
{
columnWidth:.5,
layout:"form",
defaultType:"textfield",
baseCls:"x-plain",
labelWidth:55,
items:[
{
fieldLabel:"职务",
xtype:"combo",
readOnly:true,
triggerAction: 'all',
mode: 'local',
store: new Ext.data.SimpleStore({
fields: [
'job'
],
data: [["程序员"], ["高级程序员"]]
}),
displayField: 'job'
}
]
},
{
columnWidth:.5,
baseCls:"x-plain",
layout:"column",
items:[
{
xtype:"panel",
columnWidth:.3,
baseCls:"x-plain",
items:[
{
xtype:"button",
text:"添加职务"
}
]
},
{
xtype:"panel",
baseCls:"x-plain",
columnWidth:.3,
items:[
{
xtype:"button",
text:"修改职务"
}
]
},
{
xtype:"panel",
baseCls:"x-plain",
columnWidth:.4,
items:[
{
xtype:"button",
text:"删除职务"
}
]
}
]
}
]
}
]
}
],
showLock:false,
listeners:{
"show":function(_window){
if(!_window["showLock"]){
_window.findByType("textfield")[6].getEl().dom.src = "1.gif" ;
_window["showLock"] = true;
}
}
},
buttons:[{
text:"确定"
},{
text:"取消"
}]
}
).show();
}) ;
</script>
</head>
<body>
</body>
</html>
分享到：
相关推荐
ExtJS入门实例、包含各种详细代码，非常适合初学者学习
深入浅出ExtJS 第二版第二章最后一个实例出不来求解释
// 移除第一个标签页 ``` 3. 配置标签页： `tabPanel` 的每个标签页都是一个单独的组件，可以有自己的配置项，比如图标、关闭按钮等： ```javascript { title: '权限管理', iconCls: 'icon-rights', // 图标...
这个"ExtJs java实例 （个人/家庭收支管理系统）第2版加强版"是一个基于ExtJs开发的系统，旨在帮助个人或家庭管理他们的财务收支情况。通过增加统计和分析导出数据的功能，此系统不仅提供了基本的收支记录，还具备了...
ExtJS桌面应用实例（个人/家庭收支系统）第1部分 在本文中，我们将深入探讨如何使用ExtJS桌面环境（ExtJS Desktop）构建一个个人或家庭收支管理系统。ExtJS Desktop是一种高级JavaScript框架，它允许开发者将Web...
- **创建应用**：定义一个 JavaScript 文件，创建 `Ext.Application` 实例，设置应用名称、加载遮罩等属性，并在 `launch` 方法中编写应用的启动逻辑，例如显示一个简单的弹出框。 ```javascript var App = new Ext...
ExtJS桌面应用实例（个人/家庭收支系统）第二部分，主要涵盖了使用ExtJS构建桌面级应用程序的技术要点，以及如何设计和实现一个简单的个人或家庭财务管理软件。ExtJS是一款强大的JavaScript库，它允许开发者创建功能...
创建一个TreeGrid的第一步是定义模型（Model）。模型定义了数据的字段及其类型，这对于解析和展示数据至关重要。例如，你可以创建一个名为`ReportModel`的模型，包含如ID、名称、日期等字段。 ```javascript Ext....
本实例将探讨如何利用EXTJS实现数据网格到Excel的导出功能。 在EXTJS中，数据网格（Grid）是一种常用的数据展示组件，它能够以表格形式展示大量数据，并支持排序、分页、过滤等多种操作。要将GRID中的数据导出为...
首先，获取ExtJS库文件是开始的第一步。官方提供了不同版本的下载，本教程推荐使用2.0版本。下载并解压后，开发者将获得一系列关键目录： - **adapter**：此目录包含用于映射第三方底层库到ExtJS标准接口的文件，...
第一个参数是进度值（0-1之间），第二个参数是可选的显示文本。 3. **异步更新**： 在长时间运行的任务中，进度条通常与异步操作配合使用。你可以使用`wait`方法开启一个定时器，周期性地更新进度条，直到任务...
这个是《ExtJS源码分析与开发实例宝典》高清版本，是本人花钱买来的，所以分享给大家，希望大家喜欢，由于本人一次只能上传60M大的文件(试了好多次，每次都上传到99%就不动了，还以为csdn在后台审核内容呢，害我电脑...
本入门实例主要探讨的是如何将ExtJS与Struts进行整合，以构建一个图书管理系统的前端和后端。这样的整合使得开发者能够利用ExtJS的前端优势，提供美观且交互性强的用户界面，同时利用Struts在服务器端进行数据处理和...
这通常是学习ExtJS的第一步，理解如何创建组件，如何组织它们的布局，以及如何响应用户的交互。 2. **进阶篇**：深入探讨高级组件，如表格（Grid）、树形视图（Tree）、图表（Charts）等。这些组件在实际应用中非常...
第一讲.ExtJs初识及其环境搭建 第二讲.开始ExtJs梦想之旅 第三讲.ExtJS工具栏、菜单栏 第四讲.ExtJS最常用的表单之textfield控件 第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第六讲.ExtJs最常用表单...
这个是《ExtJS源码分析与开发实例宝典》高清版本，是本人花钱买来的，所以分享给大家，希望大家喜欢，由于本人一次只能上传60M大的文件(试了好多次，每次都上传到99%就不动了，还以为csdn在后台审核内容呢，害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本，是本人花钱买来的，所以分享给大家，希望大家喜欢，由于本人一次只能上传60M大的文件(试了好多次，每次都上传到99%就不动了，还以为csdn在后台审核内容呢，害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本，是本人花钱买来的，所以分享给大家，希望大家喜欢，由于本人一次只能上传60M大的文件(试了好多次，每次都上传到99%就不动了，还以为csdn在后台审核内容呢，害我电脑...
Ext+JS源码分析与开发实例宝典 是extjs3.0的学习书 书得内容很不错。深入解析extjs 资源是pdf文档. 本人自己还做了pdf的完整书签目录，便于方便和阅读. 文档比较大,一共压缩成... 就第一个需要2分。其他的都不需要分.
开始ExtJS之旅的第一步是要获得开发包，可以从官方网站www.ExtJS.com下载，以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download，下载成功后的开发包是ExtJS- 2.0.2.zip，有6.08MB大。不过不用担心，这...