View Full Version : [FIXED] Bug grid render with hidden column and forcefit true

18 Apr 2013, 10:47 AM

Ext 4.ext-
Browser versions tested against:


If your grid uses forcefit, and you have a hidden column to begin with, then when you go to the column menu to display the hidden column, all data in the grid moves to the left and is not lined up with the headers
Steps to reproduce the problem:

Change the extjs state grid example so that the grid is forcefit
Remove flex from Review column
Set First Name column hidden=true
When grid displays, click column menu to show the First Name column
The result that was expected:

Grid data lines up perfectly with column headers
The result that occurs instead:

Grid headers display correctly but all data in grid is squished to left side
Test Case:
Ext.require([ 'Ext.grid.*',

Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['first', 'last', 'review', {
name: 'age',
type: 'int'


// setup the state provider, all state information will be saved to a cookie

Ext.create('Ext.container.Viewport', {
layout: {
type: 'border',
padding: '5'
items: [{
region: 'north',
height: 150,
bodyPadding: 5,
split: true,
html: [
'Between refreshes, the grid below will remember',
'<li>The hidden state of the columns</li>',
'<li>The width of the columns</li>',
'<li>The order of the columns</li>',
'<li>The sort state of the grid</li>',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Show window',
handler: function(btn){
Ext.create('Ext.window.Window', {
width: 300,
height: 300,
x: 5,
y: 5,
title: 'State Window',
maximizable: true,
stateId: 'stateWindowExample',
stateful: true,
bodyPadding: 5,
html: [
'Between refreshes, this window will remember:',
'<li>The width and height</li>',
'<li>The x and y position</li>',
'<li>The maximized and restore states</li>',
listeners: {
destroy: function(){
}, {
bodyPadding: 5,
region: 'west',
title: 'Collapse/Width Panel',
width: 200,
stateId: 'statePanelExample',
stateful: true,
split: true,
collapsible: true,
html: [
'Between refreshes, this panel will remember:',
'<li>The collapsed state</li>',
'<li>The width</li>',
}, {
region: 'center',
stateful: true,
stateId: 'stateGridExample',
xtype: 'grid',
forceFit: true,
store: Ext.create('Ext.data.Store', {
model: 'Person',
data: [{
first: 'John',
last: 'Smith',
age: 32,
review: 'Solid performance, needs to comment code more!'
}, {
first: 'Jane',
last: 'Brown',
age: 56,
review: 'Excellent worker, has written over 100000 lines of code in 3 months. Deserves promotion.'
}, {
first: 'Kevin',
last: 'Jones',
age: 25,
review: 'Insists on using one letter variable names for everything, lots of bugs introduced.'
}, {
first: 'Will',
last: 'Zhang',
age: 41,
review: 'Average. Works at the pace of a snail but always produces reliable results.'
}, {
first: 'Sarah',
last: 'Carter',
age: 23,
review: 'Only a junior, but showing a lot of promise. Coded a Javascript parser in Assembler, very neat.'
columns: [{
text: 'First Name',
hidden: true,
dataIndex: 'first'
}, {
text: 'Last Name',
dataIndex: 'last'
}, {
text: 'Age',
dataIndex: 'age'
}, {
text: 'Review',
dataIndex: 'review'

18 Apr 2013, 12:26 PM
Thanks for the report! I have opened a bug in our bug tracker.