ext 技术文档.docx

1、ext 技术文档1、 GridPanel 右键菜单实现方法：/* * 创建右键菜单 Time:2009-09-22 * param grid * param index * param e */ grid.addListener(rowcontextmenu, rightClickFn); var rightClick = new Ext.menu.Menu( id : rightClickCont, items : id:rMenu1, text : 查看数据内容, handler:ListRow , id:rMenu2, text : 删除此条数据, handler:delectRow )

2、; /* * 创建右键菜单 Time:2009-09-22 * param client * param rowIndex * param e */ function rightClickFn(client, rowIndex, e) e.preventDefault(); rightClick.showAt(e.getXY(); ; grid.addListener(rowdblclick, ListRow); /需要此段关键代码 【双击事件】 /* * 双击表格_查看数据 */ function ListRow(grid, e) var InformList = DataListID();

3、 var num = InformList.length; if(num 1) Ext.Msg.alert(提示,数据超过+num+条,请选择一条数据！); else Ext.Msg.alert(提示,数据为第+num+条！); ; grid.addListener(rowclick, delectRow); /需要此段关键代码 【单击事件】 /* * 右键_删除数据 */ function delectRow(grid, e) var InformList = DataListID(); var num = InformList.length; if(num 0) Ext.Msg.alert

4、(提示,请选择删除数据.); else Ext.Msg.alert(提示,共删除+num+条数据.); ;2、 双击 GridPanel 获取数据 并覆盖HTML/双击从表格获取数据 function list() ListForm.form.load( waitMsg : 正在获取消息内容.,/提示信息 waitTitle : 提示,/标题 url:page/ZiyouBaowen/informaction.jsp,/请求URL地址 获取后台数据 method:post,/请求方式 success:function(form,action)/加载成功的处理函数 var msgxmlList;

5、 var record = grid.getSelectionModel().each(function(rec) msgxmlList = rec.get(msgXml); ); if(msgxmlList = null) document.getElementById(xml).innerHTML = 消息内容无数据; else document.getElementById(xml).innerHTML = msgxmlList; , failure:function(form,action)/加载失败的处理函数 Ext.Msg.alert(错误, 服务器出现错误请稍后再试！); );3

6、、 创建一个新的窗口 / 定义修改密码表单 var ListForm = new Ext.FormPanel( region:center, border:false, frame:true, tabPosition:bottom, bodyStyle:padding:0px 0px 0, html: + + ); /创建弹出窗口 var win = new Ext.Window( title:消息_内容, layout:fit, width:600, closeAction:hide, height:400, resizable : false, shadow : true, modal :

7、true, closable:true, bodyStyle:padding:0 0 0 0, animCollapse:true, items:ListForm );textfield组件的基本用法 /这里是把TextField很重要的属性列出来实际在应用的时候不需要将每个属性都列出也许只需要一个属性就够了。 function ready() Ext.QuickTips.init(); var textfieldName = new Ext.form.TextField ( id:textfieldName, allowBlank:false,/默认是true,如果是false,就是不允许空

8、 /假如不为空时，定义提示信息默认的提示信息是：This field is required /要使提示内容出现，需要添加 Ext.QuickTips.init(); blankText:请输入数据, disabled:false,/默认是false emptyText:请正确输入数据,/默认是null fieldLabel:用户名称,/默认是 height:auto,/默认是auto hidden:false,/默认是false hideLabel:false,/默认是false hideMode:offsets,/默认display,可以取值：display，offsets，visibil

9、ity inputType:text,/输入类型 这个很重要，可以是radio, text, password, file 默认是text invalidText:invalidText：只能够输入数字,/默认是：The value in this field is invalid maxLength:100,/能够输入的内容的最大长度 maxLengthText:输入内容太长了,/超出最大长度的设置信息 minLength:2,/能够输入的内容的最小长度minLengthText:输入内容太短了,/没有达到最小长度的设置信息 readOnly:false,/内容是否只读，默认false re

10、gex:/d$/, /正则表达式这里假设只允许输入数字如果输入的不是数字就会出现下面定义的提示信息 regexText:regexText：只能够输入数字, /定义不符合正则表达式的提示信息 validateOnBlur:true,/默认是true,失去焦点时验证 validationDelay:300,/默认是250,验证延迟时间,毫秒数 validationEvent:click, /验证事件默认是keyup可以是String/Boolean/自定义的验证函数当输入的数据不符合正则表达式的要求时，就会执行这个函数 validator:function()Ext.Msg.alert(提示信息

11、,只能够输入数字);, value:,/自定义的信息默认是：undefined /x:number,y:number,在容器中的x,y坐标 width:auto,/默认是auto renderTo:Bind_TextField ); /以上就是TextField组件的常用定义。 Ext.onReady(ready); /form/显示图片xtype: box, id :box, width: 100, /图片宽度 height: 100, /图片高度 autoEl: tag: img, /指定为img标签 src: img/help.jpg /指定url路径 xtype:textfield,

12、inputType:image,/设置为图片格式显示 id:img, width:100, height:90, validationEvent:click, /验证事件默认是keyup可以是String/Boolean /自定义的验证函数当输入的数据不符合正则表达式的要求时，就会执行这个函数 validator:function()Ext.Msg.alert(提示信息,只能够输入数字); / 创建表格显示数据 /* * 创建InformactionRecord类型，对实体对象进行封装 */ var InformactionRecord = Ext.data.Record.create(/字段

13、 根据后台Bean来设定. name: id, name: msgXml, name: msgTime ); /* * 定义头部栏框 */ var toolbar = new Ext.Toolbar( text:删除数据,iconCls:remove,handler:showDelete ); /* * 定义复选框选择模式变量 */ var checkbox = new Ext.grid.CheckboxSelectionModel(); /* * 处理从后台获得数据，使用HttpProxy */ var store = new Ext.data.Store( /传递action./trans

14、cribe_get.action page/ZiyouBaowen/informaction.jsp proxy: new Ext.data.HttpProxy(url: ./transcribe_get.action), reader: new Ext.data.JsonReader( totalProperty: totalCount,/指定记录总数 totalCount result root: result/当前页面显示信息队列 result items ,InformactionRecord), remoteSort: true ); store.load(params:start:

15、0,limit:10);/进行分页查询 /* * 将显示的数据与Store中的数据相对应 */ var columns = new Ext.grid.ColumnModel(/根据上面定义 checkbox, header:编号,width:80,dataIndex:id,sorable:true, header: 内容,width:400, dataIndex: msgXml,sorable:true , header: 创建时间,width:160, dataIndex: msgTime,sorable:true ); columns.defaultSortable = true;/将所有

16、的列设置为可排序的 /* * 创建Grid表格组件 */ var grid = new Ext.grid.GridPanel( /title: 消息查看界面, region: center, /collapsible: true, loadMask: true,/开启读取数据提示功能，显示等待提示信息 store: store,/设置表格对应的数据集 tbar:toolbar,/设置顶端工具栏 cm: columns,/配置数据集 height: 333, /new Ext.grid.RowSelectionModel(singleSelect:true),/限制只能选取一行数据 sm: ch

17、eckbox, / 设置复选框选择模式 viewConfig: forceFit: false, columnsText: 显示的列, sortAscText: 升序, sortDescText: 降序 ,/分页工具条 bbar: new Ext.PagingToolbar( pageSize: 10, store: store, displayInfo: true ) );/删除数据/* * 辅助类_获取表格ID * return */ function DataListID() var record = grid.getSelectionModel().getSelections(); v

18、ar List = ; if(record.length = 0) Ext.Msg.alert(警告, 操作错误!); else for(var i = 0; i record.length ; i +) var rec = recordi; List.push(rec.get(id) return List; ; /* * 消息查看_显示删除对话框 */ function showDelete() var InformList = DataListID(); var num = InformList.length; if(num = 0) return ; Ext.MessageBox.co

19、nfirm(提示,您确定要删除所选数据吗？,function(btnId) if(btnId = yes) alert(btnId); DeleteInformaction(InformList); ) ; /* * 消息查看_删除数据 * param InformList */ function DeleteInformaction(InformList) var id = InformList.join(-);/将包含书籍ID的数组连接为-分隔的字符串 /显示正常删除的信息提示 var msgTip = Ext.MessageBox.show( title:提示, width : 250,

20、 msg:正在删除数据请稍后./提示消息 ); Ext.Ajax.request( url : ,/连接ACTION params : id : id,/传值，设置请求参数 method : POST, success : function(response,options) msgTip.hide();/隐藏提示信息 /解析字符串为JSON对象 var result = Ext.util.JSON.decode(response.responseText); if(result.success)/成功 /服务器端数据成功删除后，同步删除客户端列表中的数据 for(var i = 0 ; i

21、InformList.length ; i+) var index = store.find(id,InformListi); if(index != -1) var rec = store.getAt(index) store.remove(rec); Ext.Msg.alert(提示,删除数据信息成功。); else Ext.Msg.alert(提示,删除数据信息失败！); , failure : function(response,options)/请求失败后的回调函数 msgTip.hide();/隐藏提示信息 Ext.Msg.alert(提示,删除数据信息请求失败！); ); ;/e

22、xt 皮肤换色 themeChange.js 代码如下：Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox, editable : false, displayField : theme, valueField : css, typeAhead : true, mode : local, triggerAction : all, selectOnFocus : true, initComponent : function() var themes = 默认, ext-all.css, 浅灰色, xtheme-gray.css, 暗蓝色, xtheme-slate.css ; this.store = new Ext.data.SimpleStore( fields : theme, css, data : themes ); this.value = 默认; , initEvents : function() this.on(collapse, function() Ext.util.CSS.swapStyleSheet(theme, ext/resources/css/+ this.getValue(); ); );Ext.reg(themeCha