PDA

View Full Version : Layout not sizing properly in FF & Chrome, but works in IE



toolware
23 Jun 2011, 7:25 AM
This is a repost of this thread, which went unanswered for like a week:
http://www.sencha.com/forum/showthread.php?137519-Layouts-in-4.x-only-work-in-IE

When I view the following in FF or Chrome, the menu on the left has insufficient height to accommodate the button, and majority of the borders around the panels are missing. Looks perfect in IE though.

Am I doing something wrong?


Ext.define('Tools4ever.aLaCarte.Control', {
extend: 'Ext.panel.Panel'
, alias: ['widget.alacartecontrol']
, title: 'A la Carte'
, bodyPadding: 10
, layout: { type: 'hbox', align: 'top', pack: 'start' }
, items: [
{ // Menu
xtype: 'panel'
, title: 'Menu'
, flex: 1
//, height: 200
, items: [
{
xtype: 'button'
, text: 'Add Another!'
, scale: 'large'
}
] // eo items
} // eo Menu
, { xtype: 'tbspacer', width: 30 }
, { // Right Column
xtype: 'panel'
, flex: 1
, border: false
, items: [
{ // Totals
xtype: 'panel'
, title: 'Totals'
, html: 'Cart1 25 hours + cart2 13 hours'
} // eo Totals
, { xtype: 'tbspacer', height: 10 }
, { // Scope Text
xtype: 'panel'
, title: 'Scope Text'
//, layout: 'fit'
, html: 'Some Text'
} // eo Scope Text
] // eo items
} // eo Right Column
] // eo items
});

var control = Ext.create('Tools4ever.aLaCarte.Control', {
renderTo: Ext.getBody()

jsakalos
23 Jun 2011, 3:13 PM
You cannot add non-scalar properties to prototype. See http://blog.extjs.eu/know-how/writing-a-big-application-in-ext-part-3/#adding-objects-to-prototype.

toolware
24 Jun 2011, 7:11 AM
You're referencing a post talking about ExtJS3 (using Ext.extend, written in 2009).

I'm talking about ExtJS4, using Ext.define()

What would be the proper way of accomplishing what I'm trying to do, in ExtJS4?

jsakalos
24 Jun 2011, 1:55 PM
Well, I'm not informed that between 2009 and 2011 javascript stopped passing object and arrays by reference and started to make deep clones...

Just kidding...

However, if I tell you that you can find truth in a document, you can believe me - if that what I'm referring to would be obsolete, I wouldn't point you there.

So, the safest route is to create all complex config options (objects and arrays) in constructor or, if it better suits you, in initComponent override.

toolware
24 Jun 2011, 2:10 PM
I have failed to see one good example of this in ExtJS4 documentation.

Are you saying I would do the exact same thing we used to do in .extend(), but this time, in create?

I tried the following, but nothing has changed. Layouts are still jacked in FF & Chrome.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../extjs4/resources/css/ext-all-gray.css" />
<script type="text/javascript" src="../extjs4/ext-all.js"></script>
<script type="text/javascript">
MyPanel = Ext.define('Tools4ever.aLaCarte.Control', {
extend: 'Ext.panel.Panel'
, title: 'A la Carte'
, bodyPadding: 10
, alias: 'widget.alacartecontrol'

,initComponent:function() {
var config = {
layout: { type: 'hbox', align: 'top', pack: 'start' }
, items: [
{ // Menu
xtype: 'panel'
, title: 'Menu'
, flex: 1
//, height: 200
, items: [
{
xtype: 'button'
, text: 'Add Another!'
, scale: 'large'
}
] // eo items
} // eo Menu
, { xtype: 'tbspacer', width: 30 }
, { // Right Column
xtype: 'panel'
, flex: 1
, border: false
, items: [
{ // Totals
xtype: 'panel'
, title: 'Totals'
, html: 'Cart1 25 hours + cart2 13 hours'
} // eo Totals
, { xtype: 'tbspacer', height: 10 }
, { // Scope Text
xtype: 'panel'
, title: 'Scope Text'
//, layout: 'fit'
, html: 'Some Text'
} // eo Scope Text
] // eo items
} // eo Right Column
] // eo items
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

MyPanel.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

});

Ext.onReady(function() {
var control = Ext.create('Tools4ever.aLaCarte.Control', {
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>

jsakalos
24 Jun 2011, 11:36 PM
I start to believe that this is a bug or a missing feature in Ext.

In Ext 3, when you set autoHeight:true, it was guaranteed that Ext won't set any height on the component. In Ext 4, there's no autoHeight config option and I would expect that the behavior would be same as in the case of autoHeight:true in Ext 3.

But this is not the case. Your left panel gets height of 17px (in Safari@mac) what is not enough. But, if you remove flex:1 config option it gets 67px what is exactly enough for the button. It's illogical, because flex should deal with width, not with height.

Also, if you give the left column an explicit width, the height is calculated correctly (67px).

That is better but still, I'd expect there'll be no height.

Moving this thread to Bugs.

mitchellsimoens
26 Jun 2011, 9:21 AM
Let me see if I understand correctly...

If you put any sizing (width, height, flex) then the component won't be autoHeighted? Even if you specify width and not height and flex?

These two examples have the width config set and are autoHeighted:


var win = Ext.create('Ext.window.Window', {
autoShow : true,
width : 400,
title : 'Test',
items : [
{
xtype : 'textfield',
fieldLabel : 'Test'
},
{
xtype : 'textfield',
fieldLabel : 'Test'
},
{
xtype : 'textfield',
fieldLabel : 'Test'
}
]
});

var panel = Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 400,
title : 'Test',
items : [
{
xtype : 'textfield',
fieldLabel : 'Test'
},
{
xtype : 'textfield',
fieldLabel : 'Test'
},
{
xtype : 'textfield',
fieldLabel : 'Test'
}
]
});

So to me, autoHeight is not needed. To my knowledge some layouts in Ext JS 3.x did not support autoHeight and the Box layouts were one (Border is another).

jsakalos
27 Jun 2011, 2:00 AM
The issue is hbox specific so if autoHeight is not supported then it's clear, however, I do not see any reason why autoHeight (or not setting height in Ext 4) must be unsupported for hbox.

mitchellsimoens
27 Jun 2011, 7:45 AM
Ext JS 4 *BoxLayout has the same behavior as in Ext JS 3.

toolware
28 Jun 2011, 7:26 AM
As a workaround, I tried using the column layout. This sizes height better, but the borders are still all jacked (see screenshots below). Also, the right margin is wrong in Chrome and FF. Please tell me how to get around this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../extjs4/resources/css/ext-all-gray.css" />
<script type="text/javascript" src="../extjs4/ext-all.js"></script>
<script type="text/javascript">
MyPanel = Ext.define('Tools4ever.aLaCarte.Control', {
extend: 'Ext.panel.Panel'
, title: 'A la Carte'
, bodyPadding: 10
, alias: 'widget.alacartecontrol'

,initComponent:function() {
var config = {
//layout: { type: 'hbox', align: 'top', pack: 'start' }
layout: 'column'
, items: [
{ // Menu
xtype: 'panel'
, title: 'Menu'
, margin: 5
, columnWidth: .5
//, flex: 1
//, height: 200
, items: [
{
xtype: 'button'
, text: 'Add Another!'
, scale: 'large'
}
] // eo items
} // eo Menu
, { xtype: 'tbspacer', width: 30 }
, { // Right Column
xtype: 'panel'
, margin: 5
, columnWidth: .5
//, flex: 1
, border: false
, items: [
{ // Totals
xtype: 'panel'
, title: 'Totals'
, html: 'Cart1 25 hours + cart2 13 hours'
} // eo Totals
, { xtype: 'tbspacer', height: 10 }
, { // Scope Text
xtype: 'panel'
, title: 'Scope Text'
//, layout: 'fit'
, html: 'Some Text'
} // eo Scope Text
] // eo items
} // eo Right Column
] // eo items
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

MyPanel.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

});

Ext.onReady(function() {
var control = Ext.create('Tools4ever.aLaCarte.Control', {
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>

FF

https://docs.google.com/uc?id=0By9r50wafGXxYTQwMzU3Y2YtODNhNC00YmY4LTlmNTgtNTQ0MzExNjQ0YzUy

IE

https://docs.google.com/uc?id=0By9r50wafGXxZWMzMTBlOWMtNzAxYS00OTY4LTg0NzYtYmY3ZmE2NWQ4ZTAx

toolware
8 Jul 2011, 7:16 AM
Really? Premium support and 10 days with no response?