EXT各个控件属性(6).docx

ext3.1 全选/反选/取消/临时数据集1.定义数据集/* 默认源字符串 */var Regular_Data = totalProperty:2, root:/* 临时数据源 */var Regular_store = new Ext.data.Store( proxy: new Ext.data.MemoryProxy(), reader: new Ext.data.JsonReader( root: root, totalProperty: totalProperty, fields: name: Regular_name, type: string );Regular_store.loadData(Regular_Data); 2.临时数据集添加数据var Data_1001 = Ext.data.Record.create(name: Regular_name); var a = SmRegulartree.getSelections(); Ext.each( a,function (item,index,allItems) var foundItem = Regular_store.find(Regular_name, ); if (foundItem = -1) Regular_store.add(new Data_1001(Regular_name:item.dataname); ); 3.全选反选取消 bbar : text:全选, handler:function() var count = Regular_store.getCount(); if(count0) var a= new Array(); for(var i=0;i0) var a= new Array(); for(var i=0;icount;i+) ai=Regular_store.data.itemsi.id+-+i; var list2 = regularg1.selModel.getSelections(); for(var k=0; ka.length; k+) str = ak.split(-); for (var j=0; jlist2.length; j+) id = list2j.id.split(-); if(str2=id2) break; if (jlist2.length) continue; if (trims!=) trims+=,; trims+=k.toString(); regularg1.getSelectionModel().selectRows(trims);/Ext.MessageBox.alert(提示, result); ,-, text:取消, handler:function() regularg1.getSelectionModel().clearSelections(); grid表格的操作 行选择模式： Js代码 var rowcount = grid.getSelectionNode().getSelections(); var rowcount = grid.getSelectionNode().getSelections(); 可以获取全部选中的记录，得到的rowcount将是一个Array，比如想获取sex列的数据，语句如下 Js代码 var strsex = rowcounti.get(sex); var strsex = rowcounti.get(sex); 单元格选择模式 如果在GridPanel的配置属性增加sm属性如下 Js代码 sm:new Ext.grid.CellSelectionModel(); sm:new Ext.grid.CellSelectionModel(); 则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格，而不是默认的选择某一行。选择方式如下 Js代码 var cell = grid.getSelectionNode().getSelectedCell(); var cell = grid.getSelectionNode().getSelectedCell(); 得到的cell记录了当前选择的行(cell0)以及列(cell1).可以通过一下语句得到该单元格数据 Js代码 var colname = grid.getColumnModel().getDataIndex(cell1); /获取列名 var celldata = grid.getStore().getAt(cell0).get(colname); /获取数据 var colname = grid.getColumnModel().getDataIndex(cell1); /获取列名 var celldata = grid.getStore().getAt(cell0).get(colname); /获取数据 getStore():获取表格的数据集 getAt():获取该数据集cell0行 get():获取该行colname的数据 2） 为表格增加链接 有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html 如下：id:3,header:名称,dataIndex:name,renderer:DomUrl, 定义DomUrl方法 Js代码 function DomUrl(value) return +value+; function DomUrl(value) return +value+; 如果表格内的数据是一个链接如：这样写法自然没有问题，但是大多数时候我们在表格中不会直接写一个链接，如果又需要根据 单元格内容动态为链接添加几个参数。那这种写法就几乎没有什么用了。因为这个属性是在表格初始化的时候定义好的，而且表格初始化之后这个属性无法改变，也 就是只读属性。 处理方法如下： 定义一个全局变量，初始值为0；DomUrl函数如下 Js代码 function DomUrl(value) var row = grid.getSelectionModel().selectRow(startrow);/选中当前行 var rownum = grid.getSelectionModel().getSelected();/获取当前行 startrow +; var strurl = abc.jsp?id= + rownum.get(id);/获取当前选中行的值，并组织链接字符串 return +value+; function DomUrl(value) var row = grid.getSelectionModel().selectRow(startrow);/选中当前行 var rownum = grid.getSelectionModel().getSelected();/获取当前行 startrow +; var strurl = abc.jsp?id= + rownum.get(id);/获取当前选中行的值，并组织链接字符串 return +value+; 不过不要忘记在下次提交的时候将startrow赋值为0。 3） 表格的属性 表格的属性分为配置属性（在操作表格时无法修改），以及其他可读写属性，方法，以及事件。如下： 配置属性 a) activeItem：渲染布局时激活的子元素。 b) applyTo：指定渲染对象。 c) autoDestroy：当容器的子元素从容器中移除时是否自动销毁。 d) autoExpandColumn：指定自动填充表格剩余区域的列id e) autoExpandMax：可自动扩张的最大宽度。 f) autoExpandMin：可自动扩张的最小宽度 g) autoHeight:自动扩充高度 h) autoShow：是否自动显示 i) autoWidth：自动扩充宽度 j) bbar/tbar：底部/顶部状态栏 k) bufferResize：容器再布局的缓冲频率 l) colModel/cm:列模式 m) cls：组件的额外css格式。 n) collapsible:是否显示快捷隐藏按钮 o) defaults：指定默认配置。 p) disableSelection：是否禁止选择表格行或列 q) enableDragDrop：是否允许表格列的拖放操作。 r) enableHdMenu：是否显示表格列的菜单。 s) frame：边框是否显示 t) loadMask: 是否显示加载动画 u) selModel/sm：表格选择模式 v) store:表格数据集 w) stripeRows：是否显示分隔线。 x) title：表格标题 方法 a) getColumnModel()：得到表格列模型 b) getGridEl():得到表格下的元素 c) getPosition():得到组件的当前位置，返回一个数组 d) getSelectionModel():得到选中模型 e) getSize():得到组件大小 f) getStore():得到组件的数据集 g) getView():得到表格的GridView对象。 h) hide():隐藏当前组件 i) isVisible():判断当前组件是否显示 j) setDisabled( Boolean):设置组件的可用性 k) un():解除组件的监听 l) on()：为组件添加监听 on ( String eventName, Function handler, Object scope ) eventName:添加监听的名称 handler:事件处理函数 scope:事件响应的作用域,包括scope,delay,single,buffer。布局嵌套 横向摆放组件Ext.onReady(function() Ext.QuickTips.init(); /初始化提示信息 var simple = new Ext.FormPanel( /xtype: form, renderTo:div, id:form, /title:测试, labelWidth: 55, align:center, /style: margin:10 auto;align:center, width:850, height:320, /border : false, /不显示边框 /定义表单元素 items: xtype : panel, layout: table, frame:false, /渲染面板 defaults: /设置默认属性 bodyStyle:borderColor:#FFFFFF, /设置面板体的背景色 align:center , border : false, items : xtype:panel, layout:form, items : fieldLabel: 待处理, id:userId, name: userId,/元素名 allowBlank:false, /不允许为空 xtype: textarea, width: 300, height:200 , xtype:panel, layout:form, items : fieldLabel: 结果集, id:username, name: username,/元素名 xtype: textarea, width: 300, height:200 , buttons: text: 执行, type: submit, handler:function() var name = $(#userId).val(); Ext.MessageBox.alert(提示, name);/取值方式一 if(simple.form.isValid() var userId=Ext.getCmp(userId).getValue().toUpperCase();/取值方式二 Ext.getCmp(username).setValue(userId); /赋值 , text: 重置, handler:function() simple.form.reset(); /重置表单 ); var formPanel = new Ext.form.FormPanel( layout : form,/ 可不写,默认 renderTo:div1, /border:false, width:800, height:200, items : layout : column, border:false, items : columnWidth : .3, layout : form, border:false, items : fieldLabel: 待处理,xtype: textfield,fieldLabel: 待处理,xtype: textfield,fieldLabel: 待处理,xtype: textfield , columnWidth : .3, layout : form, border:false, items : fieldLabel: 待处理,xtype: textfield,fieldLabel: 待处理,xtype: textfield,fieldLabel: 待处理,xtype: textfield , columnWidth : .3, layout : form, border:false, items : fieldLabel: 待处理,xtype: textfield,fieldLabel: 待处理,xtype: textfield,fieldLabel: 待处理,xtype: textfield , layout : column, border:false, items : columnWidth : .3, layout : form, border:false, items : fieldLabel: 待处理,xtype: textfield , columnWidth : .7, layout : form, border:false, items : fieldLabel: 待处理,xtype: textfield,width:420 , fieldLabel: 待处理,xtype: textfield,width:520, fieldLabel: 待处理,xtype: textfield,width:520 ); );Grid 增删改var store=null; Ext.onReady(function() Ext.QuickTips.init(); Ext.form.Ftotype.msgTarget = side; /创建json存储器 store=new Ext.data.JsonStore( id:store, url:userInfoCptAction.action, /数据来源 root: rows, autoLoad: true, fields: name:userId, name:username, name:password, name:age, name:mobile, name:address ); store.load(); /加载数据 / 创建表格 var grid = new Ext.grid.GridPanel( store: store, sm: new Ext.grid.RowSelectionModel(singleSelect:false), cm: new Ext.grid.ColumnModel( id:userId,header: 用户ID, width: 85, sortable: true, dataIndex: userId, header: 用户昵称, width: 95, sortable: true, dataIndex: username, header: 密码, width: 85, sortable: true, dataIndex: password, header: 年龄, width: 85, sortable: true, dataIndex: age, header: 手机号, width: 85, sortable: true, dataIndex: mobile, header: 地址, width: 85, sortable: true, dataIndex: address ), stripeRows: true, autoExpandColumn: userId, height:350, width:600, title:数据显示, bbar: text:添加, tooltip:新添一个用户, listeners :click:function() var win=Ext.getCmp(win); win.show(); , -, text:修改, tooltip:修改用户信息, listeners :click:function() if(grid.getSelectionModel().hasSelection() var records =grid.selModel.getSelections();/得到被选择的行的数组 var recordsLen = records.length;/得到行数组的长度 if( recordsLen1) Ext.Msg.alert(系统提示信息,请选择其中一项进行编辑！);/一次只给编辑一行 else var record=grid.getSelectionModel().getSelected();/获取选择的记录集 var userId=record.get(userId); var win=Ext.getCmp(win); win.show(); /查询该用户数据 UserInfoCptDwr.selectByUserId(userId,function(msg) DWRUtil.setValues(msg); win.getComponent(form).getComponent(userId).setDisabled(true); ); else Ext.Msg.alert(提示,请先选择要编辑的行!); ,-, text:删除, tooltip:删除一个或多个用户, listeners :click:function() if(grid.getSelectionModel().hasSelection() var records =grid.selModel.getSelections();/得到被选择的行的数组 var recordsLen = records.length;/得到行数组的长度 var myUserId=Ext.get(myUserId).getValue(); for(var i=0;irecordsLen;i+) if(recordsi.get(userId)=myUserId) Ext.Msg.alert(提示,你不能删除自己！); return; for(var i=0;irecordsLen;i+) /删除该用户 UserInfoCptDwr.deleteUserByUserId(recordsi.get(userId),function() store.reload(); ); else Ext.Msg.alert(提示,请先选择要删除的行!); ); grid.render(grid-example); );Ext.onReady(function() Ext.QuickTips.init(); /初始化提示信息 Ext.form.Ftotype.msgTarget = side; /提示信息显示位子 /创建表单 var simple = new Ext.FormPanel( id:form, labelWidth: 75, width:300, defaults: width: 150, defaultType: textfield,/默认字段类型 /定义表单元素 items: fieldLabel: 用户ID, id:userId, name: userId,/元素名 allowBlank:false, /不允许为空 listeners :blur:function() var userId=$(userId).value; /判断是否存在该用户ID UserInfoCptDwr.ifExistTheUserId(userId,function(msg) if(msg=false) Ext.getCmp(userId).markInvalid(此用户ID已经被占用！); ); , inputType:password, fieldLabel: 密码, name: password, allowBlank:false , fieldLabel: 用户昵称, id:username, name: username,/元素名 allowBlank:false , /不允许为空 listeners:blur:function() var username=$(username).value; /判断该用户昵称是否存在 UserInfoCptDwr.ifExistTheUserName(username,function(msg) if(msg=false) Ext.getCmp(username).markInvalid(此昵称已经被占用！); ); , fieldLabel: 用户年龄, name: age, regex :new RegExp(0-9+$), regexText :你输入的年龄不正确 , fieldLabel: 手机号, name: mobile, regex :new RegExp(0-911$), regexText :你输入的手机号不正确 , fieldLabel: 地址, name: address , buttons: text: 执行, type: submit, handler:function() if(simple.form.isValid() var cpt=userId:null,username:null,password:null,age:null,mobile:null,address:null; DWRUtil.getValues(cpt); /保存或更新表单 UserInfoCptDwr.saveOrUpdate(cpt,function(msg) if(msg=true) Ext.Msg.alert(系统提示！,执行成功！); simple.form.reset(); store.reload(); else Ext.Msg.alert(警告！,无法执行该操作！); ); , text: 重置, handler:function() simple.form.reset(); /重置表单 ); /创建窗