PDA

View Full Version : [FIXED-EXTJSIV-183][PR4] Layout rendering issues



vmadman
16 Mar 2011, 10:30 PM
This one is a bit hard to explain because I can't say that I totally understand WHY its happening, but we often have to defer .doLayout calls to fix it by 1000ms or more.

We're rendering a panel, inside of a window, and that panel has the 'border' layout. Within that panel is a grid panel and a form panel. Once the window loads the form panel shows fine, but the grid panel does not.

We've tried HBOX layout as well, with identical results.

This same problem also happens if you "move" the panel from one container to another, which is a feature of our implementation. It seems that grids, specifically, "lagg" behind on rendering which causes unexpected behavior when ext tries to arrange components in the layout.

I've attached a screenshot and will provide more upon request, as well as whatever code would be useful. The screenshot shows, on the left, a freshly rendered panel with a grid a form in it, notice how crazy the grid is. On the right is the exact same panel with the exact same contents with a deferred call to doLayout. Notice how everything looks much better.

The behavior seems the same in all browsers we've tested. My screenshot is from Firefox 3.6.15

Here is the code:




this.contentContainer = Ext.create('Ext.container.Container', {
flex: 1,
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
}
});



and..




this.grid = Ext.create('Rigid.ux.rigidGrid', {
flex: 0.6,
toolDockSide: 'left',
region: 'center',
border: true,
headers: [
{
text : 'Username',
flex : 0.3,
sortable : true,
dataIndex: 'username'
},{
text : 'First Name',
flex : 0.3,
sortable : true,
dataIndex: 'person.name_first'
},{
text : 'Full Name',
flex : 0.4,
sortable : true,
dataIndex: 'person.name_full'
}
],
store: Ext.create(..)
});

// Build the form

this.txtUsername = Ext.createWidget('textfield', {
fieldLabel: 'Username',
name: 'username'
});

this.txtPassword = Ext.createWidget('textfield', {
fieldLabel: 'Password',
inputType: 'password',
name: 'password'
});


this.form = Ext.create('Ext.form.FormPanel', {
bodyStyle: 'padding:10px 20px 0',
flex: 0.4,
region: 'east',
split: true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side',
labelSeparator: '',
anchor: '100%'
},
defaults: {
border: false,
xtype: 'container',
flex: 1,
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [
this.txtUsername,this.txtPassword
]
}]
});

this.contentContainer.add(this.grid);
this.contentContainer.add(this.form);



Attached Screenshot: 25194

vmadman
16 Mar 2011, 10:47 PM
Actually, deferring a doLayout doesnt really fix it. I tried up to 10 seconds. I had to do something manual, such as maximizing my window, or set a breakpoint on my .doLayout call which caused execution to stop... then when I resume it renders properly.

Very weird.

Animal
17 Mar 2011, 2:28 AM
There's no way of telling what you are doing.

But at a guess it looks like an overnest, and/or a missing layout config

vmadman
17 Mar 2011, 6:25 AM
Not over-nested, you have:

Window->Tabpanel->Panel (vbox)

In that there's..
Header panel
Content panel (hbox)

Content panel has a grid and a form.

If that's over-nesting we may want to talk about what Ext base does with grids. Holy nested containers.

My layout config for the content panel is in my first code snippet.

But.. you're right.. there's no way of seeing whats going on in my code, I do not know of any other way to illustrate it, but I figure any time you have to force layout recalculations when all you have is a grid and a form in a parent its probably something going on with some internal rendering.

Since its happened to me twice in two separate circumstances I figure its a bug.

Thanks,
Luke

evant
20 Mar 2011, 5:16 PM
It's not possible to tell from the code you've posted, we don't know what is going in your custom class.

James Goddard
21 Mar 2011, 9:39 AM
We've been noticing a lot of similar layout problems involving the box model. They show up a lot in complex layouts, but are much harder to duplicate in simple layouts that can be posted.

Here is one example I've been able to simplify somewhat:


Ext.onReady (function () {
var wnd = Ext.create ('Ext.window.Window', {
layout: 'fit',
width: 500,
height: 500,
items: [{
xtype: 'container',
layout: {
type: 'hbox',
padding: '5px',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
margins: '0 5 0 0',
width: 300,
items: [{
xtype: 'panel',
frame: true,
flex: 1
}, {
xtype: 'panel',
frame: true,
margins: '5 0 0 0',
flex: 1
}, {
xtype: 'panel',
frame: true,
margins: '5 0 0 0',
flex: 1
}]
}, {
xtype: 'panel',
frame: true,
flex: 1
}]
}]
});
wnd.show ();
});


Notice that there is an extra 5 pixels of margin on the bottom left panel.
If I remove one of the 2 bottom panels from the left side, the problem goes away.
If I change the margins so that the first and second have a bottom margin, instead of the second and third having a top margin (see example below) the problem goes away.


items: [{
xtype: 'panel',
frame: true,
margins: '0 0 5 0',
flex: 1
}, {
xtype: 'panel',
frame: true,
margins: '0 0 5 0',
flex: 1
}, {
xtype: 'panel',
frame: true,
flex: 1
}]


We have literally dozens of other similar layout issues. But again they are difficult to reproduce in a simple layout. Some of them go away when the window is resized by the user, some (like this one) don't.

c2c-guinness
21 Mar 2011, 10:09 AM
We will continue to try to reproduce a test case for this, but its very difficult since it relies on specific conditions. PR5 seems to have fixed some of the issues, though we cannot definitively explain why.

If it crops back up on us we'll post more, but the main thing that seems to set it off is loading a grid inside of a moderately complex layout. If the grid rendering laggs behind the rendering of the rest of the layout it will not auto-correct itself.

Thanks,
Luke

Animal
2 Apr 2011, 2:55 PM
I found this about 10 minutes before PR5 went out.

The "before" margins of flexed items (you have top margin 5 on your vertical boxes) was being subtracted twice from available space.

Her's what that Window looks like here:

http://cl.ly/2q120J3T1s3F1x222h3x/Screen_shot_2011-04-02_at_23.53.56.png

aconran
11 Apr 2011, 7:49 PM
This issue has been fixed. Could you please speak up and followup with a test case if you are still having problems in Beta2.

Thanks,