PDA

View Full Version : [FIXED][PR4]Grid rowheight nested in accordion panel problem in Chrome



eGeuens
17 Mar 2011, 12:19 AM
I have an accordion panel in the 'west' region of a window. When I add gridpanels to the accordion panel the first item shown has the desired height. But, when I activate another panel the rows seem to have only half the height they should have.

This problem only occurs in Chrome for me, in FF and IE it works fine.

evant
17 Mar 2011, 12:50 AM
Can't confirm this, please post a test case.



Ext.require('Ext.data.*');

Ext.onReady(function() {

Ext.regModel('Item', {
fields: ['name']
});

var store = new Ext.data.Store({
model: 'Item',
data: [{
name: 'Item 1'
}, {
name: 'Item 2'
}, {
name: 'Item 3'
}, {
name: 'Item 4'
}, {
name: 'Item 5'
}]
});

var win = Ext.create('Ext.window.Window', {
layout: 'border',
width: 400,
height: 400,
items: [{
region: 'west',
layout: 'accordion',
width: 200,
items: [{
title: 'Grid 1',
xtype: 'grid',
store: store,
headers: [{
text: 'Name',
dataIndex: 'name'
}]
}, {
title: 'Grid 2',
xtype: 'grid',
store: store,
headers: [{
text: 'Name',
dataIndex: 'name'
}]
}]
}, {
region: 'center',
html: 'Foo'
}]
});
win.show();
});

eGeuens
17 Mar 2011, 5:27 AM
Here is a test case


Ext.require('Ext.data.*');

Ext.onReady(function() {

Ext.regModel('Item', {
fields: ['id', 'name', 'img']
});

var store = new Ext.data.Store({
model: 'Item',
data: [{
id: 'item1',
name: 'Item 1',
img: 'item1.png'
}, {
id: 'item2',
name: 'Item 2',
img: 'item2.png'
}, {
id: 'item3',
name: 'Item 3',
img: 'item3.png'
}]
});

var win = Ext.create('Ext.window.Window', {
layout: 'border',
width: 400,
height: 400,
items: [{
region: 'west',
layout: 'accordion',
width: 200,
items: [{
title: 'Grid 1',
xtype: 'grid',
store: store,
headers: [{
text: "Id",
dataIndex: 'id',
hidden: true,
draggable: false
}, {
text: "",
dataIndex: 'name',
hidden: true,
width: 200,
draggable: false
}, {
text: "Img",
dataIndex: 'img',
draggable: false,
renderer: function (val) {
return '<div style="text-align: center;"><img src="images/' + val + '" /></div>';
}
}]
}, {
title: 'Grid 2',
xtype: 'grid',
store: store,
headers: [{
text: "Id",
dataIndex: 'id',
hidden: true,
draggable: false
}, {
text: "",
dataIndex: 'name',
hidden: true,
width: 200,
draggable: false
}, {
text: "Img",
dataIndex: 'img',
draggable: false,
renderer: function (val) {
return '<div style="text-align: center;"><img src="images/' + val + '" /></div>';
}
}]
}]
}, {
region: 'center',
html: 'Foo'
}]
});
win.show();
});So I load the images in the grid and hide the other columns. In Chrome it only shows half of the first image and nothing else when I open the second tab.
In Firefox and IE it works fine as mentioned but I just saw that the first image is somewhat under the header when I reopen the tab.

*Edit: I just refreshed the page in Chrome and it works fine

evant
20 Mar 2011, 5:17 PM
FYI this has been fixed in PR5.