EXT学习笔记mq上Word下载.docx

1、 ）; var data = /添加数据 1,name1descn1,2name2descn23name3descn34name4descn45name5descn5 ; var store = new Ext.data.Store（ /创建一个数据存储对象，对原始数据转换 proxy: new Ext.data.MemoryProxy（data）,/获取数据 reader: new Ext.data.ArrayReader（, /解析数据 name: ） ）; store.load（）; /初始化数据 var grid = new Ext.grid.GridPanel（ autoHeight

2、: true, renderTo:grid, store: store, cm: cm）;/headbody./examples.jsdiv id=grid/div/body/html斑马线var grid = new Ext.grid.GridPanel（ stripeRows:读取数据时的遮罩和提示功能 width: 350, height: 150, loadMask:自主决定每列宽度var cm = new Ext.grid.ColumnModel（,width:35,80,120让每列自动填满grid cm, viewConfig: forceFit: true 让指定列的宽度自动延

3、伸50, id:,header:200）; autoExpandColumn:Grid按列排序,sortable:true,解决中文排序Ext.data.Store.prototype.applySort = function（） /重写applyAssort函数 if （this.sortInfo & !this.remoteSort） var s = this.sortInfo, f = s.field; var st = this.fields.get（f）.sortType; var fn = function（r1, r2） var v1 = st（r1.dataf）, v2 = s

4、t（r2.dataf）; if （typeof（v1） = string） return v1.localeCompare（v2）; return v1 v2 ? 1 : （v1 标签被用来组合文档中的行内元素。function renderSex（value） if （value = male return span style=color:red;font-weight:bold;红男img src=user_male.png; else green;绿女user_female.pngfunction renderDescn（value, cellmeta, record, rowInde

5、x, columnIndex, store） var str = input type=button value=查看详细信息 onclick=alert（ +这个单元格的值是： + value + n这个单元格的配置是：cellId: + cellmeta.cellId + ,id: + cellmeta.id + ,css: + cellmeta.css + n这个单元格对应行的record是： + record + ，一行的数据都在里边n这是第 + rowIndex + 行n + columnIndex + 列n这个表格对应的Ext.data.Store在这里： + store + ，随

6、便用吧。） return str;性别sex,renderer:renderSex,renderDescn给grid的行和列设置颜色var PersonRecord = Ext.data.Record.create（stringintcolor new Ext.data.ArrayReader（, PersonRecord） columns: , dataIndex:, dataInex: , viewConfig : forceFit : enableRowBody : getRowClass :function（record, rowIndex, p, ds） var cls = whit

7、e-row switch （record.data.color） case #FBF8BF : cls = yellow-row break;#99CC99green-row#F5C0C0red-row return cls;自动显示行号和复选框 new Ext.grid.RowNumberer（）,如果删除某一行，便不连续了，所以要刷新Grid的视图，重新计算行号。Ext.get（remove）.on（click, function（） store.remove（store.getAt（1）; grid.view.refresh（）;input type=button id=remove v

8、alue=删除第二行复选框var sm = new Ext.grid.CheckboxSelectionModel（）; var cm = new Ext.grid.ColumnModel（ new Ext.grid.RowNumberer（）, sm, sm: sm选择模型行选择模型：RowSelectionModel如果只希望选择一行true, new Ext.grid.RowSelectionModel（singleSelect:true）单元格选择模型：CellSelectionModelTree对象两种选择模型，DefaultSelectionModelMultiSelectionM

9、odel表格视图 Ext.grid.GridViewscroll grid.getView（）.scrollToTop（）; Ext.get（focus grid.getView（）.focusCell（0, 0）; var cell = grid.getView（）.getCell（0, 0）; cell.style.backgroundColor = redgrid.getView（）必须在创建Ext.grid.GridPanel之后调用，它只能获得Ext.grid.GridPanel中创建好的实例创建GridView时设置初始参数用viewConfig参数表格分页如果配置了分页工具条，s

10、tore.load（）必须在构造grid以后执行 bbar: new Ext.PagingToolbar（ pageSize: 10, displayInfo: displayMsg:显示第 0 条到 1 条记录，一共 2 条 emptyMsg:没有记录 ）store.load（）;通过后台脚本获得分页数据jsp文件，需要tomcat服务器运行。Jsp文件如下：%String start = request.getParameter（start）;String limit = request.getParameter（limittry int index = Integer.parseInt（

11、start）; int pageSize = Integer.parseInt（limit）; String json = totalProperty:100,root: for （int i = index; i new Ext.data.HttpProxy（url:08_02_01.jsp）, new Ext.data.JsonReader（ totalProperty:totalProperty root:root , 分页工具栏显示在grid的顶部 tbar:让Ext支持前台排序内存分页功能PagingMemoryProxy.js proxy: new Ext.data.PagingM

12、emoryProxy（data）,后台排序09_01.jsp ）, remoteSort:EditorGrid,editor:new Ext.grid.GridEditor（new Ext.form.TextField（ allowBlank: false ）, ）clicksToEditor：1 /单击鼠标就可以编辑单元格添加 删除行var Record = Ext.data.Record.create（var grid = new Ext.grid.EditorGridPanel（ tbar: new Ext.Toolbar（-, text:添加一行 handler: function（） var p = new Record（ id: name: descn: grid.stopEditing（）; store.insert（0, p）; grid.startEditing（0, 0）; /激活第一行第一列的编辑状态 , 删除一行 Ext.Msg.confirm（信息, 确定要删除？, function（bt