*模拟map */ Map = function(){ var mapAddM = { /** * entry函数 * @param {Object} key * @param {Object} val */ entry: function(key, val, flag){ this.key = key; this.value = val; this.flag = flag; }, //put方法 put: function(key, val, flag){ this.store[this.store.length] = new this.entry(key, val, flag); }, //get方法 get: function(key){ for (var i = 0; i < this.store.length; i++) { if (this.store[i].key === key) return this.store[i].value; } }, //get方法 getFlag: function(key){ for (var i = 0; i < this.store.length; i++) { if (this.store[i].key === key) return this.store[i].flag; } }, //remove方法 remove: function(key){ for (var i = 0; i < this.store.length; i++) { this.store[i].key === key && this.store.splice(i, 1); } }, //keyset keySet: function(){ var keyset = new Array; for (var i = 0; i < this.store.length; i++) keyset.push(this.store[i].key); return keyset; }, //valset valSet: function(){ var valSet = new Array; for (var i = 0; i < this.store.length; i++) valSet.push(this.store[i].value); return valSet; }, //flagSet flagSet: function(){ var flagSet = new Array; for (var i = 0; i < this.store.length; i++) flagSet.push(this.store[i].flag); return flagSet; }, //clear clear: function(){ this.store.length = 0; }, //size size: function(){ return this.store.length; }, /** * 迭代子 */ iterator: function(){ //TODO 待实现 var obj = this.keySet();//所有的key集合 var idx = 0; var me = { /** * 当前key */ current: function(){ return obj[idx - 1]; }, /** * 第一个key */ first: function(){ return obj[0]; }, /** * 最后一个key */ last: function(){ return obj[obj.length - 1]; }, /** * 是否还有下一个元素 */ hasNext: function(){ idx++; if (idx > obj.length || null == obj[obj.length - 1]) return false; return true; } }; return me; } }; for (var method in mapAddM) { this.store = new Array; Map.prototype[method] = mapAddM[method]; } } /** * 生成column * @param {Object} map */ function createColumns(map){ var columns = []; var i = 0; for (var it = map.iterator(); it.hasNext();) { var currentKey = it.current();//本次循环的key var currentVal = map.get(currentKey);//当前value var currentFlag = map.getFlag(currentKey);//判断是否隐藏该列 var columni = {}; columni.dataIndex = currentKey; columni.header = currentVal; columni.sortable = true; columni.width = 115; if ((currentFlag && (currentFlag == "hide"))) { columni.hidden = true; } columns.push(columni); i++; } return columns; } /** * 生成keyset集合 * @param {Object} map */ function createReaderColumns(map){ var columns = []; var i = 0; for (var it = map.iterator(); it.hasNext();) { var currentKey = it.current();//本次循环的key var columni = {}; columni.name = currentKey; columns.push(columni); i++; } return columns; } /** * 渲染extgrid */ var _pageSize = 15; function rendExtGrid(_url, _params, renderDiv, map){ jQuery("#" + renderDiv).html("");//清空已经存在的数据 /** * 读取数据代理 */ var proxy = new Ext.data.HttpProxy({ url: _url, method: "POST" }); /** * 记录 */ var record = Ext.data.Record.create(createReaderColumns(map)); /** * 解析数据的reader */ var reader = new Ext.data.JsonReader({ totalProperty: "Total", root: "Rows", }, record); /** * 数据源 */ var store = new Ext.data.Store({ proxy: proxy, reader: reader, //remoteSort:true,//全局排序 baseParams: { method: "POST", searchParam: JSON.stringify(_params) //查詢參數 } }); /** * 遮罩 */ var loadMarsk = new Ext.LoadMask(document.body, { msg: '正在加载数据……', disabled: false, store: store }); //分页工具栏 var pagingToolbar = new Ext.PagingToolbar({ pageSize: _pageSize, store: store, displayInfo: true, displayMsg: '第{0}-第{1}条,一共{2}条', emptyMsg: "无数据", hideBorders: true, cls:"pageBar",//自定义样式 items: ['-', { pressed: false, enableToggle: true, cls: 'x-btn-text-icon details', toggleHandler: function(btn, pressed){ var view = grid.getView(); view.showPreview = pressed; view.refresh(); } }] }); //创建grid var grid = new Ext.grid.GridPanel({ store: store, region: 'center', border:false, mode: "remote", columns: createColumns(map), frame: false, //表格外加边框 collapsible: true, animCollapse: false, sm: new Ext.grid.RowSelectionModel({ singleSelect: true }), iconCls: 'icon-grid' }); grid.on('load',function(){gridSpan(grid,'row','1px solid #8080FF');}); store.load({ params: { start: 0, limit: _pageSize} }); /** * 容器:为了能宽高自适应 */ var viewPort = new Ext.Panel({ layout: 'fit', renderTo: renderDiv, autoScroll: false, height:400, bbar: pagingToolbar, items: [grid] }); } //合并单元格的函数,合并表格内所有连续的具有相同值的单元格。调用方法示例:grid.on('load',function(){gridSpan(grid,'row','1px solid #8080FF');}); //参数:grid-需要合并的表格,rowOrCol-合并行还是列,borderStyle-合并后单元格分隔线样式 function gridSpan(grid, rowOrCol, borderStyle){ var array1 = new Array(); var count1 = 0; var count2 = 0; var index1 = 0; var index2 = 0; var aRow = undefined; var preValue = undefined; var firstSameCell = 0; var allRecs = grid.getStore().getRange(); if(rowOrCol == 'row'){ count1 = grid.getColumnModel().getColumnCount(); count2 = grid.getStore().getCount(); } else { count1 = grid.getStore().getCount(); count2 = grid.getColumnModel().getColumnCount(); } for(i = 0; i < count1; i++){ preValue = undefined; firstSameCell = 0; array1[i] = new Array(); for(j = 0; j < count2; j++){ if(rowOrCol == 'row'){ index1 = j; index2 = i; } else { index1 = i; index2 = j; } var colName = grid.getColumnModel().getColumnId(index2); if(allRecs[index1].get(colName) == preValue){ allRecs[index1].set(colName, ' '); array1[i].push(j); if(j == count2 - 1){ var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1); if(rowOrCol == 'row'){ allRecs[index].set(colName, preValue); } else { allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue); } } } else { if(j != 0){ var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1); if(rowOrCol == 'row'){ allRecs[index].set(colName, preValue); } else { allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue); } } firstSameCell = j; preValue = allRecs[index1].get(colName); allRecs[index1].set(colName, ' '); if(j == count2 - 1){ allRecs[index1].set(colName, preValue); } } } } grid.getStore().commitChanges(); //添加所有分隔线 for(i = 0; i < grid.getStore().getCount(); i ++){ for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){ aRow = grid.getView().getCell(i,j); aRow.style.borderTop = borderStyle; aRow.style.borderLeft = borderStyle; } } //去除合并的单元格的分隔线 for(i = 0; i < array1.length; i++){ for(j = 0; j < array1[i].length; j++){ if(rowOrCol == 'row'){ aRow = grid.getView().getCell(array1[i][j],i); aRow.style.borderTop = 'none'; } else { aRow = grid.getView().getCell(i, array1[i][j]); aRow.style.borderLeft = 'none'; } } } }
相关推荐
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...
15.5.2 IE下的优秀JavaScript调试工具Companion.JS 15.5.3 DebugBar和Companion.JS的基本操作 15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 调试代码运行速度 15.6.3 查看对象属性 第16章 ExtJS案例...
15.5.2 IE下的优秀JavaScript调试工具Companion.JS 15.5.3 DebugBar和Companion.JS的基本操作 15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 调试代码运行速度 15.6.3 查看对象属性 第16章 ExtJS案例...
GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs ...那么 GWT-Ext 就是在 GWT 的基础上,将 ExtJs 的 JavaScript 接口映射或者封装为 Java 的接口。在 Java 的环境下开发和调试开发表现层,可以大大提高开发的速度。
Edit Grid限制编辑 ExtJS 4 DirectStore post参数的变化以及应对方法 ...js函数match、exec、test、search、replace、split使用介绍 技巧:Javascript使用隐藏的new来创建对象 禁止页面全选复制,兼容多种浏览器
-Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...
-类似于onReady函数,增加对onInit函数的支持,用来在执行页面初始化脚本之前调用。 -优化复选框列表和单选按钮列表,减少生成的代码量。 -修正CheckBoxList和RadioButtonList无法在回发中更新的BUG(破风、吉吉﹑...
-Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...
六、Ext.Element类中的动画函数 34 七、小结 35 第六章:元素操作与模板 36 一、重要也不重要的东西 36 二、Ext.DomHelper类 36 三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40...
3、分别封装了模型层、控制层、业务逻辑层和数据持久层的通用操作模块,层次分明,大大减少代码冗余,二次开发效率高。 4、系统是公司多个项目的基础框架,稳定性好,支持大并发。 二、主要功能 1、采用ExtJS 4.2...