PDA

View Full Version : Help with RowLayout



vladcd
23 Apr 2010, 6:15 AM
Hi guys,

since I upgraded to 3.2 I've got a problem with RowLayout. In short, I have a window, with a tab panel in it. The active tab has a RowLayout specified. When I resize it (but only horizontally - change the width), the content of the tab remains the same size. However, the content is also resized when I change the height.

From the 'debugging' I've done so far I can say it's a consequence of the modifications made in ContainerLayout.js, runLayout method, where, instead of calling ct.doLayout(), there are calls to this.layout() and ct.onLayout(). The result is the piece of code which calls doLayout() for the children of this container isn't called anymore.

My question is: is there any elegant way to fix this (without needing to override the runLayout method)?
The code is this:


<html>
<head>
<link rel="stylesheet" type="text/css"
href="/ext/resources/css/ext-all.css" />
</head>
<body>
<script type="text/javascript" src="/ext/adapter/ext/ext-base-debug.js"></script>
<script type=text/javascript src="/ext/ext-all-debug.js"></script>
<script type=text/javascript src="/ext/examples/ux/RowLayout.js"></script>
<script>


Ext.onReady(function(){

Ext.QuickTips.init();

var win = new Ext.Window({
width : 400,
height : 400,
layout : 'fit',
items :[{
xtype : 'form',
layout : 'fit',
items : [{
xtype: "tabpanel",
bodyStyle: "padding:1px;border:none;overflow:auto;position:relative;",
activeTab: 0,
items: [
{
title: "General",
id: "mkpTab_General",
layout: "ux.row",
items: [
{
id: "mkp2649996847797",
bodyStyle: "border:none;margin:0px;padding:0px",
layout: "anchor",
columnWidth: 1.0,
items: [
{
anchor: "100% 100%",
xtype: "fieldset",
headerAsText: false ,
title: "Default Pane 2",
layout: "fit",
items: [
{
xtype: "container",
autoEl: "div",
bodyStyle: "margin-top:3px;border:none",
layout: "column",
defaults: {
columnWidth: 0.5
},
items: [
{
xtype: "container",
autoEl: "div",
columnWidth: 0.5,
bodyStyle: "border:none",
layout: "form",
labelAlign: "right",
labelWidth: 75.0,
items: [
{
fieldLabel: " Short Name",
anchor: "-18",
id: "mkp2684356586167",
name: "mkp_ShortName",
xtype: "textfield"
}
]
},
{
xtype: "container",
autoEl: "div",
columnWidth: 0.5,
bodyStyle: "border:none",
layout: "form",
labelAlign: "right",
labelWidth: 70.0,
items: [
{
fieldLabel: " Full Name",
anchor: "-18",
id: "mkp2684356586168",
name: "mkp_FullName",
xtype: "textfield"
}
]
}
]
}
]
}
],
bodyStyle: "border:none;margin-top:2px",
rowHeight: 0.99,
minHeight: 52
}
]
}]
}]
}]
});
win.show();
});
</script>
</body>
</html>


Thank you very much,
Vlad

jay@moduscreate.com
23 Apr 2010, 6:22 AM
vlad, do you mean anchor layout?

vladcd
23 Apr 2010, 6:36 AM
nope, I mean exactly with the RowLayout.js

I just tried overriding the runLayout method in RowLayout.js, and the resize takes place correctly.
This is the code:


runLayout : function() {
var ct = this.container;
this.layout();
/*
* added call to do layout for the items in this
* container, so that the resize takes place correctly
*/
if (ct.items) {
var cs = ct.items.items;
for ( var i = 0, len = cs.length; i < len; i++) {
var c = cs[i];
if (c.doLayout) {
c.doLayout();
}
}
}
ct.onLayout();
delete ct.layoutPending;
}


Since I don't understand the reasons and the process of thought behind the changes to the layouts (optimizations with weird side effects), I am looking for a better way to solve this.

An extra thought regarding the matter: the children are resized only when I modify the height of the container. Since RowLayout is a 'clone' of ColumnLayout, I'm guessing that ColumnLayout has the same issue, but when modifying the width. However, for ColumnLayout the results are not visible since you don't make the column change its height on resize (unless, of course, you use Animal's ColumnLayout override with fitHeight configuration).

Waiting to hear your thoughts on this,
Vlad

jay@moduscreate.com
23 Apr 2010, 6:39 AM
RowLayout.js is *not* an Ext JS layout:



/www/ext2play/ext3/src/widgets/layout
jays-mbp:layout jgarcia$ ls -al
total 352
drwxr-xr-x 16 jgarcia admin 544 Apr 21 08:36 .
drwxr-xr-x 39 jgarcia admin 1326 Apr 21 08:36 ..
-rw-r--r-- 1 jgarcia admin 2314 Apr 21 08:37 AbsoluteLayout.js
-rw-r--r-- 1 jgarcia admin 7407 Apr 21 08:37 AccordionLayout.js
-rw-r--r-- 1 jgarcia admin 8522 Apr 21 08:37 AnchorLayout.js
-rw-r--r-- 1 jgarcia admin 1035 Apr 21 08:37 AutoLayout.js
-rw-r--r-- 1 jgarcia admin 42714 Apr 21 08:37 BorderLayout.js
-rw-r--r-- 1 jgarcia admin 28296 Apr 21 08:37 BoxLayout.js
-rw-r--r-- 1 jgarcia admin 5704 Apr 21 08:37 CardLayout.js
-rw-r--r-- 1 jgarcia admin 6247 Apr 21 08:37 ColumnLayout.js
-rw-r--r-- 1 jgarcia admin 10479 Apr 21 08:37 ContainerLayout.js
-rw-r--r-- 1 jgarcia admin 1930 Apr 21 08:37 FitLayout.js
-rw-r--r-- 1 jgarcia admin 15823 Apr 21 08:37 FormLayout.js
-rw-r--r-- 1 jgarcia admin 3542 Apr 21 08:37 MenuLayout.js
-rw-r--r-- 1 jgarcia admin 7377 Apr 21 08:37 TableLayout.js
-rw-r--r-- 1 jgarcia admin 14999 Apr 21 08:37 ToolbarLayout.js


Perhaps you should use hbox?

jay@moduscreate.com
23 Apr 2010, 6:41 AM
Here are the layout examples that are discussed in my book.

http://extjsinaction.com/examples/chapter05/

Maybe you can use some of the code in there for your project(s)

vladcd
23 Apr 2010, 6:46 AM
yes, I know it's just an example bundled with Ext. I figured if it's bundled there, it should work.

So except the solution I have right now, is there no better way of doing this (one that would easily integrate with the Ext framework). If not, my suggestion would be to ditch this ux altogether, because with time it will only drift farther and farther from the branch, and people using it will spend more and more time struggling with it.

Regarding your answer, I am starting to consider using vbox instead of this.

Thanks,
Vlad

jay@moduscreate.com
23 Apr 2010, 6:48 AM
You're right though. If it is bundled with the framework, it *should* work.

All ux's in the framework are considered "Experimental" and are not fully supported.

Animal
23 Apr 2010, 7:03 AM
But it's been superseded by vbox

jay@moduscreate.com
23 Apr 2010, 7:04 AM
But it's been superseded by vbox

It should be removed from the framework examples.