也不算是原创，因为这个例子的原型在网上就有，是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>
今天太晚了，下次加注释
分享到：
相关推荐
例如，一个"小例子"可能展示如何创建一个基本的EXT应用，包含一个简单的窗口或者面板；另一个可能涉及数据网格的使用，展示如何加载和显示数据；还有可能涵盖EXT的布局管理，教授如何在容器中排列组件。 描述中的...
在"EXT+DWR的小例子"中，我们可以假设这是一个展示如何将EXT的UI组件与DWR的远程调用相结合的示例项目。开发者可能创建了一个EXT的界面，其中包含了一些交互元素，如按钮、表格等，当用户在前端进行操作（如点击按钮...
Ext 2.2 是一个基于 ...总之，"Ext 2.2 开发参考小例子"是一个宝贵的资源，涵盖了Ext JS 2.2的主要特性和用法。通过深入学习和实践这些例子，开发者能够更好地掌握这个强大的前端框架，从而提高开发效率和应用质量。
EXTJS是一种基于...这个“EXT学习小例子”项目为初学者提供了一个实践EXTJS基本功能的平台。通过研究和运行这个项目，学习者可以了解EXTJS的数据管理、UI组件使用、事件处理等核心概念，从而快速上手EXTJS开发。
这个“ext+struts+spring小例子”是一个整合这三个技术的示例项目，用于实现一个图书管理应用。下面将详细阐述这三个框架的核心概念及其在项目中的作用。 EXT JS 是一个强大的JavaScript库，主要用于构建富客户端...
可能的一个例子是，如何为EXT的表格组件添加行编辑插件。行编辑插件允许用户在表格的每一行上直接进行编辑，提高了数据操作的效率。另一个可能的例子可能是关于图表的插件，如添加鼠标悬停时的提示信息或者自定义...
在本例子中，我们将探讨如何将Ext JS的MVC模式与JSP整合，创建一个完整的Web应用。 首先，理解MVC模式至关重要。MVC是一种设计模式，将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller...
这个文件可能包含了一个或多个小的示例，例如： - 登录表单（Login Form）：展示了如何使用Ext2.0的表单组件来创建一个包含用户名和密码输入的登录界面，并进行表单验证。 - 数据网格（Data Grid）：演示了如何加载...
在这个例子中，`desktop.html`可能包含了一个模拟桌面环境的布局，用户可以在其中看到各种小部件和应用图标。 2. **windows.js**：这个文件很可能是实现“Windows”功能的核心JavaScript代码。在Ext JS中，"Windows...
EXT和JAVA例子是一个结合了两种技术的实践项目，旨在帮助开发者深入理解如何在Java应用程序中使用EXT库。EXT是一个强大的JavaScript框架，主要用于构建富互联网应用（Rich Internet Applications, RIA）。它提供了...
这个"EXT例子，可以直接跑"的压缩包文件提供了一个完整的办公系统框架实例，非常适合初学者快速上手EXT开发。 EXT的核心是EXT JS库，它包含了大量的UI组件，如表格、面板、表单、树形视图、菜单、工具栏等，这些...
标题"EXT小例子包括(增,删,改,查)"暗示了这是一个关于EXT JS基础操作的示例集合，涵盖了CRUD（创建Create、读取Read、更新Update、删除Delete）这四个核心数据库操作。在Web开发中，CRUD是数据库管理和应用程序交互...
EXT3-0是一个备受推崇的JavaScript组件库，它在Web开发领域中被广泛使用，尤其在构建交互式和富客户端应用程序时。EXT3.0版本是EXT库的一个重要里程碑，它带来了许多增强的功能和改进，使得开发人员能够更加高效地...
标题中的“Ext简单小例子(带源码)”指的是一个关于ExtJS的简易示例项目，ExtJS是一个基于JavaScript的开源富客户端框架，用于构建桌面级Web应用。它使用了Sencha公司开发的组件化和MVC（Model-View-Controller）架构...
首先，EXT（Ext JS）是一个强大的客户端 JavaScript 库，它提供了大量的 UI 组件，如表格、面板、表单等，可以构建出高度定制和交互性强的 Web 应用。EXT.extend 是 EXT 框架中的一个关键特性，用于创建自定义组件或...
本压缩包包含EXT3.2的核心源码、API文档以及一个名为"ExtTest"的示例项目，其中的grid例子演示了EXT3.2在数据展示和操作上的强大能力。 首先，EXT3.2的源码是理解其工作原理的关键。源码包含了EXT3.2的所有组件、类...
在"EXT 增删改查的一个例子"中，我们主要关注的是EXT在数据管理和用户交互方面的应用。增删改查（CRUD）是任何数据驱动应用的基础操作，包括创建（Create）、读取（Read）、更新（Update）和删除（Delete）。EXT提供...
"EXT+DWR配合简单例子"这个主题，意味着我们将探讨如何将这两者结合，利用EXT的前端能力与DWR的后端通信能力，构建一个功能完善的Ajax应用。一种简单的配合方式可能是： 1. **前端EXT设置**：首先，在EXT应用中创建...
描述提到“给开始要用EXT框架开发系统的人员提供一个很好的例子”，这可能包含一系列示例代码，展示了如何使用EXT组件和Ajax进行CRUD操作。在实际应用中，这可能包括： 1. **创建（Create）**：使用EXT的FormPanel...
"ExtDemo例子绝对能跑起来"这个标题表明我们将探讨一个关于ExtJS的示例项目，这个项目在正确配置和执行后，能够正常运行。 描述中的"ext ext例子"可能是由于输入错误，但我们可以理解为这是在强调ExtJS框架的实例。...