PDA

View Full Version : 4.0.2 : grid header mis-alignment



indreshms
24 Jun 2011, 2:38 AM
Hi,
Not sure if this is already known. When a grid has many columns which makes it scroll to view the columns. Once scrolled, if you resize a column, the column gets resized but the eader control scrolls back to 0th column making it mis-aligned. I have attached the screen shot.

Thanks.

26730

mitchellsimoens
26 Jun 2011, 10:20 AM
Have you tried this in 4.0.2a? Also what browser/OS are you using?

May be a good idea if you could put that info into our new bug template

http://www.sencha.com/forum/showthread.php?138165-How-to-report-a-bug

indreshms
26 Jun 2011, 10:05 PM
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.2a


Browser versions tested against:

IE8
Google Chrome 12.0.742.100


Description:

Not sure if this is already known. When a grid has many columns which makes it scroll to view the columns. Once scrolled, if you resize a column, the column gets resized but the eader control scrolls back to 0th column making it mis-aligned. I have attached the screen shot.


Steps to reproduce the problem:

Add many columns to a grid which makes it scroll-able horizontally.
Now scroll right.
Try to resize a column.


The result that was expected:

The column is resize properly without any side effects.


The result that occurs instead:

The column gets resized but the header scrolls back to the 0th column, making it mis-aligned with the grid columns.


Test Case:







HELPFUL INFORMATION


Screenshot or Video:

attached



Debugging already done:

none


Possible fix:

not provided


Additional CSS used:

only default ext-all.css


Operating System:

Windows 7

edspencer
27 Jun 2011, 12:21 AM
Could you supply test case code? It's hard to know how to reproduce that from the screenshot

indreshms
27 Jun 2011, 1:15 AM
Hi,

I have added the code below. Basically I am reading the required meta-information at runtime and creating the grid and its columns dynamically.

Please let me know in case I have missed some information.

Also one thing that I might be doing different is to load the ExtJS dynamically at runtime. (ie., not referred in the index.html statically but loaded via ajax)
Thanks.



getView : function(){
var me = this;

if(this._view != null) return this._view;

var ls = $.getLanguageService();

// create all the actions, some dummy for the time being
var tbar = [];
tbar[0] = {text:'New',tooltip:'New',iconCls:'add'};
tbar[1] = '-';
tbar[2] = {text:'Delete',tooltip:'Delete',iconCls:'remove'};
tbar[3] = '-';

// add the generic actions
tbar[tbar.length] = {xtype: 'tbfill'};
tbar[tbar.length] = { iconCls : "list-pattern-filter-icon", context : this, enableToggle : true,
handler : function(){
if(this.pressed)
this.context._filterRow.show();
else
this.context._filterRow.hide();

this.context._view.doComponentLayout();
}};
tbar[tbar.length] = {text : ls.get("[LIST.EXPORT.OPTION]"), iconCls : "list-pattern-export-icon", menu :
{items : [
{text : ls.get("[LIST.EXPORT.OPTION.EXCEL]"), context: this, handler : function(){this.context.handleExport2Excel();}, iconCls : "list-pattern-export-excel-icon"},
{text : ls.get("[LIST.EXPORT.OPTION.CSV]"), context: this, handler : function(){this.context.handleExport2CSV();}, iconCls : "list-pattern-export-csv-icon"}
]
}};
// end generic actions

// create the columns into the column model
var cmArray = [];
var currentIndex = 0;
cmArray[currentIndex++] = new Ext.grid.RowNumberer({nofilter : true, width : 35});

for(var j = 0; j < this.viewInfo.columns.length; j++){
var col = this.viewInfo.columns[j];

if(col.hidden) continue;

var item = {};
item.header = ls.get(col.label);
item.dataIndex = col.name;
item.width = 50;
item.menuDisabled = false;
item.columnConfig = col;

// register a renderer *ONLY* when a custom rendering is configured
// - cell color
// - ...
if(col.cellColor){
item.renderer = function( value, metaData, record, rowIndex, colIndex, store, view ){
var cconf = cmArray[colIndex].columnConfig;
var ccolor = cconf.cellColor;
var ccolorCls = me.getCellColor(ccolor.cls, record);
metaData.tdCls = ccolorCls;
return value;
};
}
cmArray[currentIndex++] = item;
}

// create the bottom bar
var bbar = new Ext.PagingToolbar({
store: this.parent.ds,
displayInfo: true,
displayMsg: ls.get("[LIST.PAGING.CURRENT.STATUS]"),
emptyMsg: ls.get("[LIST.EMPTY.STATUS]")});

// create the list view
// - also create the filterrow
// TODO: base it on the configuration
this._filterRow = Ext.createByAlias("listfilterrow",{});
var c = {
frame : true, border:false, columnLines : true, forceFit : this.viewInfo.forceFit, viewConfig : {stripeRows : true},
store: this.parent.ds, autoHeight : true, columns: cmArray, tbar: tbar, bbar : bbar, flex : 1, autoScroll : true,
plugins : [this._filterRow]};
this._view = Ext.create('Ext.grid.Panel',c);

this._view.on("itemcontextmenu", this.doContextMenu, this);

return this._view;
}

kibitzer
8 Jul 2011, 7:17 AM
In normal(with "static" config) grid bug appears too (post (http://www.sencha.com/forum/showthread.php?136471-Grid-column-resize-problem-when-horizontal-scrollbar-visible) from erdeisz).

May be some problems with AbstractDock's renderItems method. moveItems method is called for scroolbar and for columns' header (if we reconfigure grid).

With this bug i can't use grid for large datasource. :(


PS: sorry for my english