1. #281
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I'm asking €150 for existing LockingGroupHeaderGrid plugin versions (currently only Ext 3.0.0) and €600 for the first one to request the plugin for a different version (to cover developement time).

  2. #282
    Ext User
    Join Date
    Oct 2009
    Posts
    1
    Vote Rating
    0
    setzor is on a distinguished road

      0  

    Default Problem with LockingEditorGridPanel

    Problem with LockingEditorGridPanel


    Got it installed and "working" for the most part, still needing to tweak some stuff here and there.

    The easiest way to word my problem is that when I click on an editable cell, the editor for the cell I clicked on appears in the cell to the right.

    I only have 1 column locked, so I'm guessing that the counter for which column it is that's being detected for the edit is off, like it's accessing the wrong index.

    Using ExtJS 2.2.1 and the update5 plugin from the first post.

    If any more clarification is needed please let me know, I'm soooo close
    Attached Images

  3. #283
    Ext JS Premium Member
    Join Date
    Sep 2008
    Location
    Toronto, ON
    Posts
    29
    Vote Rating
    0
    SMIRZA is on a distinguished road

      0  

    Default


    Hi this is a gr8 plugin! i was wondering if you cane tell me whether it works with GroupingVIew?

  4. #284
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by SMIRZA View Post
    Hi this is a gr8 plugin! i was wondering if you cane tell me whether it works with GroupingVIew?
    No it doesn't.

    You would have to create a LockingGroupingView (lot of work!).

  5. #285
    Ext User
    Join Date
    Sep 2009
    Posts
    4
    Vote Rating
    0
    DirkWei is on a distinguished road

      0  

    Default Can we lock the first row of grid?

    Can we lock the first row of grid?


    I want to know if it is possible to lock the first row of grid and change it's backcolor?

  6. #286
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by DirkWei View Post
    I want to know if it is possible to lock the first row of grid and change it's backcolor?
    You mean something like a GridSummary, but at the top instead of the bottom?

    Or more something like a HeaderGroup (multiple header rows)?

  7. #287
    Ext User
    Join Date
    Oct 2008
    Posts
    3
    Vote Rating
    0
    abotero is on a distinguished road

      0  

    Default


    Quote Originally Posted by setzor View Post
    Got it installed and "working" for the most part, still needing to tweak some stuff here and there.

    The easiest way to word my problem is that when I click on an editable cell, the editor for the cell I clicked on appears in the cell to the right.

    I only have 1 column locked, so I'm guessing that the counter for which column it is that's being detected for the edit is off, like it's accessing the wrong index.

    Using ExtJS 2.2.1 and the update5 plugin from the first post.

    If any more clarification is needed please let me know, I'm soooo close

    There are a problem with the Ext.ux.grid.CheckColumn. If this is in the first column the editor is displayed in the next column. I used the example from Ext 3.1.

    For now I solved it leaving the CheckColumn in the last column.

  8. #288
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    468
    Vote Rating
    2
    fangzhouxing is on a distinguished road

      0  

    Default


    I found that the Ext 3.0 version of this extension can be used with Ext 2.3 with small modifications:
    Code:
    /*
     * ColumnLock v1.7.1 for Ext 3 (changed for 2.3)
     */
    Ext.ns('Ext.ux.grid');
    
    Templates = {
        columnLockTpl : new Ext.Template(
                    '<div class="x-grid3" hidefocus="true">',
                        '<div class="x-grid3-locked">',
                            '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{lstyle}">{lockedHeader}</div></div><div class="x-clear"></div></div>',
                            '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{lstyle}">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>',
                        '</div>',
                        '<div class="x-grid3-viewport x-grid3-unlocked">',
                            '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
                            '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
                        '</div>',
                        '<div class="x-grid3-resize-marker">&#160;</div>',
                        '<div class="x-grid3-resize-proxy">&#160;</div>',
                    '</div>')            
                        
    };
    
    Ext.ux.grid.LockingGridPanel = Ext.extend(Ext.grid.GridPanel,  {
    	initComponent : function(){
    		if(!this.cm && !this.colModel && Ext.isArray(this.columns)){
    			this.colModel = new Ext.ux.grid.LockingColumnModel(this.columns);
    			delete this.columns;
    		}
    		Ext.ux.grid.LockingGridPanel.superclass.initComponent.call(this);
    	},
    	getView : function(){
    		if(!this.view){
    			this.view = new Ext.ux.grid.LockingGridView(this.viewConfig);
    		}
    		return this.view;
    	}
    });
    
    Ext.ux.grid.LockingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {
    	initComponent : function(){
    		if(!this.cm && !this.colModel && Ext.isArray(this.columns)){
    			this.colModel = new Ext.ux.grid.LockingColumnModel(this.columns);
    			delete this.columns;
    		}
    		Ext.ux.grid.LockingEditorGridPanel.superclass.initComponent.call(this);
    	},
    	getView : function(){
    		if(!this.view){
    			this.view = new Ext.ux.grid.LockingGridView(this.viewConfig);
    		}
    		return this.view;
    	}
    });
    
    // Added after Ext 3.0.0
    Ext.applyIf(Ext.grid.GridView.prototype, {
    	getScrollOffset: function(){
    		return this.scrollOffset!=undefined ? this.scrollOffset : Ext.getScrollBarWidth();
    	}
    });
    
    Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, {
    	lockText : 'Lock',
    	unlockText : 'Unlock',
    	rowBorderWidth : 1,
    	lockedBorderWidth : 1,
    	initTemplates : function(){
    		var ts = this.templates || {};
    		if(!ts.master){
    			ts.master = Templates.columnLockTpl
    		}
    		this.templates = ts;
    		Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);
    	},
    	getEditorParent : function(ed){
    		return this.el.dom;
    	},
    	initElements : function(){
    		var E = Ext.Element;
    		var el = this.grid.getGridEl().dom.firstChild;
    		var 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);
    		if(this.grid.hideHeaders){
    			this.lockedHd.setDisplayed(false);
    			this.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.focusEl.swallowEvent('click', true);
    		this.resizeMarker = new E(cs[2]);
    		this.resizeProxy = new E(cs[3]);
    	},
    	getLockedRows : function(){
    		return this.hasRows() ? this.lockedBody.dom.childNodes : [];
    	},
    	getLockedRow : function(row){
    		return this.getLockedRows()[row];
    	},
    	getCell : function(row, col){
    		var llen = this.cm.getLockedCount();
    		if(col < llen){
    			return this.getLockedRow(row).getElementsByTagName('td')[col];
    		}
    		return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - llen);
    	},
    	getHeaderCell : function(index){
    		var llen = this.cm.getLockedCount();
    		if(index < llen){
    			return this.lockedHd.dom.getElementsByTagName('td')[index];
    		}
    		return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - llen);
    	},
    	addRowClass : function(row, cls){
    		var r = this.getLockedRow(row);
    		if(r){
    			this.fly(r).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);
    		}
    		Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);
    	},
    	removeRow : function(row) {
    		Ext.removeNode(this.getLockedRow(row));
    		Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);
    	},
    	removeRows : function(firstRow, lastRow){
    		var bd = this.lockedBody.dom;
    		for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
    			Ext.removeNode(bd.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;
    		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();
    		if(col < llen){
    			lhds.item(col).addClass(sc[dir == 'DESC' ? 1 : 0]);
    		}else{
    			hds.item(col - llen).addClass(sc[dir == 'DESC' ? 1 : 0]);
    		}
    	},
    	updateAllColumnWidths : function(){
    		var tw = this.getTotalWidth(),
    			clen = this.cm.getColumnCount(),
    			lw = this.getLockedWidth(),
    			llen = this.cm.getLockedCount(),
    			ws = [], len, i;
    		this.updateLockedWidth();
    		for(i = 0; i < clen; i++){
    			ws[i] = this.getColumnWidth(i);
    			var hd = this.getHeaderCell(i);
    			hd.style.width = ws[i];
    		}
    		var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;
    		for(i = 0, len = ns.length; i < len; i++){
    			row = lns[i];
    			row.style.width = lw;
    			if(row.firstChild){
    				row.firstChild.style.width = lw;
    				trow = row.firstChild.rows[0];
    				for (j = 0; j < llen; j++) {
    				   trow.childNodes[j].style.width = ws[j];
    				}
    			}
    			row = ns[i];
    			row.style.width = tw;
    			if(row.firstChild){
    				row.firstChild.style.width = tw;
    				trow = row.firstChild.rows[0];
    				for (j = llen; j < clen; j++) {
    				   trow.childNodes[j - llen].style.width = ws[j];
    				}
    			}
    		}
    		this.onAllColumnWidthsUpdated(ws, tw);
    		//this.syncHeaderHeight();
    	},
    	updateColumnWidth : function(col, width){
    		var w = this.getColumnWidth(col),
    			llen = this.cm.getLockedCount(),
    			ns, rw, c, row;
    		this.updateLockedWidth();
    		if(col < llen){
    			ns = this.getLockedRows();
    			rw = this.getLockedWidth();
    			c = col;
    		}else{
    			ns = this.getRows();
    			rw = this.getTotalWidth();
    			c = col - llen;
    		}
    		var hd = this.getHeaderCell(col);
    		hd.style.width = w;
    		for(var i = 0, len = ns.length; i < len; i++){
    			row = ns[i];
    			row.style.width = rw;
    			if(row.firstChild){
    				row.firstChild.style.width = rw;
    				row.firstChild.rows[0].childNodes[c].style.width = w;
    			}
    		}
    		this.onColumnWidthUpdated(col, w, this.getTotalWidth());
    		//this.syncHeaderHeight();
    	},
    	updateColumnHidden : function(col, hidden){
    		var llen = this.cm.getLockedCount(),
    			ns, rw, c, row,
    			display = hidden ? 'none' : '';
    		this.updateLockedWidth();
    		if(col < llen){
    			ns = this.getLockedRows();
    			rw = this.getLockedWidth();
    			c = col;
    		}else{
    			ns = this.getRows();
    			rw = this.getTotalWidth();
    			c = col - llen;
    		}
    		var hd = this.getHeaderCell(col);
    		hd.style.display = display;
    		for(var i = 0, len = ns.length; i < len; i++){
    			row = ns[i];
    			row.style.width = rw;
    			if(row.firstChild){
    				row.firstChild.style.width = rw;
    				row.firstChild.rows[0].childNodes[c].style.display = display;
    			}
    		}
    		this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());
    		delete this.lastViewWidth;
    		this.layout();
    	},
    	doRender : function(cs, rs, ds, startRow, colCount, stripe){
    		var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,
    			tstyle = 'width:'+this.getTotalWidth()+';',
    			lstyle = 'width:'+this.getLockedWidth()+';',
    			buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;
    		for(var j = 0, len = rs.length; j < len; j++){
    			r = rs[j]; cb = []; lcb = [];
    			var rowIndex = (j+startRow);
    			for(var i = 0; i < colCount; i++){
    				c = cs[i];
    				p.id = c.id;
    				p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
                        (this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');
    				p.attr = p.cellAttr = '';
    				p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
    				p.style = c.style;
    				if(Ext.isEmpty(p.value)){
    					p.value = '&#160;';
    				}
    				if(this.markDirty && r.dirty && r.modified[c.name]!=undefined){
    					p.css += ' x-grid3-dirty-cell';
    				}
    				if(c.locked){
    					lcb[lcb.length] = ct.apply(p);
    				}else{
    					cb[cb.length] = ct.apply(p);
    				}
    			}
    			var alt = [];
    			if(stripe && ((rowIndex+1) % 2 === 0)){
    				alt[0] = 'x-grid3-row-alt';
    			}
    			if(r.dirty){
    				alt[1] = ' x-grid3-dirty-row';
    			}
    			rp.cols = colCount;
    			if(this.getRowClass){
    				alt[2] = this.getRowClass(r, rowIndex, rp, ds);
    			}
    			rp.alt = alt.join(' ');
    			rp.cells = cb.join('');
    			rp.tstyle = tstyle;
    			buf[buf.length] = rt.apply(rp);
    			rp.cells = lcb.join('');
    			rp.tstyle = lstyle;
    			lbuf[lbuf.length] = rt.apply(rp);
    		}
    		return [buf.join(''), lbuf.join('')];
    	},
    	processRows : function(startRow, skipStripe){
    		if(!this.ds || this.ds.getCount() < 1){
    			return;
    		}
    		var rows = this.getRows(),
    			lrows = this.getLockedRows();
    		skipStripe = skipStripe || !this.grid.stripeRows;
    		startRow = startRow || 0;
    		Ext.each(rows, function(row, idx){
    			var lrow = lrows[idx];
    			row.rowIndex = idx;
    			lrow.rowIndex = idx;
    			if (!skipStripe && (idx + 1) % 2 === 0) {
    				row.className = row.className.replace(this.rowClsRe, ' ');
    				lrow.className = lrow.className.replace(this.rowClsRe, ' ');
    				row.className += ' x-grid3-row-alt';
    				lrow.className += ' x-grid3-row-alt';
    			}
    		}, this);
    		if(startRow === 0){
    			Ext.fly(rows[0]).addClass(this.firstRowCls);
    			Ext.fly(lrows[0]).addClass(this.firstRowCls);
    		}
    		Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
    		Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);
    	},
    	afterRender : function(){
    		if(!this.ds || !this.cm){
    			return;
    		}
    		var bd = this.renderRows() || ['&#160;', '&#160;'];
    		this.mainBody.dom.innerHTML = bd[0];
    		this.lockedBody.dom.innerHTML = bd[1];
    		this.processRows(0, true);
    		if(this.deferEmptyText !== true){
    			this.applyEmptyText();
    		}
    	},
    	renderUI : function(){
    		var header = this.renderHeaders();
    		var body = this.templates.body.apply({rows:'&#160;'});
    		var html = this.templates.master.apply({
    			body: body,
    			header: header[0],
    			ostyle: 'width:'+this.getOffsetWidth()+';',
    			bstyle: 'width:'+this.getTotalWidth()+';',
    			lockedBody: body,
    			lockedHeader: header[1],
    			lstyle: 'width:'+this.getLockedWidth()+';'
    		});
    		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);
    		this.mainHd.on({
    			scope: this,
    			mouseover: this.handleHdOver,
    			mouseout: this.handleHdOut,
    			mousemove: this.handleHdMove
    		});
    		this.lockedHd.on({
    			scope: this,
    			mouseover: this.handleHdOver,
    			mouseout: this.handleHdOut,
    			mousemove: this.handleHdMove
    		});
    		this.scroller.on('scroll', this.syncScroll,  this);
    		if(g.enableColumnResize !== false){
    			this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
    			this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
    			this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));
    		}
    		if(g.enableColumnMove){
    			this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
    			this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));
    			this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));
    			this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
    		}
    		if(g.enableHdMenu !== false){
    			this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});
    			this.hmenu.add(
    				{itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
    				{itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
    			);
    			if(this.grid.enableColLock !== false){
    				this.hmenu.add('-',
    					{itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},
    					{itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}
    				);
    			}
    			if(g.enableColumnHide !== false){
    				this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});
    				this.colMenu.on({
    					scope: this,
    					beforeshow: this.beforeColMenuShow,
    					itemclick: this.handleHdMenuClick
    				});
    				this.hmenu.add('-', {
    					itemId:'columns',
    					hideOnClick: false,
    					text: this.columnsText,
    					menu: this.colMenu,
    					iconCls: 'x-cols-icon'
    				});
    			}
    			this.hmenu.on('itemclick', this.handleHdMenuClick, this);
    		}
    		if(g.trackMouseOver){
    			this.mainBody.on({
    				scope: this,
    				mouseover: this.onRowOver,
    				mouseout: this.onRowOut
    			});
    			this.lockedBody.on({
    				scope: this,
    				mouseover: this.onRowOver,
    				mouseout: this.onRowOut
    			});
    		}
    		if(g.enableDragDrop || g.enableDrag){
    			this.dragZone = new Ext.grid.GridDragZone(g, {
    				ddGroup : g.ddGroup || 'GridDD'
    			});
    		}
    		this.updateHeaderSortState();
    	},
    	layout : function(){
    		if(!this.mainBody){
    			return;
    		}
    		var g = this.grid;
    		var c = g.getGridEl();
    		var csize = c.getSize(true);
    		var vw = csize.width;
    		if(!g.hideHeaders && (vw < 20 || csize.height < 20)){
    			return;
    		}
    		//this.syncHeaderHeight();
    		if(g.autoHeight){
    			this.scroller.dom.style.overflow = 'visible';
    			this.lockedScroller.dom.style.overflow = 'visible';
    			if(Ext.isWebKit){
    				this.scroller.dom.style.position = 'static';
    				this.lockedScroller.dom.style.position = 'static';
    			}
    		}else{
    			this.el.setSize(csize.width, csize.height);
    			var hdHeight = this.mainHd.getHeight();
    			var vh = csize.height - (hdHeight);
    		}
    		this.updateLockedWidth();
    		if(this.forceFit){
    			if(this.lastViewWidth != vw){
    				this.fitColumns(false, false);
    				this.lastViewWidth = vw;
    			}
    		}else {
    			this.autoExpand();
    			this.syncHeaderScroll();
    		}
    		this.onLayout(vw, vh);
    	},
    	getOffsetWidth : function() {
    		return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth() + this.getScrollOffset()) + 'px';
    	},
    	renderHeaders : function(){
    		var cm = this.cm,
    			ts = this.templates,
    			ct = ts.hcell,
    			cb = [], lcb = [],
    			p = {},
    			len = cm.getColumnCount(),
    			last = len - 1;
    		for(var i = 0; i < len; i++){
    			p.id = cm.getColumnId(i);
    			p.value = cm.getColumnHeader(i) || '';
    			p.style = this.getColumnStyle(i, true);
    			p.tooltip = this.getColumnTooltip(i);
    			p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
                    (cm.config[i].headerCls ? ' ' + cm.config[i].headerCls : '');
    			if(cm.config[i].align == 'right'){
    				p.istyle = 'padding-right:16px';
    			} else {
    				delete p.istyle;
    			}
    			if(cm.isLocked(i)){
    				lcb[lcb.length] = ct.apply(p);
    			}else{
    				cb[cb.length] = ct.apply(p);
    			}
    		}
    		return [ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'}),
    				ts.header.apply({cells: lcb.join(''), tstyle:'width:'+this.getLockedWidth()+';'})];
    	},
    	updateHeaders : function(){
    		var hd = this.renderHeaders();
    		this.innerHd.firstChild.innerHTML = hd[0];
    		this.innerHd.firstChild.style.width = this.getOffsetWidth();
    		this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
    		this.lockedInnerHd.firstChild.innerHTML = hd[1];
    		var lw = this.getLockedWidth();
    		this.lockedInnerHd.firstChild.style.width = lw;
    		this.lockedInnerHd.firstChild.firstChild.style.width = lw;
    	},
    	getResolvedXY : function(resolved){
    		if(!resolved){
    			return null;
    		}
    		var c = resolved.cell, r = resolved.row;
    		return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];
    	},
    	syncFocusEl : function(row, col, hscroll){
    		Ext.ux.grid.LockingGridView.superclass.syncFocusEl.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
    	},
    	ensureVisible : function(row, col, hscroll){
    		return Ext.ux.grid.LockingGridView.superclass.ensureVisible.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
    	},
    	insertRows : function(dm, firstRow, lastRow, isUpdate){
    		var last = dm.getCount() - 1;
    		if(!isUpdate && firstRow === 0 && lastRow >= last){
    			this.refresh();
    		}else{
    			if(!isUpdate){
    				this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
    			}
    			var html = this.renderRows(firstRow, lastRow),
    				before = this.getRow(firstRow);
    			if(before){
    				if(firstRow === 0){
    					this.removeRowClass(0, this.firstRowCls);
    				}
    				Ext.DomHelper.insertHtml('beforeBegin', before, html[0]);
    				before = this.getLockedRow(firstRow);
    				Ext.DomHelper.insertHtml('beforeBegin', before, html[1]);
    			}else{
    				this.removeRowClass(last - 1, this.lastRowCls);
    				Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html[0]);
    				Ext.DomHelper.insertHtml('beforeEnd', this.lockedBody.dom, html[1]);
    			}
    			if(!isUpdate){
    				this.fireEvent('rowsinserted', this, firstRow, lastRow);
    				this.processRows(firstRow);
    			}else if(firstRow === 0 || firstRow >= last){
    				this.addRowClass(firstRow, firstRow === 0 ? this.firstRowCls : this.lastRowCls);
    			}
    		}
    		this.syncFocusEl(firstRow);
    	},
        getColumnStyle : function(col, isHeader){
            var style = !isHeader ? this.cm.config[col].cellStyle || this.cm.config[col].css || '' : this.cm.config[col].headerStyle || '';
            style += 'width:'+this.getColumnWidth(col)+';';
            if(this.cm.isHidden(col)){
                style += 'display:none;';
            }
            var align = this.cm.config[col].align;
            if(align){
                style += 'text-align:'+align+';';
            }
            return style;
        },
    	getLockedWidth : function() {
    		return this.cm.getTotalLockedWidth() + 'px';
    	},
    	getTotalWidth : function() {
    		return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';
    	},
    	getColumnData : function(){
    		var cs = [], cm = this.cm, colCount = cm.getColumnCount();
    		for(var i = 0; i < colCount; i++){
    			var name = cm.getDataIndex(i);
    			cs[i] = {
    				name : (name==undefined ? this.ds.fields.get(i).name : name),
    				renderer : cm.getRenderer(i),
    				id : cm.getColumnId(i),
    				style : this.getColumnStyle(i),
    				locked : cm.isLocked(i)
    			};
    		}
    		return cs;
    	},
    	renderBody : function(){
    		var markup = this.renderRows() || ['&#160;', '&#160;'];
    		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;
    	},
    	refresh : function(headersToo){
    		this.fireEvent('beforerefresh', this);
    		this.grid.stopEditing(true);
    		var result = this.renderBody();
    		this.mainBody.update(result[0]).setWidth(this.getTotalWidth());
    		this.lockedBody.update(result[1]).setWidth(this.getLockedWidth());
    		if(headersToo === true){
    			this.updateHeaders();
    			this.updateHeaderSortState();
    		}
    		this.processRows(0, true);
    		this.layout();
    		this.applyEmptyText();
    		this.fireEvent('refresh', this);
    	},
    	onDenyColumnLock : function(){
    
    	},
    	initData : function(ds, cm){
    		if(this.cm){
    			this.cm.un('columnlockchange', this.onColumnLock, this);
    		}
    		Ext.ux.grid.LockingGridView.superclass.initData.call(this, ds, cm);
    		if(this.cm){
    			this.cm.on('columnlockchange', this.onColumnLock, this);
    		}
    	},
    	onColumnLock : function(){
    		this.refresh(true);
    	},
    	handleHdMenuClick : function(item){
    		var index = this.hdCtxIndex,
    			cm = this.cm,
    			id = item.getItemId(),
    			llen = cm.getLockedCount();
    		switch(id){
    			case 'lock':
    				if(cm.getColumnCount(true) <= llen + 1){
    					this.onDenyColumnLock();
    					return;
    				}
    				if(llen != index){
    					cm.setLocked(index, true, true);
    					cm.moveColumn(index, llen);
    					this.grid.fireEvent('columnmove', index, llen);
    				}else{
    					cm.setLocked(index, true);
    				}
    			break;
    			case 'unlock':
    				if(llen - 1 != index){
    					cm.setLocked(index, false, true);
    					cm.moveColumn(index, llen - 1);
    					this.grid.fireEvent('columnmove', index, llen - 1);
    				}else{
    					cm.setLocked(index, false);
    				}
    			break;
    			default:
    				return Ext.ux.grid.LockingGridView.superclass.handleHdMenuClick.call(this, item);
    		}
    		return true;
    	},
    	handleHdDown : function(e, t){
    		Ext.ux.grid.LockingGridView.superclass.handleHdDown.call(this, e, t);
    		if(this.grid.enableColLock !== false){
    			if(Ext.fly(t).hasClass('x-grid3-hd-btn')){
    				var hd = this.findHeaderCell(t),
    					index = this.getCellIndex(hd),
    					ms = this.hmenu.items, cm = this.cm;
    				ms.get('lock').setDisabled(cm.isLocked(index));
    				ms.get('unlock').setDisabled(!cm.isLocked(index));
    			}
    		}
    	},
    	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;
    	},
    	updateLockedWidth: function(){
    		var lw = this.cm.getTotalLockedWidth(),
    			tw = this.cm.getTotalWidth() - lw,
    			csize = this.grid.getGridEl().getSize(true),
    			lp = Ext.isBorderBox ? 0 : this.lockedBorderWidth,
    			rp = Ext.isBorderBox ? 0 : this.rowBorderWidth,
    			vw = (csize.width - lw - lp - rp) + 'px',
    			so = this.getScrollOffset();
    		if(!this.grid.autoHeight){
    			var vh = (csize.height - this.mainHd.getHeight()) + 'px';
    			this.lockedScroller.dom.style.height = vh;
    			this.scroller.dom.style.height = vh;
    		}
    		this.lockedWrap.dom.style.width = (lw + rp) + 'px';
    		this.scroller.dom.style.width = vw;
    		this.mainWrap.dom.style.left = (lw + lp + rp) + 'px';
    		if(this.innerHd){
    			this.lockedInnerHd.firstChild.style.width = lw + 'px';
    			//this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
    			this.innerHd.style.width = vw;
    			this.innerHd.firstChild.style.width = (tw + rp + so) + 'px';
    			//this.innerHd.firstChild.firstChild.style.width = tw + 'px';
    		}
    		if(this.mainBody){
    			this.lockedBody.dom.style.width = (lw + rp) + 'px';
    			this.mainBody.dom.style.width = (tw + rp) + 'px';
    		}
    	}
    });
    
    Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {
    	isLocked : function(colIndex){
    		return this.config[colIndex].locked === true;
    	},
    	setLocked : function(colIndex, value, suppressEvent){
    		if(this.isLocked(colIndex) == value){
    			return;
    		}
    		this.config[colIndex].locked = value;
    		if(!suppressEvent){
    			this.fireEvent('columnlockchange', this, colIndex, value);
    		}
    	},
    	getTotalLockedWidth : function(){
    		var totalWidth = 0;
    		for(var i = 0, len = this.config.length; i < len; i++){
    			if(this.isLocked(i) && !this.isHidden(i)){
    				totalWidth += this.getColumnWidth(i);
    			}
    		}
    		return totalWidth;
    	},
    	getLockedCount : function(){
    		for(var i = 0, len = this.config.length; i < len; i++){
    			if(!this.isLocked(i)){
    				return i;
    			}
    		}
    	},
    	moveColumn : function(oldIndex, newIndex){
    		if(oldIndex < newIndex && this.isLocked(oldIndex) && !this.isLocked(newIndex)){
    			this.setLocked(oldIndex, false, true);
    		}else if(oldIndex > newIndex && !this.isLocked(oldIndex) && this.isLocked(newIndex)){
    			this.setLocked(oldIndex, true, true);
    		}
    		Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);
    	}
    });

  9. #289
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    @fangzhouxing -- friendly tip: you might want to highlight your changes in red for readability.

  10. #290
    Ext User Sergii's Avatar
    Join Date
    Jan 2010
    Location
    Kiev, Ukraine
    Posts
    7
    Vote Rating
    0
    Sergii is on a distinguished road

      0  

    Exclamation


    Hi!
    I use last version ColumnLock v1.7.1 for Ext 3 (changed for 2.3) but
    Firebug tell me error:
    Ext.grid.LockingEditorGridPanel is not a constructor
    My code:
    Code:
    <script type="text/javascript" src="js/ColumnLock.js"></script>
    Code:
     Ext.grid.DynamicColumnModel = function(store){
        var cols = [];
        var recordType = store.recordType;
        var fields = recordType.prototype.fields;
        
        // first column set size = 50
        var fieldName = fields.keys[0];
        var field = recordType.getField(fieldName);
          cols[0] = {id: 0, header: field.name, dataIndex: field.name, width: 50, locked:true};
        
        // second column set size = 400
         fieldName = fields.keys[1];
         field = recordType.getField(fieldName);
         cols[1] = {id: 1, header: field.name, dataIndex: field.name, width: 400, locked:true};
        
        for (var i = 2; i < fields.keys.length; i++){
          var fieldName = fields.keys[i];
          var field = recordType.getField(fieldName);
          cols[i] = {id: i, header: field.name, dataIndex: field.name, width: 80};
        }
        Ext.grid.DynamicColumnModel.superclass.constructor.call(this, cols);
      };
    Code:
         var grid = new Ext.grid.LockingEditorGridPanel({
            ds: ds,
            cm: new Ext.grid.DynamicColumnModel(ds),
            selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
            enableColLock: true,
            stripeRows: true
          });
    Wherein problem?

    Thanks!

Thread Participants: 138

  1. galdaka (2 Posts)
  2. Condor (47 Posts)
  3. mapo (1 Post)
  4. seno (1 Post)
  5. rmesser (2 Posts)
  6. mystix (5 Posts)
  7. fangzhouxing (1 Post)
  8. rarerules (6 Posts)
  9. Kalum78 (2 Posts)
  10. Fabyo (2 Posts)
  11. akannu (4 Posts)
  12. badgerd (1 Post)
  13. hanganum (1 Post)
  14. jlhs5 (3 Posts)
  15. zaunaf (1 Post)
  16. mjlecomte (1 Post)
  17. border9 (3 Posts)
  18. matt.hall (1 Post)
  19. justinfalk (1 Post)
  20. Air_Mike (1 Post)
  21. mbalusu (1 Post)
  22. wm003 (2 Posts)
  23. Plater (1 Post)
  24. ssmso (3 Posts)
  25. jitu (1 Post)
  26. durlabh (2 Posts)
  27. crpatrick (2 Posts)
  28. timezz (2 Posts)
  29. jfkelley (2 Posts)
  30. mankz (6 Posts)
  31. xbohdpukc (1 Post)
  32. orangehairedboy (1 Post)
  33. mbahl (2 Posts)
  34. cblin (3 Posts)
  35. vertigoMX (1 Post)
  36. bernd01 (1 Post)
  37. sanjshah (1 Post)
  38. tahlon (1 Post)
  39. nanich (3 Posts)
  40. tonedeaf (1 Post)
  41. gaspard (1 Post)
  42. ghutchens (3 Posts)
  43. wsn24x7 (1 Post)
  44. srikan999 (1 Post)
  45. lesul (2 Posts)
  46. NotChris (3 Posts)
  47. NeonMonk (3 Posts)
  48. surgi (3 Posts)
  49. lickui (2 Posts)
  50. sureshraja.crt (1 Post)
  51. herrjj (1 Post)
  52. minty (2 Posts)
  53. huixjan (2 Posts)
  54. archrajan (1 Post)
  55. milou (1 Post)
  56. bishoco (1 Post)
  57. deltron0 (1 Post)
  58. ravindra.tiwary1 (2 Posts)
  59. slava_k (1 Post)
  60. cjqcjq2008 (1 Post)
  61. srikanthnukala (1 Post)
  62. Kevin.Tan (3 Posts)
  63. xavierg (1 Post)
  64. ygl (1 Post)
  65. varsha.kothari (3 Posts)
  66. tinnt (6 Posts)
  67. sdileep (1 Post)
  68. rule3 (3 Posts)
  69. RobinOuyang (1 Post)
  70. lokiofragnar (1 Post)
  71. imran (1 Post)
  72. sachin_248 (1 Post)
  73. mogen9999 (2 Posts)
  74. faraway (1 Post)
  75. sircyaj (1 Post)
  76. tmaung (1 Post)
  77. wwwtd (1 Post)
  78. jamiro (1 Post)
  79. Frankatron (3 Posts)
  80. peacock (1 Post)
  81. NicoP (2 Posts)
  82. Raz_ (3 Posts)
  83. jchau (6 Posts)
  84. sanjaykanteti (1 Post)
  85. JSRobbie (1 Post)
  86. alvin (1 Post)
  87. Shmitt (1 Post)
  88. Nagiy (4 Posts)
  89. cooluser7 (1 Post)
  90. Angelina (1 Post)
  91. greeeg (2 Posts)
  92. hoanganhinfo (1 Post)
  93. duverma (1 Post)
  94. hawks2001 (1 Post)
  95. LoekieBoy (3 Posts)
  96. Bogdan Juszczak (1 Post)
  97. eversound (1 Post)
  98. priyanka_iknip (1 Post)
  99. xiespirit (1 Post)
  100. mmboy (1 Post)
  101. SMIRZA (1 Post)
  102. fmanrique (2 Posts)
  103. redzedi (1 Post)
  104. sham123456 (1 Post)
  105. digiprosoft (2 Posts)
  106. krmlmnstr (1 Post)
  107. abotero (1 Post)
  108. tomlobato (2 Posts)
  109. sramanna (2 Posts)
  110. kastanis (5 Posts)
  111. pingTeam (1 Post)
  112. cmschick (2 Posts)
  113. liulei (3 Posts)
  114. Xander75 (2 Posts)
  115. hhanna (2 Posts)
  116. hahacow (1 Post)
  117. janapol (1 Post)
  118. roderick.wu (5 Posts)
  119. saadus (1 Post)
  120. yingwuhahaha (2 Posts)
  121. liuzxtest (2 Posts)
  122. hzwei (5 Posts)
  123. azaqero (3 Posts)
  124. PCalvinClark (1 Post)
  125. arifali (1 Post)
  126. navdimri (2 Posts)
  127. dewoob (2 Posts)
  128. avia4us (1 Post)
  129. DirkWei (1 Post)
  130. setzor (1 Post)
  131. ancorgs (2 Posts)
  132. Sergii (1 Post)
  133. Kranthi1981 (1 Post)
  134. Patrick86 (1 Post)
  135. kamal.addicted (1 Post)
  136. chpsrinu (1 Post)
  137. brian.moeskau (2 Posts)
  138. priyapratheep (1 Post)