Grid column sizing issues in ExtJS 4.1.1 (IE only)

[fifeflyer69]

Hi,

I am attempting to upgrade from ExtJS 4.0.7 to 4.1.1 and having problems getting grids to display correctly in IE 8 (works perfectly well in Chrome and Firefox).

In the image below (IE), it appears that the columns are taking up equal spacing within the grid even though I am using a vbox layout with the fist column being a fixed width and the second having a flex of 1.

37331

But it works perfectly well in Firefox and Chrome:

37332

Is this a bug?

I've setup the panel with the following configuration:



hideHeaders: true,

layout: {
type: 'hbox',
align: 'left'
},

columns: [{
text: 'Type',
width: 30,

renderer: function(value, metadata, record, row, col, store) {
...
}
}, {
xtype: 'treecolumn',
text: 'Name',
flex: 1,
dataIndex: 'name',

renderer: function(value, metadata, record, row, col, store) {
...
}
}, {
text: 'Edit',
width: 24,

renderer: function(value, metadata, record, row, col, store) {
...
}
}]


I'm experiencing the issue with a tree panel and grid panel.

Any ideas?

Also, the row highlighting does not extend all the way to the right - I'm assuming space for a scrollbar. Is there any way to remove the "reserved" space?

[scottmartin]

It would be hard to tell without a small working example. Please provide some static data using array/json file so we can test.

It almost seems like the dom is not ready.. silly question .. you have onReady() around your code correct?

Have you tried to view the elements to see where the space is coming from between the icon and the text?

Scott.

[fifeflyer69]

Hi Scott,

Thanks for the response.

I've just tried it under IE 9 and it works perfectly.

Under IE8, I used Firebug Lite to examine the HTML generated and compared it to that under Firefox and did not see any real difference that would affect the spacing. It looks like each column is equally spaced and that under IE8 the specified layout is somehow being ignored.

Here is some test data:



{
"text":"Lists",
"children":[{
"listId":2,
"name":"My Cases",
"leaf":false,
"expanded":true,
"children":[{
"listId":3,
"name":"Presentations A",
"leaf":true,
"expanded":false,
"children":null
},{
"listId":4,
"name":"Presentations B",
"leaf":true,
"expanded":false,
"children":null
}]
},{
"listId":5,
"name":"Medical Center",
"leaf":false,
"expanded":true,
"children":[{
"listId":6,
"name":"Neurorad Residents",
"leaf":true,
"expanded":false,
"children":null
},{
"listId":7,
"name":"Board Wednesdays",
"leaf":true,
"expanded":false,
"children":null
}]
},{
"listId":8,
"name":"Research",
"leaf":false,
"expanded":true,
"children":[{
"listId":9,
"name":"Drug A Research",
"leaf":true,
"expanded":false,
"children":null
},{
"listId":10,
"name":"Drug B Research",
"leaf":true,
"expanded":false,
"children":null
},{
"listId":11,
"name":"Drug C Research",
"leaf":true,
"expanded":false,
"children":null
},{
"listId":12,
"name":"Drug D Research",
"leaf":true,
"expanded":false,
"children":null
}]
}]
}



As for using onReady, I am using the MVC pattern so I'm using Ext.Application instead.

Regards,

Wayne

[fifeflyer69]

Hi Scott,

It looks like I'm doing something silly in my code. I stripped everything down to the bare bones and it works under IE 8:

37343

One last question - is there anyway to configure the view to not display the real-estate right of the last column (highlighted)?

[fifeflyer69]

Hi Scott,

It looks like the CSS I inherited from a "parent" application is causing my issue. Reverting my application to use the default styling provided by ExtJS does the trick and everything is rendered as I expect.

Apologies for wasting your time.

Regards,

Wayne

[scottmartin]

Thank you for the update .. Glad you figured it out ;)

Scott.