Ext2.0基础知识详解

Ext2.0基础知识详解Ext2.0是一个JS框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。首先，一个表格应该有列定义，即定义表头ColumnModel：/ 定义一个ColumnModel，表头中有四列var cm = new Ext.grid.ColumnModel( header:编号,dataIndex:id, header:性别,dataIndex:sex, header:名称,dataIndex:name, header:描述,dataIndex:descn);cm.defaultSortable = true; 该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：header:编号,dataIndex:id,Sortable:true,现在就来看看这个Ext.data.Store是如何转换三种数据的。1.二维数组：/ ArrayDatavar data = 1,male,name1,descn1, 2,male,name1,descn2, 3,male,name3,descn3, 4,male,name4,descn4, 5,male,name5,descn5;/ ArrayReadervar ds = new Ext.data.Store( proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader(, name: id,mapping: 0, name: sex,mapping: 1, name: name,mapping: 2, name: descn,mapping: 3 );ds.load();ds要对应两个部分：proxy和xy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。现在用的是Ext.data.MemoryProxy，它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行按顺序读取四个数据，第一个叫id，第二个叫sex，第三个叫name，第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。mapping属性用于标记data中的读取后的数据与标头的映射关系，一般是不用设置的。但如果我们想让sex的数据中name栏中出现，可以设置mapping值。即id的mapping为2,后者为0。记得要执行一次ds.load()，对数据进行初始化。数据的显示显得非常简单：HTML文件：JS文件：var grid = new Ext.grid.GridPanel( el: grid, ds: ds, cm: cm);grid.render();其显示结果为：2.如何在表格中添加CheckBox呢？var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel( new Ext.grid.RowNumberer(),/自动行号 sm,/添加的地方 header:编号,dataIndex:id, header:性别,dataIndex:sex, header:名称,dataIndex:name, header:描述,dataIndex:descn);var grid = new Ext.grid.GridPanel( el: grid3, ds: ds, cm: cm, sm: sm,/添加的地方 title: HelloWorld);3. 如何做Grid上触发事件呢？下面是一个cellclick事件grid.addListener(cellclick, cellclick);function cellclick(grid, rowIndex, columnIndex, e) var record = grid.getStore().getAt(rowIndex); /Get the Record var fieldName = grid.getColumnModel().getDataIndex(columnIndex); /Get field name var data = record.get(fieldName); Ext.MessageBox.alert(show,当前选中的数据是+data);4.如何做Grid中做出快捷菜单效果：grid.addListener(rowcontextmenu, rightClickFn);/右键菜单代码关键部分var rightClick = new Ext.menu.Menu( id:rightClickCont, /在HTML文件中必须有个rightClickCont的DIV元素 items: id: rMenu1, handler: rMenu1Fn,/点击后触发的事件 text: 右键菜单1 , /id: rMenu2, /handler: rMenu2Fn, text: 右键菜单2 );function rightClickFn(grid,rowindex,e) e.preventDefault(); rightClick.showAt(e.getXY();function rMenu1Fn() Ext.MessageBox.alert(right,rightClick);其Grid如下：5.如何将一列中的数据根据要求进行改变呢？比如说性别字段根据其male或female改变显示的颜色，这种ColumnMode中设计：var cm = new Ext.grid.ColumnModel( new Ext.grid.RowNumberer(), sm, header:编号,dataIndex:id, header:性别,dataIndex:sex,renderer:changeSex, header:名称,dataIndex:name, header:描述,dataIndex:descn);cm.defaultSortable = true;function changeSex(value) if (value = male) return 红男; else return 绿女; 其它两种数据的Grid显示是相同的，其不同之处在于数据获取的过程：6.Json数据至于这种数据的类型请大家自己看Ajax的书籍：/JsonDatavar data = coders: id: 1, sex: male, name:McLaughlin, descn: brettnewI , id: 2, sex: male,name:Hunter, descn: , id: 3, sex: female,name:Harold, descn: , id: 4, sex: male,name:Harolds, descn: , musicians: id: 1, name: Clapton, descn: guitar , id: 2, name: Rachmaninoff, descn: piano /ds使用的MemoryProxy对象和JsonReader对象var ds = new Ext.data.Store( proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.JsonReader(root: coders, name: id, name: sex, name: name, name: descn ) );ds.load();var grid = new Ext.grid.GridPanel( el: grid3, ds: ds, cm: cm, sm: sm, title: HelloWorld, autoHeight: true/一定要写，否则显示的数据会少一行);grid.render();7.使用XML数据：注意，读取XML数据必须在服务器上进行。XML数据test.xml的内容： 2 1 male Taylor Coder var ds3 = new Ext.data.Store( url: test.xml, /XML数据 reader: new Ext.data.XmlReader(record: item, /使用XmlReader对象 name: id, name: sex, name: name, name: descn );8.从服务器获取数据和数据翻页控件从一个服务器文件，如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据，也可以被Ext读取，并被Grid显示：服务器文件data.asp:% start = cint(request(start) limit = cint(request(limit) dim json json=cstr(totalProperty:100,root:) for i = start to limit + start-1 json =json + cstr(id:) +cstr(i) + cstr(,name:name) + cstr(i) + cstr(,descn:descn) + cstr(i) + cstr() if i limit + start - 1 then json =json + , end if next json = json + response.write(json)%我们可以看到，这个页面会根据传入的start和limit的不同，返回不同的数据，其实质是个分页的代码。下面是start=0,limit=10的JSON数据：totalProperty:100,root:id:0,name:name0,descn:descn0,id:1,name:name1,descn:descn1,id:2,name:name2,descn:descn2,id:3,name:name3,descn:descn3,id:4,name:name4,descn:descn4,id:5,name:name5,descn:descn5,id:6,name:name6,descn:descn6,id:7,name:name7,descn:descn7,id:8,name:name8,descn:descn8,id:9,name:name9,descn:descn9我们使用分页控件来控制Grid的数据：Ext.onReady(function() var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel( new Ext.grid.RowNumberer(), sm, header:编号,dataIndex:id, header:性别,dataIndex:sex, header:名称,dataIndex:name, header:描述,dataIndex:descn ); cm.defaultSortable = true; var ds = new Ext.data.Store( proxy: new Ext.data.HttpProxy(url:data.asp), reader: new Ext.data.JsonReader( totalProperty: totalProperty, root: root , name: id, name: name, name: descn ) ); ds.load(params:start:0,limit:10); var grid = new Ext.grid.GridPanel( el: grid3, ds: ds, cm: cm, sm: sm, title: ASP-JSON, bbar: new Ext.PagingToolbar( pageSize: 10, store: ds, displayInfo: true, displayMsg: 显示第 0 条到 1 条记录，一共 2 条, emptyMsg: 没有记录 ), tbar: new Ext.PagingToolbar( pageSize: 10, store: ds, displayInfo: true, displayMsg: 显示第 0 条到 1 条记录，一共 2 条, emptyMsg: 没有记录 ) ); grid.render();)10.如何在Grid的上方添加按钮呢？添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条：var grid = new Ext.grid.GridPanel( el: grid3, ds: ds, cm: cm, sm: sm, title: HelloWorld, tbar: new Ext.Toolbar( items: id:buttonA ,text:Button A ,handler: function() alert(You clicked Button A); , new Ext.Toolbar.SplitButton() , id:buttonB ,text:Button B ,handler: function() alert(You clicked Button B); , - , id:buttonc ,text:Button c ) );11.将GridPanel放入一个Panel或TabPanel中var tabs = new Ext.TabPanel( collapsible: true ,renderTo: product-exceptions ,width: 450 ,height:400 ,activeTab: 0 ,items: title: Unmatched , title: Matched );tabs.doLayout();var panel = new Ext.Panel( renderTo: panel, title:panel, collapsible:true, width:450, height:400, items:grid /管理grid);Panel必须有DIV存在。其包含的Component有items管理。Ext中FormPanel面板及Form控件横排测试(CSS) 在实际的网页开发中，大部分时间都要涉及到Form表单的处理。在Ext框架中也提供了很多这方面的控件，而且还有一个专门的FormPanel布 局，该布局默认为放在面板上面的所有控件都是换行放置，而在实际应用中为了美观，有些需要横排，特别是Radio控件，这个时候就需要我们重新定制这些控 件的布局了，该例子中使用CSS来实现这些功能，先贴出一张效果图。Ext中FormPanel面板及Form控件横排测试(CSS).allow-float clear:none!important; /* 允许该元素浮动 */.stop-float clear:both!important; /* 阻止该元素浮动 */.sex-male float:left;.sex-female float:left;padding:0 0 0 20px;.age-field float:left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;Ext.BLANK_IMAGE_URL = ./ext/resources/images/default/s.gif;Ext.onReady(function() /创建Form面板var fp = new Ext.form.FormPanel(buttonAlign:center,labelAlign:right,labelWidth:40,frame:true,bodyStyle:padding:8px 0 0 0;,items:xtype:textfield,fieldLabel:姓名,name:n_username,id:i_username,width:320,xtype:radio,fieldLabel:性别,boxLabel:男,name:sex,id:male,itemCls:sex-male, /向左边浮动,处理控件横排clearCls:allow-float, /允许两边浮动,在实际生成的HTML结构中有专门的DIV阻断浮动checked:true,xtype:radio,boxLabel:女,name:sex,id:female,itemCls:sex-female, /向左浮动,处理控件横排clearCls:allow-float, /允许两边浮动hideLabel:true /不显示前面性别的标签,xtype:textfield,fieldLabel:年龄,name:n_age,id:i_age,itemCls:age-field, /向左浮动,处理控件横排width:133,xtype:textfield,fieldLabel:住址,name:n_address,id:i_address,itemCls:stop-float, /不允许浮动,结束控件横排width:320,buttons:text:确定,handler:onOK /实际应用一般是处理fp.getForm.submit()事件, text:重置,handler:function() fp.getForm().reset(); ,keys: /处理键盘回车事件key:Ext.EventObject.ENTER,fn:onOK,scope:this);/确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合function onOK() var strMsg;strMsg = 姓名： + fp.getComponent(i_username).getValue() + ，性别：;if (fp.getComponent(male).checked) strMsg += 男;if (fp.getComponent(female).checked) strMsg += 女;strMsg += ，年龄： + fp.getComponent(i_age).getValue();strMsg += ，住址： + fp.getComponent(i_address).getValue();alert(strMsg);/创建主窗口new Ext.Window(title:Ext中FormPanel面板及Form控件横排测试(CSS),width:400,closable:false,collapsible:true,draggable:false,resizable:false,modal:true,border:false,items:fp,buttons:).show(););EXT树重新加载 ext js 创建树 Js代码 1. varTree=Ext.tree; 2. 3. deptTree=newTree.TreePanel( 4. el:elementId, 5. autoScroll:true, 6. animate:true, 7. enableDD:true, 8. containerScroll:true, 9. loader:newTree.TreeLoader( 10. dataUrl:CONTEXT_PATH+/depts/deptTree.do, 11. baseParams:filter 12. ) 13. ); 14. 15. /settherootnode 16. root=newTree.AsyncTreeNode( 17. text:rootDesc, 18. draggable:false, 19. id:-1 20. ); 21. deptTree.setRootNode(root); 22. 23. /renderthedeptTree 24. deptTree.render(); 25. root.expand(); var Tree = Ext.tree;deptTree = new Tree.TreePanel(el : elementId,autoScroll:true,animate:true,enableDD:true,containerScroll: true,loader: new Tree.TreeLoader(dataUrl: CONTEXT_PATH + /depts/deptTree.do,baseParams: filter);/ set the root noderoot = new Tree.AsyncTreeNode(text: rootDesc,draggable:false,id:-1);deptTree.setRootNode(root);/ render the deptTreedeptTree.render();root.expand();ext js 重新加载树 Js代码 1. /* 2. *重新加载树 3. * 4. *paramf 5. *f过滤树的条件如:placeid:xxxxx 6. */ 7. reload:function(f) 8. filter=f; 9. 10. varloader=deptTree.getLoader(); 11. deptTree.on(beforeload,function() 12. loader.dataUrl=loader.dataUrl; 13. loader.baseParams=filter; 14. ); 15. root.reload(); 16. 17. Feedback 18. #RE: EXT树重新加载19. 怎么出发这个 重新加载的时间事件 加入 在 button 中 在onclick 事件中 怎么来 调用 /* * 重新加载树 * * param f * f 过滤树的条件 如:placeid:xxxxx */ reload : function (f) filter = f; var loader = deptTree.getLoader(); deptTree.on(beforeload, function() loader.dataUrl = loader.dataUrl ; loader.baseParams = filter; ); root.reload(); ext中树结构带复选框的处理 在Faceye基础版(开源)中,使用了大量的树结构,比如台台管理树,用户RSS订阅及分类树,用户博客分类对,网址导航分类树,开源项目分类树,博客管理树等大量的树形结构,甚至在用户授权,用户分组,资料分类等也都使用了树结构,树结构的处理,在Faceye中相比比较成熟，这些，是基于前期项目中对Struts-menu，Dtree等处理 关于StrutsMenu，Dtree的处理，在我早期的博客中都有描述 带有复选框的树，在实际的项目中，特别是授权结构中，有大量的使用我们来看一下Faceye中如何处理这种带复选框的树形结构 首先，Faceye使用了Ext的树解决方案，所以，所有的数据结构，均转化为Ext中树解决方案的数据结构在这里，我们可以很方便的把这一结构转化为其它树支持的数据结构，比如Strus-menu,dtreee等 下面是对树完整的脚本处理代码 code /* *RoleController * 角色访问权限管理 * 管理角色对模块的访问权限 * 网络支持系统 * 作者:宋海鹏 / */ Ext.BLANK_IMAGE_URL = scripts/ext/resources/images/vista/s.gif; poents.core.security.RoleVisiteModelPermission= init:function(roleId) Ext.QuickTips.init(); /初始化全局 QuickTips 实例QuickTips为所有元素提供有吸引力和可定制的工具提示。QuickTips 是一个单态（singleton）类，被用来为多个元素的提示进行通用地、全局地配置和管理。if(Ext.getCmp(tree) getCmp( String id ) : Ext.Component Ext.ComponentMgrget的简写方式。Shorthand . Ext.ComponentMgrget的简写方式。Shorthand for Ext.ComponentMgrget 参数项： id : String 返回值： Ext.Component Ext.get(tree-viewer).remove(true); / Ext.getCmp(tree).destroy(this); Ext.getBody().createChild(tag:div,id:tree-viewer); var tree; var root; / if(!tree) var Tree = Ext.tree; tree = new Ext.tree.TreePanel( el:tree-viewer, id:tree, autoScroll:true, animate:true, border:false, enableDD:true, containerScroll: true, rootVisible:false, loader: new Ext.tree.TreeLoader( dataUrl:/faceye/treeAction.do?method=treeWithCheckBoxForPermission&roleId=+roleId / uiProviders: / col: Ext.ux.CheckColumnNodeUI / ) / columns: / header:node, / dataIndex:name / / ); /Defint node click event,when node is clicked,send data to inner div and show data in / set the root node root = new Tree.AsyncTreeNode( text: Common Platform, draggable:false, id:source, checked:true / uiProvider: Ext.tree.CheckboxNodeUI ); tree.setRootNode(root); /* *Open node URL in a target contanier */ /全部展开 tree.expandAll(); tree.on(checkchange,function(node) if(!node.isLeaf() node.toggle(); fireCheckChange(node); / node.cascade(function(n) / n.getUI().toggleCheck(); / ); ); /* * 当fire checkchange时执行 */ function fireCheckChange(node) if(node.getUI().isChecked() checkedChildrenNodes(node); checkedParentNodes(node); else /取得当前节点的所有子节点,包括当前节点 var allChildrenNodes=getAllChildrenNodes(node); /如果当前节点的所有子节点中,不存在checked=true的节点,那么将当前节点置为checked=false. / /如果当前节点有子节点,同时,当前节点checked=false,那么将其所有子节点置为checked=false for(var i=0;i1) for(var i=0;i1) for(var i=0;iallParentNodes.length;i+) if(!allParentNodesi.getUI(