下载文档原格式
Ext与页面连接进行添加用户添加为案例在Ext页面中点击添加按钮触发事件，这时我们要写添加页面的内容我们需要自己写js文件代码如下：UserAdd=function(UserInfoStore){//部门的下拉列表的数据源var DepartStore = new Ext.data.Store({proxy:new Ext.data.HttpProxy({url:'../ext.jsp/json_DepartmentUserBox.jsp'}),reader:new Ext.data.JsonReader({},['depart_id','depart_name'])});DepartStore.load();var ModelStore = new Ext.data.Store({proxy:new Ext.data.HttpProxy({url:'../ext.jsp/json_RoleModel.jsp'}),reader:new Ext.data.JsonReader({},['model_name','model_id'])});ModelStore.load();var Fields=[ {name : 'role_id', type : 'int'},{name : 'role_typename'}];var UserStore = new Ext.data.Store({proxy:new Ext.data.HttpProxy({url:'../ext.jsp/json_RoleTree.jsp'}),reader:new Ext.data.JsonReader({fields:Fields})});UserStore.load();var DepartBox=new boBox({store : DepartStore,//设置数据源name:'depart_id',fieldLabel : '<font color="red">*</font>所属部门',hiddenName: 'departId',displayField:'depart_name',//定义要显示的字段valueField:'depart_id',model:'local',itemCls : 'form_row',width:128,typeAhead : true,forceSelection : true,//要求输入值必须在列表中存在itemCls : 'form_row',typeAhead : true,//允许自动选择匹配的剩余部分文本value:'请选择...',//默认选择大兴triggerAction: 'all',//单击触发按钮显示全部数据allowBlank : false});var RoleBox=new boBox({store : UserStore,//设置数据源name:'role_id',fieldLabel : '<font color="red">*</font>角色种类',hiddenName: 'roleId',displayField:'role_typename',//定义要显示的字段valueField:'role_id',model:'local',itemCls : 'form_row',width:128,typeAhead : true,forceSelection : true,//要求输入值必须在列表中存在itemCls : 'form_row',typeAhead : true,//允许自动选择匹配的剩余部分文本value:'请选择...',//默认选择大兴triggerAction: 'all',//单击触发按钮显示全部数据allowBlank : false});var ModelBox=new boBox({store : ModelStore,//设置数据源valueField : 'model_id',hiddenName: 'ModelId',displayField : 'model_name',fieldLabel : '<font color="red">*</font>模板类型',labelSeparator : ':',name : 'model_id',width:128,itemCls : 'form_row',typeAhead : true,model : 'local',emptyText : '-- 请选择--',triggerAction : 'all',allowBlank : false});var ChangeNodeFile=new Ext.form.TextField({emptyText: '请选择文件...',fieldLabel: ' *结点选择',buttonText:'选择文件...',name:'upload',inputType:'file',allowBlank:true,width:446});var addUserName=new Ext.form.TextField({name:'addUserName',fieldLabel:' 用 户名',allowBlank:false,blankText:'请输入部门名称!' ,msgTraget:'side'});var addUserBirth=new Ext.form.DateField({name:'addUserBirth',xtype:'datefield',format : 'Y-m-d',fieldLabel : ' *出生日期',readonly:true,allowBlank:true,width:130,msgTarget:'side'});var addUserCodeNumber=new Ext.form.NumberField({ name:'addUserCodeNumber',fieldLabel:' *用户代码',allowDecimals:false,blankText:'请输入联系方式',allowNegative:true});var addUserTel=new Ext.form.NumberField({name:'addUserTel',fieldLabel:' *联系方式',allowDecimals:false,blankText:'请输入联系方式',allowNegative:true});var Userpwd=new Ext.form.TextField({name:'addUserPwd',fieldLabel:' *用户密码',allowBlank:true,msgTraget:'side'});var src_data=new Ext.data.SimpleStore({fields:['nativaId','id_data'],data:[[1,'中国'],[2,'日本'],[3,'美国'],[4,'英国']] });var txtstate=new boBox({name:'addUserNative',fieldLabel:' *国籍',allowBlank:false,emptyText:'国籍.....!',triggerAction: 'all',//单击触发按钮显示全部数据store:src_data,width:130,displayField:'id_data',mode: 'local'//本地模});var src_data2=new Ext.data.SimpleStore({fields:['','id_data'],data:[[1,'汉族'],[2,'藏族'],[3,'高山族']]});var UserNation=new boBox({name:'addUserNation',fieldLabel:' *名族',allowBlank:false,emptyText:'名族.....!',triggerAction: 'all',//单击触发按钮显示全部数据store:src_data2,width:130,displayField:'id_data',mode: 'local'//本地模});var UserMail=new Ext.form.TextField({name:'addUserMail',fieldLabel:' *用户email',allowBlank:true,msgTraget:'side'});var UserAddress=new Ext.form.TextField({name:'addUserAddress',fieldLabel:' *家庭住址',width:446,allowDecimals:false,blankText:'请输入住址',allowNegative:true});var UserBodyNumber=new Ext.form.NumberField({ name:'addUserBodyNumber',fieldLabel:' *身份证号',allowDecimals:false,blankText:'请输入联系方式',allowNegative:true});var UserReportDate=new Ext.form.DateField({name:'addUserReportDate',xtype:'datefield',format : 'Y-m-d',fieldLabel : ' *入职时间',readonly:true,allowBlank:true,width:130,msgTarget:'side'});var src_data1=new Ext.data.SimpleStore({fields:['','id_data'],data:[[1,'少先队员'],[2,'团员'],[3,'党员']] });var txtstate1=new boBox({name:'addUserPolscape',fieldLabel:' *政治面貌',allowBlank:false,emptyText:'政治面貌...!',triggerAction: 'all',//单击触发按钮显示全部数据store:src_data1,width:128,displayField:'id_data',mode: 'local'//本地模});var UserExplain=new Ext.form.TextArea({name:'addUserNote',fieldLabel:' *用户描述',allowBlank:false,width:446,height:90,blankText:'请输入对用户的描述!',msgTarget:'side'});var addUserForm= new Ext.FormPanel({id: 'form-panel',url:'addRMUserAction.action',fileUpload: true,width:660,height:420,labelWidth: 60,frame: true,collapsible:true,bodyStyle: 'padding: 10px 10px 0 10px;',labelWidth: 50,items:[{ layout:'column',items:[{columnWidth:.5,layout:"form",labelWidth:80,items:[DepartBox]},{columnWidth:.5,layout:'form',labelWidth:80,items:[RoleBox]}]}, { layout:'column',items:[{columnWidth:.5,layout:"form",labelWidth:80,items:[addUserName]},{columnWidth:.5,layout:'form',labelWidth:80,items:[ModelBox]}]}, {layout : 'column',frame : true,unstyled:true,border:true,autoHeight:'auto',width:300,items : [ {xtype:'label',text : ' * 用户性别:'}, {columnWidth : .15,xtype:'label',width:80}, {xtype:'radio',columnWidth : .23,name : 'addUserSex',inputValue:'1',boxLabel : '男',checked:true}, {columnWidth : .2,xtype:'radio',name : 'addUserSex',inputValue:'0',boxLabel : '女'} ]}, { layout:'column',items:[{columnWidth:.5,layout:"form",labelWidth:80,items:[Userpwd]},{columnWidth:.5,layout:'form',labelWidth:80,items:[addUserTel]}]},{ layout:'column',items:[{columnWidth:.5,layout:"form",labelWidth:80,items:[addUserCodeNumber]},{columnWidth:.5,layout:'form',labelWidth:80,items:[UserBodyNumber]}]}, { layout:'column',items:[{columnWidth:.5,layout:"form",labelWidth:80,items:[addUserBirth]},{columnWidth:.5,layout:'form',labelWidth:80,items:[UserMail]}]}, { layout:'column',items:[{columnWidth:.5,layout:"form",labelWidth:80,items:[UserNation]},{columnWidth:.5,layout:'form',labelWidth:80,items:[txtstate]}]},{layout : 'column',frame : true,unstyled:true,border:true,autoHeight:'auto',width:300,items : [ {xtype:'label',text : ' *婚姻状况:'}, {columnWidth : .15,xtype:'label',width:60}, {xtype:'radio',columnWidth : .23,ancher:'98%',name : 'addUserMarrigeState',inputValue:'1',boxLabel : '以婚',checked:true}, {columnWidth : .2,ancher:'98%',xtype:'radio',name : 'addUserMarrigeState',inputValue:'0',boxLabel : '未婚'} ]},{ layout:'column',items:[{columnWidth:.5,layout:"form",labelWidth:80,items:[UserReportDate]},{columnWidth:.5,layout:'form',labelWidth:80,items:[txtstate1]}]}, { layout:'column',items:[{layout:"form",labelWidth:80,items:[ChangeNodeFile]}]}, { layout:'column',items:[{layout:"form",labelWidth:80,items:[UserAddress]}]},{ layout:'column',items:[{layout:"form",labelWidth:80,items:[UserExplain]} ]}]});var addUserWin=new Ext.Window({title:"添加用户",width:670,height:480,frame:true,border:false,resizable : false,constrainHeader:true,modal : true,iconCls:'head_images',collapsible : true,constrain:true,closeAction:'close',items:[addUserForm],buttons:[{text:'确定',handler:addRM,iconCls:'add_images'},{ text:'重置',iconCls:'resut_images'}]})addUserWin.show();//在js页面的提交按钮中调用添加方法，在页面中定义的form表单中设置url的路径为struts.xml中name的actionfunction addRM(){if(addUserForm.getForm().isValid()){addUserForm.getForm().submit({clientValidation : true,// 进行客户端验证waitMsg : '正在提交数据请稍后',// 提示信息waitTitle : '提示',// 标题success : function(response, options) {addUserWin.hide();UserInfoStore.reload();//Store刷新Ext.Msg.alert('提示', '添加成功');} ,failure:function(){Ext.Msg.alert("提示", "<font color=red>删除失败没有捕获到异常</font>");}});}}}json_DepartmentUserBox.jsp页面代码为：<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ page import="org.springframework.context.support.ClassPathXmlApplicationContext" %> <%@ page import="org.springframework.context.ApplicationContext" %><%@ page import="com.naxl.oa.model.Department" %><%@ page import="com.naxl.oa.ibiz.IDepartmentBiz" %><%@ page import="java.util.HashMap" %><%ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml") ;IDepartmentBiz biz = (IDepartmentBiz)context.getBean("departmentBiz");String jsonstr=null;jsonstr = "[";for(Department m: biz.getDRMUser()){ //与普通for循环一样，意思是定义一个Department实体类变量m，把返回来的实体集合存到m里jsonstr += "{depart_id:"+m.getDepartmentId()+",depart_name:'"+m.getDepartmentName()+"'"; //把所有部门遍历出来保存到jsonstr 变量里jsonstr += "},";}jsonstr = jsonstr.substring(0, jsonstr.length() - 1);jsonstr += "]";System.out.print(jsonstr);response.getWriter().print(jsonstr);%>action中的代码为：package com.naxl.oa.webaction;import com.naxl.oa.ibiz.IDepartmentBiz;import com.naxl.oa.ibiz.IUserBiz;import com.naxl.oa.model.Department;import com.naxl.oa.model.Model;import com.naxl.oa.model.Role;import er;import com.opensymphony.xwork2.ActionSupport;public class UserAddAction extends ActionSupport {private Integer addUser_Department_Id; //部门编号private String roleId;private String ModelId;private Role addUser_Role_Id; //角色编号private Model addUser_Model_Id; //模板编号private String addUserName; //用户姓名private String addUserCodeNumber;private String addUserPwd; //用户密码private Integer addUserSex; //性别private String addUserBirth; //出生日期private String addUserBodyNumber; //身份证号private String addUserTel; //联系电话private String addUserMail; //邮箱private String addUserNation; //名族private String addUserAddress; //住址private String addUserPolscape; //政治面貌private String addUserNative; //籍贯private String addUserPhotos; //照片private String addUserReportDate; //入职时间private Integer addUserMarrigeState; //婚姻状况private String addUserNote; //备注private IUserBiz iUserbizaction;private String jsonrmstr;public String getJsonrmstr() {return jsonrmstr;}public void setJsonrmstr(String jsonrmstr) {this.jsonrmstr = jsonrmstr;}public String getRoleId() {return roleId;}public void setRoleId(String roleId) {this.roleId = roleId;}public String getModelId() {return ModelId;}public void setModelId(String modelId) {ModelId = modelId;}public IUserBiz getiUserbizaction() {return iUserbizaction;}public void setiUserbizaction(IUserBiz iUserbizaction) {this.iUserbizaction = iUserbizaction;}public Integer getAddUser_Department_Id() {return addUser_Department_Id;}public void setAddUser_Department_Id(Integer addUserDepartmentId) { addUser_Department_Id = addUserDepartmentId;}public Role getAddUser_Role_Id() {return addUser_Role_Id;}public void setAddUser_Role_Id(Role addUserRoleId) {addUser_Role_Id = addUserRoleId;}public Model getAddUser_Model_Id() {return addUser_Model_Id;}public void setAddUser_Model_Id(Model addUserModelId) {addUser_Model_Id = addUserModelId;}public String getAddUserName() {return addUserName;}public void setAddUserName(String addUserName) {this.addUserName = addUserName;}public String getAddUserCodeNumber() {return addUserCodeNumber;}public void setAddUserCodeNumber(String addUserCodeNumber) { this.addUserCodeNumber = addUserCodeNumber;}public String getAddUserPwd() {return addUserPwd;}public void setAddUserPwd(String addUserPwd) {this.addUserPwd = addUserPwd;}public Integer getAddUserSex() {return addUserSex;}public void setAddUserSex(Integer addUserSex) {this.addUserSex = addUserSex;}public String getAddUserBirth() {return addUserBirth;}public void setAddUserBirth(String addUserBirth) {this.addUserBirth = addUserBirth;}public String getAddUserBodyNumber() {return addUserBodyNumber;}public void setAddUserBodyNumber(String addUserBodyNumber) { this.addUserBodyNumber = addUserBodyNumber;}public String getAddUserTel() {return addUserTel;}public void setAddUserTel(String addUserTel) {this.addUserTel = addUserTel;}public String getAddUserMail() {return addUserMail;}public void setAddUserMail(String addUserMail) {this.addUserMail = addUserMail;}public String getAddUserNation() {return addUserNation;}public void setAddUserNation(String addUserNation) { this.addUserNation = addUserNation;}public String getAddUserAddress() {return addUserAddress;}public void setAddUserAddress(String addUserAddress) { this.addUserAddress = addUserAddress;}public String getAddUserPolscape() {return addUserPolscape;}public void setAddUserPolscape(String addUserPolscape) { this.addUserPolscape = addUserPolscape;}public String getAddUserNative() {return addUserNative;}public void setAddUserNative(String addUserNative) { this.addUserNative = addUserNative;}public String getAddUserPhotos() {return addUserPhotos;}public void setAddUserPhotos(String addUserPhotos) { this.addUserPhotos = addUserPhotos;}public String getAddUserReportDate() {return addUserReportDate;}public void setAddUserReportDate(String addUserReportDate) { this.addUserReportDate = addUserReportDate;}public Integer getAddUserMarrigeState() {return addUserMarrigeState;}public void setAddUserMarrigeState(Integer addUserMarrigeState) { this.addUserMarrigeState = addUserMarrigeState;}public String getAddUserNote() {return addUserNote;}public void setAddUserNote(String addUserNote) {this.addUserNote = addUserNote;}//添加用户public String addUser(){Model m=new Model();m.setModelId(Integer.parseInt(getModelId() ));Role r=new Role();r.setRoleId(Integer.parseInt(getRoleId()));User user=new User();user.setUser_Department_Id(this.getAddUser_Department_Id());user.setUser_Model_Id(m);user.setUser_Role_Id(r);user.setUserAddress(this.getAddUserAddress());user.setUserBirth(this.getAddUserBirth());user.setUserBodyNumber(this.getAddUserBodyNumber());user.setUserCodeNumber(this.getAddUserCodeNumber());user.setUserMail(this.getAddUserMail());user.setUserMarrigeState(this.getAddUserMarrigeState());user.setUserName(this.getAddUserName());user.setUserNation(this.getAddUserNation());user.setUserNative(this.getAddUserNative());user.setUserNote(this.getAddUserNote());user.setUserPhotos(this.getAddUserPhotos());user.setUserPolscape(this.getAddUserPolscape());user.setUserPwd(this.getAddUserPwd());user.setUserReportDate(this.getAddUserReportDate());user.setUserSex(this.getAddUserSex());user.setUserTel(this.getAddUserTel());System.out.print("-------------");int num=iUserbizaction.addNewUserBiz(user);this.setJsonrmstr("{success:true,flag:true}");return "success";}}其中属性为添加页面中的控件的名称*控件的名称要与这里的属性必须一致。
学习EXT第一天(EXT简介1)无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。
本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom。
否则的话，请从阅读初学JavaScript资源开始。
下载Ex t如果你未曾下载过，那应从这里下载最新版本的Ext /downloads。
针对你的下载需求，有几个不同的弹性选项。
通常地，最稳定的版本，是较多人的选择。
下载解包后，那个example文件夹便是一个探索Ext的好地方！开始！我们将使用Ext，来完成一些JavaScript任务。
第一步要做的是，下载本教程的示例文件。
Zip文件包括三个文件：ExtStart.html, ExtStart.js和ExtStart.css。
解包这三个文件到Ext的安装目录中（例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新建目录“tutorial”。
双击ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。
如果是一个Javascript错误，请按照页面上的指引操作。
在你常用的IDE中或文本编辑器中，打开ExtStart.js看看：Ext.onReady可能是你接触的第一个方法。
这个方法是指当前DOM加载完毕后，保证页面内的所有元素能被Script引用（reference）。
你可删除alert()那行，加入一些实际用途的代码试试：Ext.onReady(function() {alert("Congratulations! You have Ext configured correctly!");});El e m e n t：Ex t的核心大多数的JavaScript操作都需要获取页面上的某个元素（reference）,好让你来做有趣的事情。
Ext属性详细信息Ext.window属性详细信息Ext.Window扩展⾃Ext.Panel，其xtype值为window。
1、主要配置项closable：是否允许关闭窗⼝，默认为true。
closeAction：关闭窗⼝的动作，包括以下两种：close：从DOM删除窗⼝，销毁窗⼝及其所属组件，窗⼝不再可⽤，重新显⽰需要调⽤show⽅法。
此为默认值。
hide：通过设置可见性隐藏窗⼝，窗⼝还可⽤，调⽤show⽅法后重新显⽰。
constrain：是否约束窗⼝只能在容器内移动，默认为false。
窗⼝默认渲染到document.body。
constrainHeader：是否约束窗⼝头部只能在容器内移动，默认为false。
draggable：是否可拖曳，默认为true。
resizable：是否可改变窗⼝的⼤⼩，默认为true。
modal：是否为模式窗⼝，默认为false。
maximizable：是否可最⼤化窗⼝，默认为false。
maximized：是否在初始化时最⼤化显⽰窗⼝，默认为false。
x：窗⼝的X坐标值。
y：窗⼝的Y坐标值。
manager：WindowGroup的引⽤。
expandOnShow：是否在窗⼝显⽰时展开它，默认为true。
当取值为false时，collapsed取值为true时，窗⼝初始显⽰时收缩。
minimizable：是否可最⼩化窗⼝，默认为false。
需要⾃定义最⼩化⾏为。
defaultButton：当窗⼝获得焦点时，默认获得焦点的按钮。
plain：主体背景是否透明，默认为false。
2、主要⽅法：show( [String/Element animateTarget], [Function callback], [Object scope] )：显⽰窗⼝。
hide( [String/Element animateTarget], [Function callback], [Object scope] )：隐藏窗⼝。
本文主要讲述Linux 上比较流行的ext2 文件系统在硬盘分区上的详细布局情况。
Ext2 文件系统加上日志支持的下一个版本是ext3 文件系统，它和ext2 文件系统在硬盘布局上是一样的，其差别仅仅是ext3 文件系统在硬盘上多出了一个特殊的inode（可以理解为一个特殊文件），用来记录文件系统的日志，也即所谓的journal。
由于本文并不讨论日志文件，所以本文的内容对于ext2 和ext3 都是适用的。
1 前言本文的资料来源是Linux 内核中ext3 文件系统的源代码。
为了便于读者查阅源代码，本文中一些关键的技术词汇都使用了内核源代码中所使用的英语单词，而没有使用相应的中文翻译。
(这种方法是否恰当，还请读者朋友们指教。
)2 粗略的描述对于ext2 文件系统来说，硬盘分区首先被划分为一个个的block，一个ext2 文件系统上的每个block 都是一样大小的，但是对于不同的ext2 文件系统，block 的大小可以有区别。
典型的block 大小是1024 bytes 或者4096 bytes。
这个大小在创建ext2 文件系统的时候被决定，它可以由系统管理员指定，也可以由文件系统的创建程序根据硬盘分区的大小，自动选择一个较合理的值。
这些blocks 被聚在一起分成几个大的block group。
每个block group 中有多少个block 是固定的。
每个block group 都相对应一个group descriptor，这些group descriptor 被聚在一起放在硬盘分区的开头部分，跟在super block 的后面。
所谓super block，我们下面还要讲到。
在这个descriptor 当中有几个重要的block 指针。
我们这里所说的block 指针，就是指硬盘分区上的block 号数，比如，指针的值为0，我们就说它是指向硬盘分区上的block 0；指针的值为1023，我们就说它是指向硬盘分区上的block 1023。
简写ext flex
ext是一个富客户端开放框架，使用javascript及脚本api构建的一种技术。
flex是adobe公司的一套开发平台，能够构建独立运行的应用。
可以嵌入在浏览器的lash player中运行。
使用MXML和 Action script 开发。
两种不同的技术来实现RIA（Rich Internet applications 富客户端程序）。
flex运行在flash player平台，使用语言actionscript3。
美观：flex占优势
性能：这个，我没做过复杂的应用，小项目感觉差不多，请在复杂项目上的朋友帮忙指正。
扩展性：flex方便一些，ext要写个proxy太麻烦了，需要相当的js功夫。
维护性：这个，我觉得flex高一些，毕竟是为前段量身定做的。
学习曲线：个人觉得差不多，特别是ext很忽悠，学起来绝对没有想象的轻松。
使用extjs有1年左右，体会很深，js知识有质的提高，唯一的缺点：表格功能较弱，性能极低，基本上表格的数据只能在100、200条之内，超过了就卡了。
有些报表数据是不能分页的，另外，我知道有缓存表格，但是对于复杂的可编辑表格（比如一个页面有几百、几千条设置数据），暂
时没有找到可行的解决方案。
flex没有实际使用过，只是片面的了解，功能上时比extjs强，但我不关心这个，我觉得功能上，extjs做得已经足够好了，组件也很丰富，我关心的也是性能，比如多页面，多表单，大表格，会不会出现性能低下的问题。
强大的EXT最新使用手册（中文）EXT 中文手册前言本手册所有内容均粘贴自互联网，如有错误，请多见谅。
目录EXT 中文手册 ........................................................................... (1)EXT简介 ........................................................................... . (4)目�� ......................................................................... ....................................................... 4 下载Ext .......................................................................... .................................................. 5 开始！ ......................................................................... ...................................................... 5 Element：Ext的核心 ........................................................................... ............................ 5 获取多个DOM的节点 ........................................................................... ........................ 6 响应事件 ........................................................................... ................................................ 6 使用Widgets ...................................................................... .............................................. 8 使用Ajax ......................................................................... ............................................... 10 EXT源码概述 ........................................................................... (12)揭示源代码 ..................................................................................................................... 12 发布Ext源码时的一些细节 ........................................................................... .............. 13 我应该从哪里开始？ ......................................................................... ............................ 14 适配器Adapters ..................................................................... ........................................ 14 核心Core ......................................................................... ............................................... 14 Javascript中的作用域（scope） .................................................................... .. (14)事前准备 ........................................................................... .............................................. 14 定义 ........................................................................... ...................................................... 14 正式开始 ........................................................................... .............................................. 15 window对象 ........................................................................... ........................................ 15 理解作用域 ........................................................................... .......................................... 16 变量的可见度 ........................................................................... ...................................... 16 EXT程序规划入门 ........................................................................... . (17)事前准备 ........................................................................... .............................................. 17 需要些什么？ ......................................................................... . (17)applayout.html ............................................................... .. (17)applayout.js ................................................................. .................................................... 18 公开Public、私有Private、特权的Privileged？ ........................................................ 20 重写公共变量 ........................................................................... ...................................... 22 重写（Overriding）公共函数 ........................................................................... ............ 22 DomQuery基础 ........................................................................... . (23)DomQuery基础 ........................................................................... ................................... 23 扩展EXT组件 ........................................................................... .. (30)文件的创建 ........................................................................... .......................................... 30 Let'sgo ........................................................................... ................................................. 34 完成 ........................................................................... ...................................................... 36 EXT的布局（Layout） ................................................................... .. (38)简单的例子 ........................................................................... .......................................... 39 加入内容 ........................................................................... .............................................. 42 开始使用Grid ......................................................................... .. (52)步骤一定义数据(DataDefinition) .................................................................. ............. 52 步骤二列模型（Column Model）....................................................................... ........ 53 Grid组件的简易分页 ........................................................................... (54)Grid数据 .................................................................................................................. 54 怎么做一个分页的Grid ......................................................................... ......... 55 分页栏Toolbar ...................................................................... ............................... 55 EXT Menu组件 ........................................................................... . (56)创建简易菜单 ........................................................................... .............................. 56 各种Item的类型 ........................................................................... ...................... 58 Item属性 ........................................................................... ....................................... 58 在UI中摆放菜单 ........................................................................... ...................... 58 Menu的分配方式： ......................................................................... .................... 59 练一练 ........................................................................... .............................................. 61 动态添加菜单按钮到Toolbar ..................................................................... 61 更方便的是 ........................................................................... ................................... 62 下一步是 ........................................................................... ........................................ 62 模板（Templates）起步 ........................................................................... .. (62)第一步您的HTML模板 ........................................................................... .................. 62 第二步，将数据加入到模板中 ........................................................................... .......... 63 下一步 ........................................................................... .................................................. 63 学习利用模板（Templates）的格式化功能 (63)正式开始 ........................................................................... .............................................. 63 下一步 ........................................................................... .................................................. 65 事件处理 ........................................................................... (65)非常基础的例子 ........................................................................... ........................ 65 处理函数的作用域 ........................................................................... ................... 65 传递参数 ........................................................................... ........................................ 66 类设计............................................................................ (66)对象创建 ........................................................................... ........................................ 66 使用构造器函数 ........................................................................... ........................ 67 方法共享 ........................................................................... ........................................ 67 表单组件入门 ........................................................................... . (68)表单体 ........................................................................... .................................................. 68 创建表单字段 ........................................................................... ...................................... 68 完成表单 ........................................................................... .............................................. 69 下一步 ........................................................................... .................................................. 70 为一个表单填充或提交数据 ........................................................................... . (70)让我们开始吧 ........................................................................... ...................................... 70 读取我们的数据 ........................................................................... .................................. 71 EXT中的继承 ........................................................................... ............................................. 72 补充资料............................................................................ . (73)Ext 2 概述 ........................................................................... (73)组件模型 Component Model......................................................................... .............. 75 容器模型ContainerModel ........................................................................ (79)布局Layouts ...................................................................... (80)Grid ......................................................................... .. (83)XTemplate .................................................................... (83)DataView ..................................................................... .................................................... 84 其它新组件 ........................................................................... .......................................... 84 EXT2简介 ........................................................................... (85)下载Ext .......................................................................... ................................................ 85 开始！ ......................................................................... .................................................... 86 Element：Ext的核心 ........................................................................... .......................... 86 获取多个DOM的节点 ........................................................................... ...................... 87 响应事件 ........................................................................... .............................................. 87 使用Widgets ...................................................................... ............................................ 89 ����使用Ajax ......................................................................... ..................................... 92 TabPanel基础 ........................................................................... . (95)Step 1: 创建 HTML 骨架 ........................................................................... ................. 95 Step 2: Ext结构的构建 ........................................................................... ....................... 96 Step 3: 创建Tab控制逻辑 ........................................................................... .. (98)EXT简介无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。
1：按钮的禁用于否：属性： disabled : true, 初始化时为禁用Ext.getCmp('updateb').disable(); //禁用按钮Ext.getCmp('deleteb').enable(); //恢复可用2:面板Ext.getCmp('rulepanel').setVisible(true); //使面板可见Ext.getCmp('rulepanel').setVisible(false); //使面板不可见Ext.getCmp('rulepanel').collapse(true); //使rulepanel收缩Ext.getCmp('rulepanel').expand(true); //使rulepanel展开3：checkbox属性：inputValue 类似其valueview plaincopy to clipboardprint?var popSelect = Ext.getCmp('panel3').findByType('checkbox');for(var i=0,j=0;i<popSelect.length;i++){if(popSelect[i].checked){pop[j++] = popSelect[i].inputValue;if(popSelect[i].inputValue=='103'){selectorder = Ext.getCmp('ruleid').getValue();}}}var popSelect = Ext.getCmp('panel3').findByType('checkbox');for(var i=0,j=0;i<popSelect.length;i++){if(popSelect[i].checked){pop[j++] = popSelect[i].inputValue;if(popSelect[i].inputValue=='103'){selectorder = Ext.getCmp('ruleid').getValue();}}}body : Ext.Element它是指向panel的body的Element引用。
三菱变频器EXT操作模式应用摘要：变频器通常有两种控制方式，pu（面板）操作模式和ext （外部）操作模式，本文主要讲述三菱变频器的ext（外部）操作模式的应用，其中包括电流调节控制、电压调节控制、多段数控制以及综合应用等，以供大家参考学习。
关键词：三菱变频器 ext操作模式应用0 引言本文主要讲述三菱变频器fr-s520se—0.4k的ext（外部）操作模式应用，三菱变频器ext操作模式是指利用外部电位计的调节和外部开关的通断，来控制变频器运行，从而控制三相异步电动机的启动、停止、正反转以及转速等，使变频器的输出能满足生产生活的需要。
1 三菱变频器外部端子简介1.1 fr-s520se外部端子分布图，如图（1）1.2 fr-s520se外部端子说明sd：输入公共端；stf：正传启动；str：反转启动；rh：多段速高速；rm：多段速中速；rl：多段速低速；10：频率设定用电源；2：电压信号频率设定；4：电流信号频率设定；5频率设定公共输入端2 三菱变频器ext（外部）操作模式调试2.1 设定电流输入改变运行频率2.1.1 按图（2）的布线要求连接线路。
2.1.2 设定au信号，将rl（p60）、rm（p61）、rh（p62）三个端子中任意一个设定为au信号，如au接在rm上，则将参数p61设为4：au（输入电流选择）。
2.1.3 在参数p1、p2上设定上、下限频率，在参数p7、p8上设定加、减速时间。
2.1.4 选择ext外部操作模式：方法一：将参数p79设为0：通过模式切换键可切换pu（面板）以及ext（外部）操作模式。
方法二：将参数p79设为2：只执行ext（外部）操作模式。
2.1.5 闭合开关stf，电动机正转；闭合开关str，电动机反转；开关stf和开关str同时闭合时，电动机输出停止。
2.1.6 在电动机运行时，调节电位计，通过改变电流的输入改变电动机的运行频率，从而改变电动机的运行速度；改变的频率可以通过面板上的监视led等来观察，改变的频率范围为上、下限频率。
EXT表单组件常见属性介绍（三）本范例展⽰如何使⽤表单的各种组件。
下拉框组件展⽰了5种使⽤范例：普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。
Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";3. Ext.QuickTips.init();4. Ext.form.Field.prototype.msgTarget = "qtip";5.6. //component7. var hiddenField = new Ext.form.Hidden({8. name: "hiddenField",9. value: "1"10. });11.12. var usernameField = new Ext.form.TextField({13. name: "username",14. fieldLabel: "⽤户名",15. allowBlank: true,16. blankText: "请输⼊⽤户名！"17. });18.19. var pwdField = new Ext.form.TextField({20. name: "password",21. fieldLabel: "密码",22. allowBlank: true,23. blankText: "请输⼊密码！",24. inputType: "password"25. });26.27. var ageField = new Ext.form.NumberField({28. name: "age",29. allowBlank: true,30. blankText: "请输⼊年龄！",31. fieldLabel: "年龄",32. allowDecimals: false,33. allowNegative: false,34. minValue: 18,35. minText: "年龄不能少于18",36. maxValue: 100,37. maxText: "年龄不能⼤于100"38. });39.40. var love1 = new Ext.form.Checkbox({41. name: "love1",42. boxLabel: "打球",43. inputValue: "1"44. });45.46. var love2 = new Ext.form.Checkbox({47. name: "love2",48. boxLabel: "游泳",49. inputValue: "2"50. });51.52. var love3 = new Ext.form.Checkbox({53. name: "love3",54. boxLabel: "登⼭",55. inputValue: "3"56. });57.58. var loveGroup = new Ext.form.CheckboxGroup({59. name: "love",60. columns: [80, 80, 1.0],61. fieldLabel: "爱好",62. items: [love1, love2, love3]63. });64.65. var sex1 = new Ext.form.Radio({66. name: "sex1",67. boxLabel: "男",68. inputValue: "1"69. });70.71. var sex2 = new Ext.form.Radio({72. name: "sex1",73. boxLabel: "⼥",74. inputValue: "0"75. });76.77. var sexGroup = new Ext.form.RadioGroup({78. name: "sex",79. columns: [80, 1.0],80. fieldLabel: "性别",81. items: [sex1, sex2]82. });83.84. //本地数据源的组合框85. var store = new Ext.data.SimpleStore({86. fields: ["code", "name"],87. data: [88. ["1", "北京"],89. ["5", "上海"],90. ["4", "⼴东"]91. ]92. });93. var cmbProvince = new boBox({94. id: "cmbProvince",95. hiddenName: "province.id",96. fieldLabel: "省份",97. resizable: true,98. editable: false,99. width: 100,100. emptyText: "请选择...",101. store: store,102. valueField: "code",103. displayField: "name",104. triggerAction: "all",105. mode: "local"106. });107.108. //远程数据源的组合框109. var store2 = new Ext.data.SimpleStore({110. fields: ["name"],111. proxy: new Ext.data.HttpProxy({112. url: "../testForm!loadData.action"113. })114. });115.116. var cmbManager = new boBox({117. hiddenName: "manager",118. fieldLabel: "经理",119. editable: false,120. triggerAction: "all",121. mode: "local",122. maxHeight: 200,123. store: new Ext.data.SimpleStore({fields:[],data:[[]]}),124. onSelect: Ext.emptyFn,125. tpl: "<tpl for='.'><div id='tree'></div></tpl>"126. });127.128. var root = new Ext.tree.TreeNode({129. nodeId: 1,130. text: "根节点",131. expanded: true132. });133. root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true})); 134. root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true})); 135.136. var tree = new Ext.tree.TreePanel({137. root: root,138. border: false,139. autoHeight: true,140. autoScroll: true141. });142.143. tree.on("click", function(node){144. if(!node.isLeaf()) return; //只能选择叶节点145. //下拉框的隐藏值146. if(cmbManager.hiddenField){147. cmbManager.hiddenField.value = node.attributes.nodeId; 148. }149. cmbManager.setRawValue(node.text); //下拉框的显⽰值150. cmbManager.collapse(); //折叠下拉框151. });152.153. cmbManager.on("expand", function(){154. tree.render("tree");155. });156.157. //分页远程数据源的组合框158. var store3 = new Ext.data.JsonStore({159. url: "../testForm!loadData3.action",160. totalProperty: "totalNum",161. root: "books",162. fields: ["id", "name"]163. });164. var cmbBook = new boBox({165. hiddenName: "books",166. fieldLabel: "书籍",167. store: store3,168. valueField: "name",169. displayField: "name",170. triggerAction: "all",171. mode: "remote",172. queryParam: "books",173. loadingText: "正在装载数据...",174. width: 180,175. minChars: 1,176. editable: false,177. listWidth: 250,178. pageSize: 3179. });180.181. //HTML标准组件182. var cmbPass = new boBox({183. hiddenName: "status",184. fieldLabel: "是否有效",185. triggerAction: "all",186. editable: false,187. width: 100,188. transform: "isPass",189. lazyRender: true190. });191.192. var cmbTimes = new Ext.form.TimeField({193. hiddenName: "time",194. fieldLabel: "时间",195. minValue: "09:00",196. minText: "所选时间应⼤于{0}",197. maxValue: "18:00",198. maxText: "所选时间应⼩于{0}",199. format: "H时i分",200. increment: 30,201. invalidText: "时间格式⽆效！",202. maxHeight: 200,203. width: 100,204. value: "09时00分",205. editable: false206. });207.208. var cmbMonths = new Ext.ux.MultiSelectCombo({209. hiddenName: "months",210. fieldLabel: "⽉份",211. maxHeight: 200,212. editable: false,213. store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]], 214. mode: "local",215. width: 180,216. maxItemsCount: 3,217. maxItemsCountText: "最多只能选择三个选项！"218. });219.220. var cmbBirths = new Ext.form.DateField({221. name: "births",222. fieldLabel: "出⽣⽇期",223. disabledDays: [0,6],224. disabledDaysText: "禁⽌选择周末！",225. width: 100,226. readOnly: true,227. format: "Y-m-d",228. invalidText: "不是有效的⽇期值！"229. });230.231. var fieldSet1 = new Ext.form.FieldSet({232. title: "下拉框",233. checkboxName: "fieldSet1",234. checkboxToggle: true,235. autoHeight: true,236. layout: "table",237. layoutConfig: {238. columns: 3239. },240. defaults: {241. style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",242. layout:"form",243. labelAlign: "right"244. },245. items: [246. {rowspan:1, colspan:1, items:[cmbProvince]},247. {rowspan:1, colspan:1, items:[cmbManager]},248. {rowspan:1, colspan:1, items:[cmbBook]},249. {rowspan:1, colspan:1, items:[cmbPass]},250. {rowspan:1, colspan:1, items:[cmbTimes]},251. {rowspan:1, colspan:1, items:[cmbMonths]},252. {rowspan:1, colspan:1, items:[cmbBirths]}]253. });254.255. var remarksField = new Ext.form.TextArea({256. name: "remarks",257. fieldLabel: "备注",258. width: 400,259. height: 80260. });261.262. var form = new Ext.form.FormPanel({263. id: "frmAddUser",264. title: "新增⽤户",265. autoWidth: true,266. autoHeight: true,267. frame: true,268. renderTo: Ext.getBody(),269. labelWidth: 70,270. tbar: toolbar,271. items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup, 272. fieldSet1, remarksField],273. url: "../testForm!ajaxSubmitForm.action"274. });275. });Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";。
目录前言 (2)EXTJS的缺点以及优点 (3)EXTJS面向对象 (3)EXTJS组件化编程 (5)EXTJS组件之间的通信 (16)EXTJS中的Singleton (19)EXTJS扩展组件例子 (20)EXTJS JavaScript的调试 .............................................................................. 错误！未定义书签。
EXTJS XTemplate .. (29)EXTJS DataView的使用 (31)EXTJS 优化服务器端 (41)EXTJS与后台的通信(Java) (41)EXTJS 在AIR中继续施展 (53)前言本人学习编程一年，实际开发一年。
对编程的理解还仅处于很肤浅的认识上，本文本没有打算公开出来。
但是，我一直认为与人分享劳动成果是一件非常开心的事情，不仅能让更多的新手分享到我学习的快乐，而且从中我还能学到更多的知识。
由于本文最初是一个个人的总结，后来觉得还是公开出来的好，即使自己有错，也心甘情愿的挨板砖。
落后就要挨打，挨打也得站直了。
由于我确实很菜，所以文中必然有一定的理解性错误，如果本文有幸被您看到，请切不可认定这就是问题的答案。
希望能够收到更多的板砖，这样我才能从自我的误区中走出来，如果您是新手，最好不要把这篇文章此作为技术手册，误人子弟的罪名我担当不起。
因为很多个人的误解不经过无数的板砖是无法自我发现的。
这个文章的语言比较晦涩，我也尽量的想把一些问题阐述的更清晰一些，但是无奈我现在才发现语文的重要性……写了这么多东西，希望有人能给我的文中错误指出，中国的开源离不开您的指点，这样我才能更好的去完善它，也让我更有信心的去开源。
我的邮箱andy_ghg@。
希望能够得到高手的指点。
也希望结交到更多的朋友。
EXTJS的缺点以及优点EXTJS是有缺点的，缺点在于，由于过度的封装，导致我们很难对其样式有较大的改动，即使有所改动也很难达到预期的目标。
EXTJS的优点也是显而易见的，他有着丰富的控件库，有着丰富的工具包，有着优美的语法。
EXTJS很容易让一个有Swing或者Winform编程经验的人上手。
有很多人甚至根本不用知道XMLHttpRequest和ActiveXObject就可以轻易的编写AJAX程序。
但是EXTJS 是基于AJAX技术的，如果你不对AJAX有一个全面的了解，你可能会走不少的弯路，最终可能是知其然而不知其所以然。
由于EXTJS的过度封装，导致其组件的灵活性有所下降，在改变外观样式的时候，也经常出现弄巧成拙的事情。
还有最重要的一点就是EXTJS体积，EXTJS的CSS样式表文件加上主要的库文件大约能达到800KB，这还不包括他的一些图片文件。
所以这方面还是EXTJS应该改进的地方。
EXTJS面向对象关于JavaScript的变量、对象以及一些基础知识，大家可以在《AJAX入门经典》（英文名Beginning AJAX）这本书中的第二章看到简单的描述（更详细的就直接去买本JS相关的书籍吧）。
这里不再阐述。
在EXTJS中，我们该如何管理好我们的对象？对象的管理，在以往的EXTJS开发中，最初的写法可能是面向过程的，如下：那么在这里，位于Panel外面的对象就不会因为panel的销毁而被销毁，它可以一直存在于内存当中。
在开发中如果有多个这样的对象，那么管理起来是一个很耗费时间精力的。
这主要体现在项目后期，发布阶段，项目发布时，JS代码不应再像开发时那样分散在各个JS文件当中，而是代码的整合，全部归并到一个JS文件并扰码压缩，减少JS代码的体积提升JS代码的加载速度（最明显的可以看到ext-all.js的体积是621KB，而ext-all-debug.js则达到了2.35MB），这样问题就很严重了，如果我在某个JS文件中定义了一个变量：那么，这个变量（对象）就不能重名，整个项目中就不能再出现一个与其同名的变量，因此，变量名的维护也是一个浩大的工程，当然，也可以用绝对不重复的变量名，比如加长型的，或者是有标识的，但是这并不能解决根本性的问题。
那么，如何管理好这些模块内部使用的变量？那么这就是对象化所解决的问题，首先看下面的代码：var Dog = function(){this.say = function(){alert("汪汪");};}var smallDog = new Dog();smallDog.say();当say这个函数作为Dog这个对象的一个属性存在于Dog对象内部，那么这个方法就不会与外部的方法命名重复。
这是作用域所起到的作用。
按照这个思想，我们稍微改造一下上面的代码：Ext.onReady(function(){var panel = new Ext.FormPanel({items : [new Ext.form.TextField()]})})将textfield放入到对象的构造方法内，那么就不会造成变量名冲突等事故的发生。
但是这只是一个简单的Panel，如果我们所需要的是一个比较大的模块怎么办？总不能在每次使用的时候都写一大堆这样的代码吧？而且我们在这里仅仅是将一个输入框放在了表单内，如果我们要实现一个组件又该如何去写呢？那么我们现在假设有一个需求，在登录中显示类似下面的验证码：那么，这个东西就不是简单的在items里new几个textfield就能解决问题的。
首先，我们来拆分一下这个登录窗体：那么在验证码这块，我们需要一个Column布局的Panel（最好是Container），在这个Panel中，我们还需要两个Panel，一个是左边的验证码输入，一个是右边的验证码显示。
如果按照上面的那种对象化去写，必然会造成代码的混乱和难以理解。
会对后期的维护造成不必要的麻烦。
那么，我们该如何去完成这个组件的编写呢？这就是组件化所要完成的任务。
EXTJS组件化编程通过查看EXTJS的源码(最简单的是Ext.Window组件),会看到ExtJS最常用的一种对象创建方式：它是通过继承来实现了对象的封装，ExtJS最底层的那个基类是Observable，它提供了最基础的事件机制，通过层层的封装与扩展，它的派生类中是越来越庞大，所提供的功能也越来越多，就比如Window这个组件，它继承自Panel并添加了默认的resizabel，closable，draggable 等属性（Panel也可以加入类似的函数，但是需要编码实现）。
而Panel又继承自Container，并加入了渲染Title和tbar等功能。
那么，我们自己的对象也可以完全模仿这种语法进行创建如：上面的程序会输出World，而且在看到上面的语法之后，会想到什么？对，是Java等后台语言最常见的vo对象写法，看init函数，它就是一个构造函数，而下面则是get和set函数，不同的在哪里？那么就是prop这个属性其实在外面是可以随意调用的，无需使用get和set函数也能对其值进行修改（JavaScript就是这么“弱”……）,而且init构造函数不能被重载。
题外话：EXT的extend函数的本质是封装的Prototype原型继承，而JavaScript的delete 操作符是不可以操作Prototype原型方法函数的。
所以在此处通过delete操作符是无法正常删除对象属性的从而达到提高效率的预期目标。
但是我们也有办法对其进行私有化处理！我们还有闭包。
（研究不深，在此不发表言论）。
在这里不是要完全模仿Java等后台语言，而是就这个现象进行扩展，扩展成我们自己的对象，那么基于这个事例，我们应当可以很简单的就开发出属于我们自己的组件。
例如，我们要创建一个最基本最常用的登录窗口，我们在这里将其称之为一个模块，这个模块虽然小了点，但是他具备所有模块都应当具备的特征，代码如下：space("Gh.LoginModule");/***@author葛昊龑*@class Gh.LoginModule*@extends Ext.Window*/Gh.LoginModule = Ext.extend(Ext.Window, {title : "Login System",draggable : false,closable : false,resizable : false,mode : true,layout : "fit",autoHeight : true,width : 270,/***@description重写父类的初始化函数*/initComponent : function() {// 使用superclass来获取父类的初始化函数,类似Java中的superGh.LoginModule.superclass.initComponent.call(this, arguments);ernameField = new Ext.form.TextField({fieldLabel : "Your Account"});this.passwordField = new Ext.form.TextField({fieldLabel : "Your Password"});this.loginForm = new Ext.FormPanel({frame : true,autoHeight : true,defaults : {anchor : "95%"},items : [ernameField, this.passwordField]});this.add(this.loginForm);this.addButton("Submit",this.doLoginHandler,this);this.addButton("Regist",this.doRegHandler,this);},doLoginHandler : function(){//TODO Somthing},doRegHandler : function(){//TODO Somthing}});Ext.onReady(function(){var loginWin = new Gh.LoginModule();loginWin.show();})效果图那么，这样，我们实际上就利用继承来完成了我们的第一个组件--登录组件。
EXTJS对象化的特征是什么？1.封装---变量的作用域被固定在对象内部，内部的对象将会随着对象的销毁而被销毁（虽然垃圾回收不会主动来回收，但是这一步很重要）。
