PDA

View Full Version : Issues with 3.0 vs. 2.2



Jose Gonzalez
8 Oct 2009, 10:00 AM
The simplest code that generates the problem is:



{
"height": 449,
"width": 672,
"title": "Add Documents",
"items": [
{
"xtype": "tabpanel",
"border": false,
"layout": "fit",
"items": [
{
"xtype": "panel",
"title": "Info",
"border": false,
"items": [
{
"xtype": "panel",
"layout": "absolute",
"border": false,
"region": "north",
"split": true,
"collapsible": true,
"height": 100,
"items": [
{
"xtype": "panel",
"layout": "form",
"border": false,
"x": 30,
"y": 18,
"height": 22,
"width": 602,
"items": [
{
"xtype": "textfield",
"fieldLabel": "Name",
"labelWidth": 50,
"tabIndex": 1
}
]
}
]
},
{
"xtype": "panel",
"layout": "fit",
"border": false,
"region": "center",
"items": [
{
"xtype": "panel",
"layout": "fit",
"items": [
{
"xtype": "htmleditor",
"tabIndex": 2
}
]
}
]
}
]
}
]
}
]
}


The effect happens once you tab out of the first field into the html editor. I have done other tests and it seems like the tab panel is not removing the height of the tabs from it's available area. If the window is resized, the objects are re-rendered properly.

After going through 3.0 code, it seems to me that the overall issue is the effect of animation on all of the rendering speedups. This app is based on the "Desktop" sample and the problems go away if line #69 in desktop.js "win.animateTarget = win.taskButton.el;" is commented out, which is my workaround.

This change has also corrected another issue that I reported before, where the GridSearch plugin was not being displayed correctly.

Like I said, I have a workaround for this. This is just a heads-up if you are interested.

16 Oct 2009, 4:20 AM
Some comments:



{
"height": 449,
"width": 672,
"title": "Add Documents",
"items": [
{
"xtype": "tabpanel",
"border": false,
//"layout": "fit", //<--- not needed
"items": [
{
"xtype": "panel",
"title": "Info",
"border": false, //This panel uses the CONTAINER layout, yet your items below have 'regions'. You need to set the layout to "border" here if you want to have "regions"
"items": [
{
"xtype": "panel",
"layout": "absolute",
"border": false,
// "region": "north", //<<--- not needed!
"split": true,
"collapsible": true,
"height": 100,
"items": [
{
"xtype": "panel",
"layout": "form",
"border": false,
"x": 30,
"y": 18,
"height": 22,
"width": 602,
"items": [
{
"xtype": "textfield",
"fieldLabel": "Name",
"labelWidth": 50,
"tabIndex": 1
}
]
}
]
},
{
"xtype": "panel",
"layout": "fit",
"border": false,
// "region": "center", //<-- not needed
"items": [
{
// "xtype": "panel",
// "layout": "fit",
//"items": [
{
"xtype": "htmleditor",
"tabIndex": 2
}
//]
//}
]
}
]
}
]
}
]
}

Jose Gonzalez
16 Oct 2009, 7:31 AM
Thanks for your response. The problem is deeper than a few bad entries, as it is related to the callback timing in the animation.

All of my problems go away when the animation line:

win.animateTarget = win.taskButton.el;

in desktop.js is commented out. This fixes not only the problem detailed above but also the problem with the GridSearch plugin not displaying properly.