X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/examples/ux/LockingGridView.js diff --git a/examples/ux/LockingGridView.js b/examples/ux/LockingGridView.js index a4d1c9ba..e5d385fd 100644 --- a/examples/ux/LockingGridView.js +++ b/examples/ux/LockingGridView.js @@ -1,5 +1,11 @@ /*! - * Ext JS Library 3.2.2 + * Ext JS Library 3.3.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/*! + * Ext JS Library 3.3.0 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license @@ -22,8 +28,8 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { initTemplates : function(){ var ts = this.templates || {}; - if (!ts.master) { - ts.master = new Ext.Template( + if (!ts.masterTpl) { + ts.masterTpl = new Ext.Template( '
', '
', '
{lockedHeader}
', @@ -49,36 +55,40 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { }, initElements : function(){ - var E = Ext.Element, - el = this.grid.getGridEl().dom.firstChild, - cs = el.childNodes; - - this.el = new E(el); - this.lockedWrap = new E(cs[0]); - this.lockedHd = new E(this.lockedWrap.dom.firstChild); - this.lockedInnerHd = this.lockedHd.dom.firstChild; - this.lockedScroller = new E(this.lockedWrap.dom.childNodes[1]); - this.lockedBody = new E(this.lockedScroller.dom.firstChild); - this.mainWrap = new E(cs[1]); - this.mainHd = new E(this.mainWrap.dom.firstChild); - + var el = Ext.get(this.grid.getGridEl().dom.firstChild), + lockedWrap = el.child('div.x-grid3-locked'), + lockedHd = lockedWrap.child('div.x-grid3-header'), + lockedScroller = lockedWrap.child('div.x-grid3-scroller'), + mainWrap = el.child('div.x-grid3-viewport'), + mainHd = mainWrap.child('div.x-grid3-header'), + scroller = mainWrap.child('div.x-grid3-scroller'); + if (this.grid.hideHeaders) { - this.lockedHd.setDisplayed(false); - this.mainHd.setDisplayed(false); + lockedHd.setDisplayed(false); + mainHd.setDisplayed(false); } - - this.innerHd = this.mainHd.dom.firstChild; - this.scroller = new E(this.mainWrap.dom.childNodes[1]); - + if(this.forceFit){ - this.scroller.setStyle('overflow-x', 'hidden'); - } - - this.mainBody = new E(this.scroller.dom.firstChild); - this.focusEl = new E(this.scroller.dom.childNodes[1]); - this.resizeMarker = new E(cs[2]); - this.resizeProxy = new E(cs[3]); - + scroller.setStyle('overflow-x', 'hidden'); + } + + Ext.apply(this, { + el : el, + mainWrap: mainWrap, + mainHd : mainHd, + innerHd : mainHd.dom.firstChild, + scroller: scroller, + mainBody: scroller.child('div.x-grid3-body'), + focusEl : scroller.child('a'), + resizeMarker: el.child('div.x-grid3-resize-marker'), + resizeProxy : el.child('div.x-grid3-resize-proxy'), + lockedWrap: lockedWrap, + lockedHd: lockedHd, + lockedScroller: lockedScroller, + lockedBody: lockedScroller.child('div.x-grid3-body'), + lockedInnerHd: lockedHd.child('div.x-grid3-header-inner', true) + }); + this.focusEl.swallowEvent('click', true); }, @@ -91,33 +101,33 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { }, getCell : function(row, col){ - var llen = this.cm.getLockedCount(); - if(col < llen){ + var lockedLen = this.cm.getLockedCount(); + if(col < lockedLen){ return this.getLockedRow(row).getElementsByTagName('td')[col]; } - return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - llen); + return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - lockedLen); }, getHeaderCell : function(index){ - var llen = this.cm.getLockedCount(); - if(index < llen){ + var lockedLen = this.cm.getLockedCount(); + if(index < lockedLen){ return this.lockedHd.dom.getElementsByTagName('td')[index]; } - return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - llen); + return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - lockedLen); }, addRowClass : function(row, cls){ - var r = this.getLockedRow(row); - if(r){ - this.fly(r).addClass(cls); + var lockedRow = this.getLockedRow(row); + if(lockedRow){ + this.fly(lockedRow).addClass(cls); } Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls); }, removeRowClass : function(row, cls){ - var r = this.getLockedRow(row); - if(r){ - this.fly(r).removeClass(cls); + var lockedRow = this.getLockedRow(row); + if(lockedRow){ + this.fly(lockedRow).removeClass(cls); } Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls); }, @@ -128,29 +138,30 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { }, removeRows : function(firstRow, lastRow){ - var bd = this.lockedBody.dom; - for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){ - Ext.removeNode(bd.childNodes[firstRow]); + var lockedBody = this.lockedBody.dom, + rowIndex = firstRow; + for(; rowIndex <= lastRow; rowIndex++){ + Ext.removeNode(lockedBody.childNodes[firstRow]); } Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow); }, syncScroll : function(e){ - var mb = this.scroller.dom; - this.lockedScroller.dom.scrollTop = mb.scrollTop; + this.lockedScroller.dom.scrollTop = this.scroller.dom.scrollTop; Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e); }, updateSortIcon : function(col, dir){ - var sc = this.sortClasses, - lhds = this.lockedHd.select('td').removeClass(sc), - hds = this.mainHd.select('td').removeClass(sc), - llen = this.cm.getLockedCount(), - cls = sc[dir == 'DESC' ? 1 : 0]; - if(col < llen){ - lhds.item(col).addClass(cls); + var sortClasses = this.sortClasses, + lockedHeaders = this.lockedHd.select('td').removeClass(sortClasses), + headers = this.mainHd.select('td').removeClass(sortClasses), + lockedLen = this.cm.getLockedCount(), + cls = sortClasses[dir == 'DESC' ? 1 : 0]; + + if(col < lockedLen){ + lockedHeaders.item(col).addClass(cls); }else{ - hds.item(col - llen).addClass(cls); + headers.item(col - lockedLen).addClass(cls); } }, @@ -319,18 +330,7 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { lrow.className += ' x-grid3-row-alt'; } } - if(this.syncHeights){ - var el1 = Ext.get(row), - el2 = Ext.get(lrow), - h1 = el1.getHeight(), - h2 = el2.getHeight(); - - if(h1 > h2){ - el2.setHeight(h1); - }else if(h2 > h1){ - el1.setHeight(h2); - } - } + this.syncRowHeights(row, lrow); } if(startRow === 0){ Ext.fly(rows[0]).addClass(this.firstRowCls); @@ -339,6 +339,21 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls); Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls); }, + + syncRowHeights: function(row1, row2){ + if(this.syncHeights){ + var el1 = Ext.get(row1), + el2 = Ext.get(row2), + h1 = el1.getHeight(), + h2 = el2.getHeight(); + + if(h1 > h2){ + el2.setHeight(h1); + }else if(h2 > h1){ + el1.setHeight(h2); + } + } + }, afterRender : function(){ if(!this.ds || !this.cm){ @@ -354,20 +369,24 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { this.grid.fireEvent('viewready', this.grid); }, - renderUI : function(){ - var header = this.renderHeaders(); - var body = this.templates.body.apply({rows:' '}); - var html = this.templates.master.apply({ - body: body, + renderUI : function(){ + var templates = this.templates, + header = this.renderHeaders(), + body = templates.body.apply({rows:' '}); + + return templates.masterTpl.apply({ + body : body, header: header[0], - ostyle: 'width:'+this.getOffsetWidth()+';', - bstyle: 'width:'+this.getTotalWidth()+';', + ostyle: 'width:' + this.getOffsetWidth() + ';', + bstyle: 'width:' + this.getTotalWidth() + ';', lockedBody: body, lockedHeader: header[1], lstyle: 'width:'+this.getLockedWidth()+';' }); + }, + + afterRenderUI: function(){ var g = this.grid; - g.getGridEl().dom.innerHTML = html; this.initElements(); Ext.fly(this.innerHd).on('click', this.handleHdDown, this); Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this); @@ -442,7 +461,7 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { ddGroup : g.ddGroup || 'GridDD' }); } - this.updateHeaderSortState(); + this.updateHeaderSortState(); }, layout : function(){ @@ -615,11 +634,101 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { var markup = this.renderRows() || [' ', ' ']; return [this.templates.body.apply({rows: markup[0]}), this.templates.body.apply({rows: markup[1]})]; }, - - refreshRow : function(record){ - Ext.ux.grid.LockingGridView.superclass.refreshRow.call(this, record); - var index = Ext.isNumber(record) ? record : this.ds.indexOf(record); - this.getLockedRow(index).rowIndex = index; + + refreshRow: function(record){ + var store = this.ds, + colCount = this.cm.getColumnCount(), + columns = this.getColumnData(), + last = colCount - 1, + cls = ['x-grid3-row'], + rowParams = { + tstyle: String.format("width: {0};", this.getTotalWidth()) + }, + lockedRowParams = { + tstyle: String.format("width: {0};", this.getLockedWidth()) + }, + colBuffer = [], + lockedColBuffer = [], + cellTpl = this.templates.cell, + rowIndex, + row, + lockedRow, + column, + meta, + css, + i; + + if (Ext.isNumber(record)) { + rowIndex = record; + record = store.getAt(rowIndex); + } else { + rowIndex = store.indexOf(record); + } + + if (!record || rowIndex < 0) { + return; + } + + for (i = 0; i < colCount; i++) { + column = columns[i]; + + if (i == 0) { + css = 'x-grid3-cell-first'; + } else { + css = (i == last) ? 'x-grid3-cell-last ' : ''; + } + + meta = { + id: column.id, + style: column.style, + css: css, + attr: "", + cellAttr: "" + }; + + meta.value = column.renderer.call(column.scope, record.data[column.name], meta, record, rowIndex, i, store); + + if (Ext.isEmpty(meta.value)) { + meta.value = ' '; + } + + if (this.markDirty && record.dirty && typeof record.modified[column.name] != 'undefined') { + meta.css += ' x-grid3-dirty-cell'; + } + + if (column.locked) { + lockedColBuffer[i] = cellTpl.apply(meta); + } else { + colBuffer[i] = cellTpl.apply(meta); + } + } + + row = this.getRow(rowIndex); + row.className = ''; + lockedRow = this.getLockedRow(rowIndex); + lockedRow.className = ''; + + if (this.grid.stripeRows && ((rowIndex + 1) % 2 === 0)) { + cls.push('x-grid3-row-alt'); + } + + if (this.getRowClass) { + rowParams.cols = colCount; + cls.push(this.getRowClass(record, rowIndex, rowParams, store)); + } + + // Unlocked rows + this.fly(row).addClass(cls).setStyle(rowParams.tstyle); + rowParams.cells = colBuffer.join(""); + row.innerHTML = this.templates.rowInner.apply(rowParams); + + // Locked rows + this.fly(lockedRow).addClass(cls).setStyle(lockedRowParams.tstyle); + lockedRowParams.cells = lockedColBuffer.join(""); + lockedRow.innerHTML = this.templates.rowInner.apply(lockedRowParams); + lockedRow.rowIndex = rowIndex; + this.syncRowHeights(row, lockedRow); + this.fireEvent('rowupdated', this, rowIndex, record); }, refresh : function(headersToo){ @@ -665,7 +774,7 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { case 'lock': if(cm.getColumnCount(true) <= llen + 1){ this.onDenyColumnLock(); - return; + return undefined; } cm.setLocked(index, true); if(llen != index){ @@ -702,13 +811,18 @@ Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, { }, syncHeaderHeight: function(){ - this.innerHd.firstChild.firstChild.style.height = 'auto'; - this.lockedInnerHd.firstChild.firstChild.style.height = 'auto'; - var hd = this.innerHd.firstChild.firstChild.offsetHeight, - lhd = this.lockedInnerHd.firstChild.firstChild.offsetHeight, - height = (lhd > hd ? lhd : hd) + 'px'; - this.innerHd.firstChild.firstChild.style.height = height; - this.lockedInnerHd.firstChild.firstChild.style.height = height; + var hrow = Ext.fly(this.innerHd).child('tr', true), + lhrow = Ext.fly(this.lockedInnerHd).child('tr', true); + + hrow.style.height = 'auto'; + lhrow.style.height = 'auto'; + var hd = hrow.offsetHeight, + lhd = lhrow.offsetHeight, + height = Math.max(lhd, hd) + 'px'; + + hrow.style.height = height; + lhrow.style.height = height; + }, updateLockedWidth: function(){ @@ -816,4 +930,4 @@ Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, { Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments); } -}); +}); \ No newline at end of file