PDA

View Full Version : [REOPENED][3.??] Form disappears when clicking the Biography tab



meroy
8 Dec 2009, 1:55 PM
Go to examples/form/dynamic.html and scroll all the way down. Click on the Biography tab. The entire form disappears under IE 6 and comes back. This was not happening with Ext 3.0.3. Not sure how far back this has been happening with the recent SVN releases.

Animal
8 Dec 2009, 2:17 PM
Try



Ext.override(Ext.Container, {
canLayout: function() {
var el = this.getLayoutTarget();
return !!(el && el.dom && (el.dom.offsetWidth || el.dom.offsetHeight));
}
});

aconran
8 Dec 2009, 2:24 PM
Confirmed that this issue is in the current build.

Jamie Avins
8 Dec 2009, 2:32 PM
Try



Ext.override(Ext.Container, {
canLayout: function() {
var el = this.getLayoutTarget();
return !!(el && el.dom && (el.dom.offsetWidth || el.dom.offsetHeight));
}
});


No effect.

meroy
8 Dec 2009, 2:39 PM
Same here too. No effect.

Animal
8 Dec 2009, 10:54 PM
This should be fixed now... I was tired when I posted that (I'd been staring at code for too long). The correct way to test for dimensions being present is to test for offsetHeight or offsetWidth.

meroy
8 Dec 2009, 10:58 PM
This is working now with SVN 5758. Thanks.

meroy
9 Dec 2009, 10:14 AM
Please mark this thread as open.

Use the test-case-2b tool under IE 6. Click on "Add 1 Form" under "Card Two". Notice how the entire layout disappears and reappears. I even configured deferredRender to false in resources/form-configs.js as suggested in the SVN 5758 change. This wasn't required previously and it worked some time back.

Attached is test-case-2b.zip. Change ext to point to your ext in header (5 places).

meroy
9 Dec 2009, 10:43 AM
This is what happens when clicking on the button "Add 5 Forms" under "Card 2". In this case some parts of the layout remains. This is ugly. deferredRender is false here and using SVN 5760 under IE 6.

Remember to click on the Biography tab during testing when applying a fix for this.

Animal
9 Dec 2009, 11:46 AM
I can't get it to fail on IE8 in any mode IE7/IE8, quirks or standards.

Animal
9 Dec 2009, 11:46 AM
Good test app BTW!

meroy
9 Dec 2009, 11:53 AM
This only fails with IE 6. IE 7 and 8 are fine. Basically, anybody out there adding the htmleditor dynamically in a form will experience this with IE 6. This was working before the big layout change.

Animal
9 Dec 2009, 11:55 AM
Someone who has Visual Studio will have to debug this. That's the only way to debug IE6.

nanotron
9 Dec 2009, 12:02 PM
You can also use Visual Web Developer (http://www.microsoft.com/express/vwd/) to debug also.

meroy
9 Dec 2009, 12:07 PM
Forms from Card Panel One are configured as xtype: form. Forms from Card Panel Two are configured as xtype: panel (default), but as layout: 'form'. The 'form' tag element is not released from memory -- that's okay -- this cannot be fixed. The memory consumption is very little.

I'm hoping the development team can address the screen going blank when the form/htmleditor is added dynamically before the 3.1 release. This was all fine before the layout changes done recently to SVN.

meroy
9 Dec 2009, 2:39 PM
Here's another finding and this is with FF 3.5.5 under Windows. Take the test-case-2b tool and point to Ext 3.0.3.

Now, click on "Add 10 Forms" under the 2nd set of buttons 4 times (don't wait for the 10 to complete -- just click 4 times consecutively). You should end up with 40 additional tabs. The performance numbers are shown below (laptop running at 2.66 GHz):

1. 3.0.3 -- 40 forms takes 8 seconds to draw
2. r5761 -- 40 forms takes nearly 20 seconds to draw (much slower now)

It was fast before the layout changes that began in r5691.

Notice the toolbar for the html editor while it's drawing the form. We shouldn't see this as it's configured for the 2nd tab.

meroy
9 Dec 2009, 3:59 PM
I've tested with FF 3.5.5 and compared against 3.0.3, r5690/113 and r5761/119. To me 5690 resizes slighty faster or if not smoother. I added just 10 forms (2nd set of buttons -- these have the html editor). Afterwards I resize the window back and forth. YMMV.

BlueCamel
9 Dec 2009, 5:30 PM
This only fails with IE 6. IE 7 and 8 are fine. Basically, anybody out there adding the htmleditor dynamically in a form will experience this with IE 6. This was working before the big layout change.

If you put IE8 into compatibility mode does it fail also? There should be an icon on the toolbar for that.

meroy
9 Dec 2009, 7:03 PM
If you put IE8 into compatibility mode does it fail also? There should be an icon on the toolbar for that.

It works with IE8 in compatibility mode. Just tested this. Using the test-case-2b tool, I'm seeing several issues:

1. IE6: A large part of the screen goes blank when adding a form dynamically containing a html editor

2. FF3.5: Adding forms containing the html editor which reside on the 2nd tab is much slower. I'm seeing the toolbar for the html editor briefly while the form is being rendered.

3. FF3.5: The resizing of the browser window is no longer as smooth/fluid as seen with SVN release 5690.

Animal
9 Dec 2009, 10:36 PM
5690 was doing double layouting.

The important thing is performance.

Set



Ext.Container.prototype.bufferResize = false;


And then use Firebug's profiling to see how much actual resource is used in these situations.



console.profile();Ext.getCmp("the-id-of-the-Viewport").doLayout();console.profileEnd()

Animal
9 Dec 2009, 10:43 PM
Bookmarklets to log layout events so you can see what's being done:

http://www.extjs.com/forum/showthread.php?p=417330#post417330

meroy
10 Dec 2009, 12:25 AM
Findings:

This is faster with this: Ext.Container.prototype.bufferResize = false;

However, resizing was faster with 5690 versus 5762 using FF 3.5 under Leopard. It's the same thing under Windows. Ok, this is about the resizing issue. There's also the other 2 listed up thread.

This is what I've done.

1. Obtained Ext 5690 and Core 113 -- this is the 5690 build at the time this was out
2. I have already 5762/119
3. Added one line in index.html to define the id for the viewport. id: 'the-viewport'
4. Also added this line. Ext.Container.prototype.bufferResize = false;
5. Before running the profile code, I clicked on 'Add 10 Tabs' (under Card Two)

The window shots are shown below. Notice how doLayout is more CPU intensive with 5762. The getStyle function is called less often though.

The name of the image states from which Ext release.

meroy
10 Dec 2009, 12:44 AM
With the current release, the toolbar for the html editor is shown momentarily while rendering the form. You have to run the test tool to see it. It's ugly. This did not occur previously with 5690. The html editor is on the 2nd tab, not the first. Resizing with FF is choppy and less so with Ext.Container.prototype.bufferResize = false. But, 5690 has an edge over 5762 to me. It's noticeable, especially with FF3.5.

Here's why I looked at this. I first noticed an issue with resizing performance when testing the desktop example. I saw how the taskbar took slightly longer to draw or keep up with the window sizing. It wasn't much, but it was there. I came back to revisit this using this tool as it's more noticeable.

Well, these are issues with FF. I hope somebody is working on the issue with IE6 (clearing out the screen) when dynamically adding a form containing the html editor. I imagine that this will affect apps out there doing the same thing and the user is running IE 6. This is actually a show stopper for building tools against the 3.1 release when users are still using IE6 in large corporations. Pretty much everything works well with the current build. But then, this issue showed up and wasn't there with 5690 before the new layout changes began.

This is all I have for QA issues seen.

meroy
10 Dec 2009, 1:02 AM
## Container layout invocations: From 5690 -- Adding 10 Forms (with html editor)

Laying out <div id="card-panel-two-tab" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="card-panel-two-tab" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="card-panel-two-tab" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="new-form-1" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1041" class="x-toolbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1041" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1029" class=" x-tab-panel">
Laying out <div id="ext-comp-1030" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1038" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1023" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1026" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1023" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1026" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1022" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1030" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1029" class=" x-tab-panel">
Laying out <div id="ext-comp-1037" class=" x-plain">
Laying out <div id="ext-comp-1021" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-1" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="new-form-2" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1089" class="x-toolbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1089" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1077" class=" x-tab-panel">
Laying out <div id="ext-comp-1078" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1086" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1071" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1074" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1071" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1074" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1070" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1078" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1077" class=" x-tab-panel">
Laying out <div id="ext-comp-1085" class=" x-plain">
Laying out <div id="ext-comp-1069" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-2" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-3" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1137" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1137" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1125" class=" x-tab-panel">
Laying out <div id="ext-comp-1126" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1134" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1119" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1122" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1119" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1122" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1118" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1126" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1125" class=" x-tab-panel">
Laying out <div id="ext-comp-1133" class=" x-plain">
Laying out <div id="ext-comp-1117" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-3" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-4" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1185" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1185" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1173" class=" x-tab-panel">
Laying out <div id="ext-comp-1174" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1182" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1167" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1170" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1167" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1170" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1166" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1174" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1173" class=" x-tab-panel">
Laying out <div id="ext-comp-1181" class=" x-plain">
Laying out <div id="ext-comp-1165" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-4" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1167" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1170" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1166" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1174" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1173" class=" x-tab-panel">
Laying out <div id="ext-comp-1182" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1181" class=" x-plain">
Laying out <div id="ext-comp-1165" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-4" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1167" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1170" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1166" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1174" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1173" class=" x-tab-panel">
Laying out <div id="ext-comp-1182" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1181" class=" x-plain">
Laying out <div id="ext-comp-1165" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-4" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="new-form-5" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1233" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1233" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1221" class=" x-tab-panel">
Laying out <div id="ext-comp-1222" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1230" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1215" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1218" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1215" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1218" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1214" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1222" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1221" class=" x-tab-panel">
Laying out <div id="ext-comp-1229" class=" x-plain">
Laying out <div id="ext-comp-1213" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-5" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-6" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1281" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1281" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1269" class=" x-tab-panel">
Laying out <div id="ext-comp-1270" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1278" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1263" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1266" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1263" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1266" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1262" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1270" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1269" class=" x-tab-panel">
Laying out <div id="ext-comp-1277" class=" x-plain">
Laying out <div id="ext-comp-1261" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-6" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-7" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1329" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1329" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1317" class=" x-tab-panel">
Laying out <div id="ext-comp-1318" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1326" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1311" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1314" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1311" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1314" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1310" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1318" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1317" class=" x-tab-panel">
Laying out <div id="ext-comp-1325" class=" x-plain">
Laying out <div id="ext-comp-1309" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-7" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-8" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1377" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1377" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1365" class=" x-tab-panel">
Laying out <div id="ext-comp-1366" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1374" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1359" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1362" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1359" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1362" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1358" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1366" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1365" class=" x-tab-panel">
Laying out <div id="ext-comp-1373" class=" x-plain">
Laying out <div id="ext-comp-1357" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-8" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-9" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1425" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1425" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1413" class=" x-tab-panel">
Laying out <div id="ext-comp-1414" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1422" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1407" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1410" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1407" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1410" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1406" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1414" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1413" class=" x-tab-panel">
Laying out <div id="ext-comp-1421" class=" x-plain">
Laying out <div id="ext-comp-1405" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-9" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1407" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1410" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1406" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1414" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1413" class=" x-tab-panel">
Laying out <div id="ext-comp-1422" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1421" class=" x-plain">
Laying out <div id="ext-comp-1405" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-9" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1407" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1410" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1406" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1414" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1413" class=" x-tab-panel">
Laying out <div id="ext-comp-1422" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1421" class=" x-plain">
Laying out <div id="ext-comp-1405" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-9" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="new-form-10" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1473" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1473" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 0px;">
Laying out <div id="ext-comp-1461" class=" x-tab-panel">
Laying out <div id="ext-comp-1462" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1470" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1455" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1458" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1455" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1458" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1454" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1462" class=" x-panel x-panel-noborder " style="width: auto;">
Laying out <div id="ext-comp-1461" class=" x-tab-panel">
Laying out <div id="ext-comp-1469" class=" x-plain">
Laying out <div id="ext-comp-1453" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-10" class=" content-class content-class-noborder" style="width: 850px;">

meroy
10 Dec 2009, 1:08 AM
This has 30 additional lines.




## Container layout invocations: From 5762 -- Adding 10 Forms (with html editor)

Laying out <div id="card-panel-two-tab" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="card-panel-two-tab" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="card-panel-two-tab" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="new-form-1" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1030" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1030" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1041" class="x-toolbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1041" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 494px;">
Laying out <div id="ext-comp-1041" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1035" class=" x-panel x-plain x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1035" class=" x-panel x-plain x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1030" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1030" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1038" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1023" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1026" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1022" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1030" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1029" class=" x-tab-panel">
Laying out <div id="ext-comp-1037" class=" x-plain">
Laying out <div id="ext-comp-1021" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-1" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="new-form-2" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1080" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1080" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1091" class="x-toolbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1091" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 494px;">
Laying out <div id="ext-comp-1091" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1085" class=" x-panel x-plain x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1085" class=" x-panel x-plain x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1080" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1080" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1088" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1073" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1076" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1072" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1080" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1079" class=" x-tab-panel">
Laying out <div id="ext-comp-1087" class=" x-plain">
Laying out <div id="ext-comp-1071" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-2" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="new-form-3" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1130" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1130" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1141" class="x-toolbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1141" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 494px;">
Laying out <div id="ext-comp-1141" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1135" class=" x-panel x-plain x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1135" class=" x-panel x-plain x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1130" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1130" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1138" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1123" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1126" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1122" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1130" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1129" class=" x-tab-panel">
Laying out <div id="ext-comp-1137" class=" x-plain">
Laying out <div id="ext-comp-1121" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-3" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="new-form-4" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1180" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1180" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1191" class="x-toolbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1191" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 494px;">
Laying out <div id="ext-comp-1191" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1185" class=" x-panel x-plain x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1185" class=" x-panel x-plain x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1180" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1180" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1188" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1173" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1176" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1172" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1180" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1179" class=" x-tab-panel">
Laying out <div id="ext-comp-1187" class=" x-plain">
Laying out <div id="ext-comp-1171" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-4" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1173" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1176" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1172" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1180" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1179" class=" x-tab-panel">
Laying out <div id="ext-comp-1188" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1187" class=" x-plain">
Laying out <div id="ext-comp-1171" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-4" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1173" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1176" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1172" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1180" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1179" class=" x-tab-panel">
Laying out <div id="ext-comp-1188" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1187" class=" x-plain">
Laying out <div id="ext-comp-1171" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-4" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="new-form-5" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1230" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1230" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1241" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1241" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1241" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1235" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1235" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1230" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1230" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1238" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1223" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1226" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1222" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1230" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1229" class=" x-tab-panel">
Laying out <div id="ext-comp-1237" class=" x-plain">
Laying out <div id="ext-comp-1221" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-5" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-6" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1280" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1280" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1291" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1291" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1291" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1285" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1285" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1280" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1280" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1288" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1273" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1276" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1272" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1280" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1279" class=" x-tab-panel">
Laying out <div id="ext-comp-1287" class=" x-plain">
Laying out <div id="ext-comp-1271" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-6" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-7" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1330" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1330" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1341" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1341" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1341" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1335" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1335" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1330" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1330" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1338" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1323" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1326" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1322" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1330" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1329" class=" x-tab-panel">
Laying out <div id="ext-comp-1337" class=" x-plain">
Laying out <div id="ext-comp-1321" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-7" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-8" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1380" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1380" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1391" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1391" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1391" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1385" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1385" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1380" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1380" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1388" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1373" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1376" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1372" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1380" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1379" class=" x-tab-panel">
Laying out <div id="ext-comp-1387" class=" x-plain">
Laying out <div id="ext-comp-1371" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-8" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="new-form-9" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1430" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1430" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1441" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1441" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1441" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1435" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1435" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1430" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1430" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1438" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1423" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1426" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1422" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1430" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1429" class=" x-tab-panel">
Laying out <div id="ext-comp-1437" class=" x-plain">
Laying out <div id="ext-comp-1421" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-9" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="ext-comp-1423" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1426" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1422" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1430" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1429" class=" x-tab-panel">
Laying out <div id="ext-comp-1438" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1437" class=" x-plain">
Laying out <div id="ext-comp-1421" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-9" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1423" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1426" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1422" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1430" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1429" class=" x-tab-panel">
Laying out <div id="ext-comp-1438" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1437" class=" x-plain">
Laying out <div id="ext-comp-1421" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-9" class=" content-class content-class-noborder x-hide-display" style="width: 850px;">
Laying out <div id="card-panel-two" class=" x-tab-panel tabs-multirow x-tab-panel-noborder" style="width: 850px;">
Laying out <div id="new-form-10" class=" content-class content-class-noborder" style="width: 850px;">
Laying out <div id="ext-comp-1480" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1480" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1491" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1491" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1491" class="x-toolbar x-small-editor x-toolbar-layout-ct" style="width: 634px;">
Laying out <div id="ext-comp-1485" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1485" class=" x-panel x-plain x-panel-noborder x-hide-display" style="width: auto;">
Laying out <div id="ext-comp-1480" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1480" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1488" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
Laying out <div id="ext-comp-1473" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1476" class=" x-panel x-panel-noborder x-form-label-top x-column" style="width: 329px;">
Laying out <div id="ext-comp-1472" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1480" class=" x-panel x-panel-noborder" style="width: auto;">
Laying out <div id="ext-comp-1479" class=" x-tab-panel">
Laying out <div id="ext-comp-1487" class=" x-plain">
Laying out <div id="ext-comp-1471" class=" x-bubble x-bubble-noborder" style="width: 680px;">
Laying out <div id="new-form-10" class=" content-class content-class-noborder" style="width: 850px;">

Animal
10 Dec 2009, 1:15 AM
Panel performs an extra layout of every Toolbar. Try this override:



Ext.override(Ext.Panel, {
initEvents : function(){
if(this.keys){
this.getKeyMap();
}
if(this.draggable){
this.initDraggable();
}
if(this.toolbars.length > 0){
Ext.each(this.toolbars, function(tb){
tb.doLayout(); // This has already been done if the Panel is being rendered with a predefined size
// If not, then it gets done when first sized (onResize)
tb.on({
scope: this,
afterlayout: this.syncHeight,
remove: this.syncHeight
});
}, this);
if(!this.ownerCt){
this.syncHeight();
}
}

}
});

meroy
10 Dec 2009, 1:43 AM
The output for observable events being fired between 5690 and 5762 were identical.

The attachment data.zip contains 4 unix formatted text files:

1. layout_5690.txt
2. layout_5762.txt
3. observable_5690.txt
4. observable_5762.txt

meroy
10 Dec 2009, 1:47 AM
Panel performs an extra layout of every Toolbar. Try this override:


What am I looking for with this override? Is this for addressing the resizing performance issue?

meroy
10 Dec 2009, 1:54 AM
Panel performs an extra layout of every Toolbar. Try this override:



Ext.override(Ext.Panel, {
initEvents : function(){
if(this.keys){
this.getKeyMap();
}
if(this.draggable){
this.initDraggable();
}
if(this.toolbars.length > 0){
Ext.each(this.toolbars, function(tb){
tb.doLayout(); // This has already been done if the Panel is being rendered with a predefined size
// If not, then it gets done when first sized (onResize)
tb.on({
scope: this,
afterlayout: this.syncHeight,
remove: this.syncHeight
});
}, this);
if(!this.ownerCt){
this.syncHeight();
}
}

}
});


This is needed: tb.doLayout(). Without it, the buttons are not shown and only appear when resizing the window.

meroy
10 Dec 2009, 1:58 AM
In any event, no change on the rendering of the form. The toolbar for the html editor is still shown momentarily.

Animal
10 Dec 2009, 2:13 AM
Also this is needed I think:



Ext.override(Ext.layout.CardLayout, {
setActiveItem : function(item){
var ai = this.activeItem;
item = this.container.getComponent(item);
if(ai != item){
if(ai){
ai.hide();
ai.fireEvent('deactivate', ai);
}
var layout = item.doLayout && (this.layoutOnCardChange || !item.rendered);
this.activeItem = item;

// Lay out *before* showing the newly active item.
// This will size the active item. If it is a Container, then it will lay itself out ASAP: no doLayout call necessary
this.layout();

if(item){
item.show();
}
item.fireEvent('activate', item);
}
}
});


Check the logged layout message now from the Layout Browser example!

Animal
10 Dec 2009, 2:27 AM
This is needed: tb.doLayout(). Without it, the buttons are not shown and only appear when resizing the window.


In what case? I'm testing here, and I see toolbars with buttons.

Animal
10 Dec 2009, 2:31 AM
A problem is that calls do doLayout were chucked in to "fix" the problems wit the layout system. An extra call to doLayout here and there to re-re-recalculate layouts and avoid the optimization process we are going through.

This is also needed:



Ext.override(Ext.Window, {
afterShow : function(isAnim){
this.proxy.hide();
this.el.setStyle('display', 'block');
this.el.show();
if(this.maximized){
this.fitContainer();
}
if(Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
this.cascade(this.setAutoScroll);
}

if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
Ext.EventManager.onWindowResize(this.onWindowResize, this);
}
this.doConstrain();
// this.doLayout(); // Sizing the Window (Which DOES happen) will cause its layout manager to lay out!
if(this.keyMap){
this.keyMap.enable();
}
this.toFront();
this.updateHandles();
if(isAnim && (Ext.isIE || Ext.isWebKit)){
var sz = this.getSize();
this.onResize(sz.width, sz.height);
}
this.onShow();
this.fireEvent('show', this);
}
});


Now log the layout calls in the Desktop example.

Down to bare minimum needed

Animal
10 Dec 2009, 2:38 AM
There are problems with the way HtmlEditor builds itself.

Stand by...

Animal
10 Dec 2009, 2:59 AM
Try this HtmlEditor class definition:



/**
* @class Ext.form.HtmlEditor
* @extends Ext.form.Field
* Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
* automatically hidden when needed. These are noted in the config options where appropriate.
* <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
* enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.
* <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
* supported by this editor.</b>
* <br><br>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
* any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
* <br><br>Example usage:
* <pre><code>
// Simple example rendered with default options:
Ext.QuickTips.init(); // enable tooltips
new Ext.form.HtmlEditor({
renderTo: Ext.getBody(),
width: 800,
height: 300
});

// Passed via xtype into a container and with custom options:
Ext.QuickTips.init(); // enable tooltips
new Ext.Panel({
title: 'HTML Editor',
renderTo: Ext.getBody(),
width: 600,
height: 300,
frame: true,
layout: 'fit',
items: {
xtype: 'htmleditor',
enableColors: false,
enableAlignments: false
}
});
</code></pre>
* @constructor
* Create a new HtmlEditor
* @param {Object} config
* @xtype htmleditor
*/

Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
/**
* @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
*/
enableFormat : true,
/**
* @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
*/
enableFontSize : true,
/**
* @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
*/
enableColors : true,
/**
* @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
*/
enableAlignments : true,
/**
* @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
*/
enableLists : true,
/**
* @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
*/
enableSourceEdit : true,
/**
* @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
*/
enableLinks : true,
/**
* @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
*/
enableFont : true,
/**
* @cfg {String} createLinkText The default text for the create link prompt
*/
createLinkText : 'Please enter the URL for the link:',
/**
* @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
*/
defaultLinkValue : 'http:/'+'/',
/**
* @cfg {Array} fontFamilies An array of available font families
*/
fontFamilies : [
'Arial',
'Courier New',
'Tahoma',
'Times New Roman',
'Verdana'
],
defaultFont: 'tahoma',
/**
* @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to &#160; (Non-breaking space) in Opera and IE6, ​ (Zero-width space) in all other browsers).
*/
defaultValue: (Ext.isOpera || Ext.isIE6) ? '&#160;' : '​',

// private properties
actionMode: 'wrap',
validationEvent : false,
deferHeight: true,
initialized : false,
activated : false,
sourceEditMode : false,
onFocus : Ext.emptyFn,
iframePad:3,
hideMode:'offsets',
defaultAutoCreate : {
tag: "textarea",
style:"width:500px;height:300px;",
autocomplete: "off"
},

// private
initComponent : function(){
this.addEvents(
/**
* @event initialize
* Fires when the editor is fully initialized (including the iframe)
* @param {HtmlEditor} this
*/
'initialize',
/**
* @event activate
* Fires when the editor is first receives the focus. Any insertion must wait
* until after this event.
* @param {HtmlEditor} this
*/
'activate',
/**
* @event beforesync
* Fires before the textarea is updated with content from the editor iframe. Return false
* to cancel the sync.
* @param {HtmlEditor} this
* @param {String} html
*/
'beforesync',
/**
* @event beforepush
* Fires before the iframe editor is updated with content from the textarea. Return false
* to cancel the push.
* @param {HtmlEditor} this
* @param {String} html
*/
'beforepush',
/**
* @event sync
* Fires when the textarea is updated with content from the editor iframe.
* @param {HtmlEditor} this
* @param {String} html
*/
'sync',
/**
* @event push
* Fires when the iframe editor is updated with content from the textarea.
* @param {HtmlEditor} this
* @param {String} html
*/
'push',
/**
* @event editmodechange
* Fires when the editor switches edit modes
* @param {HtmlEditor} this
* @param {Boolean} sourceEdit True if source edit, false if standard editing.
*/
'editmodechange'
)
},

// private
createFontOptions : function(){
var buf = [], fs = this.fontFamilies, ff, lc;
for(var i = 0, len = fs.length; i< len; i++){
ff = fs[i];
lc = ff.toLowerCase();
buf.push(
'<option value="',lc,'" style="font-family:',ff,';"',
(this.defaultFont == lc ? ' selected="true">' : '>'),
ff,
'</option>'
);
}
return buf.join('');
},

/*
* Protected method that will not generally be called directly. It
* is called when the editor creates its toolbar. Override this method if you need to
* add custom toolbar buttons.
* @param {HtmlEditor} editor
*/
createToolbar : function(editor){

var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();

function btn(id, toggle, handler){
return {
itemId : id,
cls : 'x-btn-icon',
iconCls: 'x-edit-'+id,
enableToggle:toggle !== false,
scope: editor,
handler:handler||editor.relayBtnCmd,
clickEvent:'mousedown',
tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
overflowText: editor.buttonTips[id].title || undefined,
tabIndex:-1
};
}

// build the toolbar
var tb = new Ext.Toolbar({
bufferResize: false
});

if(this.enableFont && !Ext.isSafari2){
this.fontSelect = Ext.getBody().createChild({
tag:'select',
cls:'x-font-select',
html: this.createFontOptions()
});
this.mon(this.fontSelect, 'change', function(){
var font = this.fontSelect.dom.value;
this.relayCmd('fontname', font);
this.deferFocus();
}, this);

tb.add(
this.fontSelect.dom,
'-'
);
}

if(this.enableFormat){
tb.add(
btn('bold'),
btn('italic'),
btn('underline')
);
}

if(this.enableFontSize){
tb.add(
'-',
btn('increasefontsize', false, this.adjustFont),
btn('decreasefontsize', false, this.adjustFont)
);
}

if(this.enableColors){
tb.add(
'-', {
itemId:'forecolor',
cls:'x-btn-icon',
iconCls: 'x-edit-forecolor',
clickEvent:'mousedown',
tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
tabIndex:-1,
menu : new Ext.menu.ColorMenu({
allowReselect: true,
focus: Ext.emptyFn,
value:'000000',
plain:true,
listeners: {
scope: this,
select: function(cp, color){
this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
this.deferFocus();
}
},
clickEvent:'mousedown'
})
}, {
itemId:'backcolor',
cls:'x-btn-icon',
iconCls: 'x-edit-backcolor',
clickEvent:'mousedown',
tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
tabIndex:-1,
menu : new Ext.menu.ColorMenu({
focus: Ext.emptyFn,
value:'FFFFFF',
plain:true,
allowReselect: true,
listeners: {
scope: this,
select: function(cp, color){
if(Ext.isGecko){
this.execCmd('useCSS', false);
this.execCmd('hilitecolor', color);
this.execCmd('useCSS', true);
this.deferFocus();
}else{
this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
this.deferFocus();
}
}
},
clickEvent:'mousedown'
})
}
);
}

if(this.enableAlignments){
tb.add(
'-',
btn('justifyleft'),
btn('justifycenter'),
btn('justifyright')
);
}

if(!Ext.isSafari2){
if(this.enableLinks){
tb.add(
'-',
btn('createlink', false, this.createLink)
);
}

if(this.enableLists){
tb.add(
'-',
btn('insertorderedlist'),
btn('insertunorderedlist')
);
}
if(this.enableSourceEdit){
tb.add(
'-',
btn('sourceedit', true, function(btn){
this.toggleSourceEdit(!this.sourceEditMode);
})
);
}
}

// Rendering will lay it out because it does not have an onerCt
tb.render(this.wrap.dom.firstChild);

// stop form submits
this.mon(tb.el, 'click', function(e){
e.preventDefault();
});

this.tb = tb;
},

onDisable: function(){
this.wrap.mask();
Ext.form.HtmlEditor.superclass.onDisable.call(this);
},

onEnable: function(){
this.wrap.unmask();
Ext.form.HtmlEditor.superclass.onEnable.call(this);
},

setReadOnly: function(readOnly){
if(this.initialized){
var newDM = readOnly ? 'off' : 'on',
doc = this.getDoc();
if(String(doc.designMode).toLowerCase() != newDM){
doc.designMode = newDM;
}
this.disableItems(!readOnly);
}
Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
},

/**
* Protected method that will not generally be called directly. It
* is called when the editor initializes the iframe with HTML contents. Override this method if you
* want to change the initialization markup of the iframe (e.g. to add stylesheets).
*/
getDocMarkup : function(){
return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
},

// private
getEditorBody : function(){
var doc = this.getDoc();
return doc.body || doc.documentElement;
},

// private
getDoc : function(){
return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
},

// private
getWin : function(){
return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
},

// private
afterRender : function(){
this.el.dom.style.border = '0 none';
this.el.dom.setAttribute('tabIndex', -1);
this.el.addClass('x-hidden');
if(Ext.isIE){ // fix IE 1px bogus margin
this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
}
this.wrap = this.el.wrap({
cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
});
this.createToolbar(this);
this.disableItems(true);

this.createIFrame();

if(!this.width){
var sz = this.el.getSize();
this.width = sz.width;
this.height = this.height || sz.height;
}

this.resizeEl = this.positionEl = this.wrap;
Ext.form.HtmlEditor.superclass.afterRender.apply(this, arguments);
},

createIFrame: function(){
var iframe = document.createElement('iframe');
iframe.name = Ext.id();
iframe.frameBorder = '0';
iframe.src = Ext.SSL_SECURE_URL;
this.wrap.dom.appendChild(iframe);

this.iframe = iframe;

this.monitorTask = Ext.TaskMgr.start({
run: this.checkDesignMode,
scope: this,
interval:100
});
},

initFrame : function(){
Ext.TaskMgr.stop(this.monitorTask);
var doc = this.getDoc();
this.win = this.getWin();

doc.open();
doc.write(this.getDocMarkup());
doc.close();

var task = { // must defer to wait for browser to be ready
run : function(){
var doc = this.getDoc();
if(doc.body || doc.readyState == 'complete'){
Ext.TaskMgr.stop(task);
doc.designMode="on";
this.initEditor.defer(10, this);
}
},
interval : 10,
duration:10000,
scope: this
};
Ext.TaskMgr.start(task);
},


checkDesignMode : function(){
if(this.wrap && this.wrap.dom.offsetWidth){
var doc = this.getDoc();
if(!doc){
return;
}
if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){
this.initFrame();
}
}
},

disableItems: function(disabled){
if(this.fontSelect){
this.fontSelect.dom.disabled = disabled;
}
this.tb.items.each(function(item){
if(item.getItemId() != 'sourceedit'){
item.setDisabled(disabled);
}
});
},

// private
onResize : function(w, h){
Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
if(this.el && this.iframe){
if(Ext.isNumber(w)){
var aw = w - this.wrap.getFrameWidth('lr');
this.el.setWidth(aw);
this.tb.setWidth(aw);
this.iframe.style.width = Math.max(aw, 0) + 'px';
}
if(Ext.isNumber(h)){
var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
this.el.setHeight(ah);
this.iframe.style.height = Math.max(ah, 0) + 'px';
var bd = this.getEditorBody();
if(bd){
bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
}
}
}
},

/**
* Toggles the editor between standard and source edit mode.
* @param {Boolean} sourceEdit (optional) True for source edit, false for standard
*/
toggleSourceEdit : function(sourceEditMode){
if(sourceEditMode === undefined){
sourceEditMode = !this.sourceEditMode;
}
this.sourceEditMode = sourceEditMode === true;
var btn = this.tb.getComponent('sourceedit');

if(btn.pressed !== this.sourceEditMode){
btn.toggle(this.sourceEditMode);
if(!btn.xtbHidden){
return;
}
}
if(this.sourceEditMode){
this.disableItems(true);
this.syncValue();
this.iframe.className = 'x-hidden';
this.el.removeClass('x-hidden');
this.el.dom.removeAttribute('tabIndex');
this.el.focus();
}else{
if(this.initialized && !this.readOnly){
this.disableItems(false);
}
this.pushValue();
this.iframe.className = '';
this.el.addClass('x-hidden');
this.el.dom.setAttribute('tabIndex', -1);
this.deferFocus();
}
var lastSize = this.lastSize;
if(lastSize){
delete this.lastSize;
this.setSize(lastSize);
}
this.fireEvent('editmodechange', this, this.sourceEditMode);
},

// private used internally
createLink : function(){
var url = prompt(this.createLinkText, this.defaultLinkValue);
if(url && url != 'http:/'+'/'){
this.relayCmd('createlink', url);
}
},

// private
initEvents : function(){
this.originalValue = this.getValue();
},

/**
* Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
* @method
*/
markInvalid : Ext.emptyFn,

/**
* Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
* @method
*/
clearInvalid : Ext.emptyFn,

// docs inherit from Field
setValue : function(v){
Ext.form.HtmlEditor.superclass.setValue.call(this, v);
this.pushValue();
return this;
},

/**
* Protected method that will not generally be called directly. If you need/want
* custom HTML cleanup, this is the method you should override.
* @param {String} html The HTML to be cleaned
* @return {String} The cleaned HTML
*/
cleanHtml: function(html) {
html = String(html);
if(Ext.isWebKit){ // strip safari nonsense
html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
}

/*
* Neat little hack. Strips out all the non-digit characters from the default
* value and compares it to the character code of the first character in the string
* because it can cause encoding issues when posted to the server.
*/
if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){
html = html.substring(1);
}
return html;
},

/**
* Protected method that will not generally be called directly. Syncs the contents
* of the editor iframe with the textarea.
*/
syncValue : function(){
if(this.initialized){
var bd = this.getEditorBody();
var html = bd.innerHTML;
if(Ext.isWebKit){
var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
var m = bs.match(/text-align:(.*?);/i);
if(m && m[1]){
html = '<div style="'+m[0]+'">' + html + '</div>';
}
}
html = this.cleanHtml(html);
if(this.fireEvent('beforesync', this, html) !== false){
this.el.dom.value = html;
this.fireEvent('sync', this, html);
}
}
},

//docs inherit from Field
getValue : function() {
this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
return Ext.form.HtmlEditor.superclass.getValue.call(this);
},

/**
* Protected method that will not generally be called directly. Pushes the value of the textarea
* into the iframe editor.
*/
pushValue : function(){
if(this.initialized){
var v = this.el.dom.value;
if(!this.activated && v.length < 1){
v = this.defaultValue;
}
if(this.fireEvent('beforepush', this, v) !== false){
this.getEditorBody().innerHTML = v;
if(Ext.isGecko){
// Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
var d = this.getDoc(),
mode = d.designMode.toLowerCase();

d.designMode = mode.toggle('on', 'off');
d.designMode = mode;
}
this.fireEvent('push', this, v);
}
}
},

// private
deferFocus : function(){
this.focus.defer(10, this);
},

// docs inherit from Field
focus : function(){
if(this.win && !this.sourceEditMode){
this.win.focus();
}else{
this.el.focus();
}
},

// private
initEditor : function(){
//Destroying the component during/before initEditor can cause issues.
try{
var dbody = this.getEditorBody();
var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
ss['background-attachment'] = 'fixed'; // w3c
dbody.bgProperties = 'fixed'; // ie

Ext.DomHelper.applyStyles(dbody, ss);

var doc = this.getDoc();

if(doc){
try{
Ext.EventManager.removeAll(doc);
}catch(e){}
}

Ext.EventManager.on(doc, {
'mousedown': this.onEditorEvent,
'dblclick': this.onEditorEvent,
'click': this.onEditorEvent,
'keyup': this.onEditorEvent,
buffer:100,
scope: this
});

if(Ext.isGecko){
Ext.EventManager.on(doc, 'keypress', this.applyCommand, this);
}
if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
Ext.EventManager.on(doc, 'keydown', this.fixKeys, this);
}
doc.editorInitialized = true;
this.initialized = true;
this.pushValue();
this.setReadOnly(this.readOnly);
this.fireEvent('initialize', this);
}catch(e){}
},

// private
onDestroy : function(){
if(this.monitorTask){
Ext.TaskMgr.stop(this.monitorTask);
}
if(this.rendered){
Ext.destroy(this.tb);
var doc = this.getDoc();
if(doc){
try{
Ext.EventManager.removeAll(doc);
for (var prop in doc){
delete doc[prop];
}
}catch(e){}
}
if(this.wrap){
this.wrap.dom.innerHTML = '';
this.wrap.remove();
}
}

if(this.el){
this.el.removeAllListeners();
this.el.remove();
}
this.purgeListeners();
},

// private
onFirstFocus : function(){
this.activated = true;
this.disableItems(false);
if(Ext.isGecko){ // prevent silly gecko errors
this.win.focus();
var s = this.win.getSelection();
if(!s.focusNode || s.focusNode.nodeType != 3){
var r = s.getRangeAt(0);
r.selectNodeContents(this.getEditorBody());
r.collapse(true);
this.deferFocus();
}
try{
this.execCmd('useCSS', true);
this.execCmd('styleWithCSS', false);
}catch(e){}
}
this.fireEvent('activate', this);
},

// private
adjustFont: function(btn){
var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1,
doc = this.getDoc(),
v = parseInt(doc.queryCommandValue('FontSize') || 2, 10);
if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){
// Safari 3 values
// 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
if(v <= 10){
v = 1 + adjust;
}else if(v <= 13){
v = 2 + adjust;
}else if(v <= 16){
v = 3 + adjust;
}else if(v <= 18){
v = 4 + adjust;
}else if(v <= 24){
v = 5 + adjust;
}else {
v = 6 + adjust;
}
v = v.constrain(1, 6);
}else{
if(Ext.isSafari){ // safari
adjust *= 2;
}
v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
}
this.execCmd('FontSize', v);
},

// private
onEditorEvent : function(e){
this.updateToolbar();
},


/**
* Protected method that will not generally be called directly. It triggers
* a toolbar update by reading the markup state of the current selection in the editor.
*/
updateToolbar: function(){

if(this.readOnly){
return;
}

if(!this.activated){
this.onFirstFocus();
return;
}

var btns = this.tb.items.map,
doc = this.getDoc();

if(this.enableFont && !Ext.isSafari2){
var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
if(name != this.fontSelect.dom.value){
this.fontSelect.dom.value = name;
}
}
if(this.enableFormat){
btns.bold.toggle(doc.queryCommandState('bold'));
btns.italic.toggle(doc.queryCommandState('italic'));
btns.underline.toggle(doc.queryCommandState('underline'));
}
if(this.enableAlignments){
btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
btns.justifyright.toggle(doc.queryCommandState('justifyright'));
}
if(!Ext.isSafari2 && this.enableLists){
btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
}

Ext.menu.MenuMgr.hideAll();

this.syncValue();
},

// private
relayBtnCmd : function(btn){
this.relayCmd(btn.getItemId());
},

/**
* Executes a Midas editor command on the editor document and performs necessary focus and
* toolbar updates. <b>This should only be called after the editor is initialized.</b>
* @param {String} cmd The Midas command
* @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
*/
relayCmd : function(cmd, value){
(function(){
this.focus();
this.execCmd(cmd, value);
this.updateToolbar();
}).defer(10, this);
},

/**
* Executes a Midas editor command directly on the editor document.
* For visual commands, you should use {@link #relayCmd} instead.
* <b>This should only be called after the editor is initialized.</b>
* @param {String} cmd The Midas command
* @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
*/
execCmd : function(cmd, value){
var doc = this.getDoc();
doc.execCommand(cmd, false, value === undefined ? null : value);
this.syncValue();
},

// private
applyCommand : function(e){
if(e.ctrlKey){
var c = e.getCharCode(), cmd;
if(c > 0){
c = String.fromCharCode(c);
switch(c){
case 'b':
cmd = 'bold';
break;
case 'i':
cmd = 'italic';
break;
case 'u':
cmd = 'underline';
break;
}
if(cmd){
this.win.focus();
this.execCmd(cmd);
this.deferFocus();
e.preventDefault();
}
}
}
},

/**
* Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
* to insert text.
* @param {String} text
*/
insertAtCursor : function(text){
if(!this.activated){
return;
}
if(Ext.isIE){
this.win.focus();
var doc = this.getDoc(),
r = doc.selection.createRange();
if(r){
r.pasteHTML(text);
this.syncValue();
this.deferFocus();
}
}else{
this.win.focus();
this.execCmd('InsertHTML', text);
this.deferFocus();
}
},

// private
fixKeys : function(){ // load time branching for fastest keydown performance
if(Ext.isIE){
return function(e){
var k = e.getKey(),
doc = this.getDoc(),
r;
if(k == e.TAB){
e.stopEvent();
r = doc.selection.createRange();
if(r){
r.collapse(true);
r.pasteHTML('&nbsp;&nbsp;&nbsp;&nbsp;');
this.deferFocus();
}
}else if(k == e.ENTER){
r = doc.selection.createRange();
if(r){
var target = r.parentElement();
if(!target || target.tagName.toLowerCase() != 'li'){
e.stopEvent();
r.pasteHTML('<br />');
r.collapse(false);
r.select();
}
}
}
};
}else if(Ext.isOpera){
return function(e){
var k = e.getKey();
if(k == e.TAB){
e.stopEvent();
this.win.focus();
this.execCmd('InsertHTML','&nbsp;&nbsp;&nbsp;&nbsp;');
this.deferFocus();
}
};
}else if(Ext.isWebKit){
return function(e){
var k = e.getKey();
if(k == e.TAB){
e.stopEvent();
this.execCmd('InsertText','\t');
this.deferFocus();
}else if(k == e.ENTER){
e.stopEvent();
this.execCmd('InsertHtml','<br /><br />');
this.deferFocus();
}
};
}
}(),

/**
* Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>
* @return {Ext.Toolbar}
*/
getToolbar : function(){
return this.tb;
},

/**
* Object collection of toolbar tooltips for the buttons in the editor. The key
* is the command id associated with that button and the value is a valid QuickTips object.
* For example:
<pre><code>
{
bold : {
title: 'Bold (Ctrl+B)',
text: 'Make the selected text bold.',
cls: 'x-html-editor-tip'
},
italic : {
title: 'Italic (Ctrl+I)',
text: 'Make the selected text italic.',
cls: 'x-html-editor-tip'
},
...
</code></pre>
* @type Object
*/
buttonTips : {
bold : {
title: 'Bold (Ctrl+B)',
text: 'Make the selected text bold.',
cls: 'x-html-editor-tip'
},
italic : {
title: 'Italic (Ctrl+I)',
text: 'Make the selected text italic.',
cls: 'x-html-editor-tip'
},
underline : {
title: 'Underline (Ctrl+U)',
text: 'Underline the selected text.',
cls: 'x-html-editor-tip'
},
increasefontsize : {
title: 'Grow Text',
text: 'Increase the font size.',
cls: 'x-html-editor-tip'
},
decreasefontsize : {
title: 'Shrink Text',
text: 'Decrease the font size.',
cls: 'x-html-editor-tip'
},
backcolor : {
title: 'Text Highlight Color',
text: 'Change the background color of the selected text.',
cls: 'x-html-editor-tip'
},
forecolor : {
title: 'Font Color',
text: 'Change the color of the selected text.',
cls: 'x-html-editor-tip'
},
justifyleft : {
title: 'Align Text Left',
text: 'Align text to the left.',
cls: 'x-html-editor-tip'
},
justifycenter : {
title: 'Center Text',
text: 'Center text in the editor.',
cls: 'x-html-editor-tip'
},
justifyright : {
title: 'Align Text Right',
text: 'Align text to the right.',
cls: 'x-html-editor-tip'
},
insertunorderedlist : {
title: 'Bullet List',
text: 'Start a bulleted list.',
cls: 'x-html-editor-tip'
},
insertorderedlist : {
title: 'Numbered List',
text: 'Start a numbered list.',
cls: 'x-html-editor-tip'
},
createlink : {
title: 'Hyperlink',
text: 'Make the selected text a hyperlink.',
cls: 'x-html-editor-tip'
},
sourceedit : {
title: 'Source Edit',
text: 'Switch to source editing mode.',
cls: 'x-html-editor-tip'
}
}

// hide stuff that is not compatible
/**
* @event blur
* @hide
*/
/**
* @event change
* @hide
*/
/**
* @event focus
* @hide
*/
/**
* @event specialkey
* @hide
*/
/**
* @cfg {String} fieldClass @hide
*/
/**
* @cfg {String} focusClass @hide
*/
/**
* @cfg {String} autoCreate @hide
*/
/**
* @cfg {String} inputType @hide
*/
/**
* @cfg {String} invalidClass @hide
*/
/**
* @cfg {String} invalidText @hide
*/
/**
* @cfg {String} msgFx @hide
*/
/**
* @cfg {String} validateOnBlur @hide
*/
/**
* @cfg {Boolean} allowDomMove @hide
*/
/**
* @cfg {String} applyTo @hide
*/
/**
* @cfg {String} autoHeight @hide
*/
/**
* @cfg {String} autoWidth @hide
*/
/**
* @cfg {String} cls @hide
*/
/**
* @cfg {String} disabled @hide
*/
/**
* @cfg {String} disabledClass @hide
*/
/**
* @cfg {String} msgTarget @hide
*/
/**
* @cfg {String} readOnly @hide
*/
/**
* @cfg {String} style @hide
*/
/**
* @cfg {String} validationDelay @hide
*/
/**
* @cfg {String} validationEvent @hide
*/
/**
* @cfg {String} tabIndex @hide
*/
/**
* @property disabled
* @hide
*/
/**
* @method applyToMarkup
* @hide
*/
/**
* @method disable
* @hide
*/
/**
* @method enable
* @hide
*/
/**
* @method validate
* @hide
*/
/**
* @event valid
* @hide
*/
/**
* @method setDisabled
* @hide
*/
/**
* @cfg keys
* @hide
*/
});
Ext.reg('htmleditor', Ext.form.HtmlEditor);

Animal
10 Dec 2009, 6:00 AM
Another adjustment to Container.canLayout

It reports that empty elements which are position:absolute, or that are within a <td> have zero dimensions, and so vetos a perfectly valid layout operation.

The fix I'm using here (I'm using the latest code in the very complex nested layouts at work):



Ext.override(Ext.Container.canLayout, {
canLayout: function() {
var el = this.getLayoutTarget(), p, result = false;
if (el && (el = el.dom)) {

// Displayed elements which are empty and position:absolute, or are empty and within a <td> will
// report offsetWidth and offsetHeight of zero. So temporarily give it padding to see if it acquires dimensions.
p = el.style.paddingLeft;
el.style.paddingRight = '1px';
result = !!(el.offsetWidth || el.offsetHeight);
el.style.paddingRight = p;
}
return result;
}
});

Animal
10 Dec 2009, 7:04 AM
Here's an important one.

CardLayout setActiveItem does too much if layoutOnCardChange is true.

It calls this.layout() which sizes the newly active item. If that is a size-sensitive layout, that will size itself... etc.....

Then, if layoutOnCardChange is true, it calls doLayout on that item.

The code should be



Ext.override(Ext.layout.CardLayout, {
/**
* Sets the active (visible) item in the layout.
* @param {String/Number} item The string component id or numeric index of the item to activate
*/
setActiveItem : function(item){
var ai = this.activeItem,
item = this.container.getComponent(item);
if(ai != item){
if(ai){
ai.hide();
ai.fireEvent('deactivate', ai);
}
if(this.activeItem = item){
item.show();
if (this.layoutOnCardChange) {
// sizes the child item *and* lays it out
this.container.doLayout();
} else {
// sizes the child item without laying it out.
this.layout();
}
item.fireEvent('activate', item);
}
}
}
});

meroy
10 Dec 2009, 7:40 AM
In what case? I'm testing here, and I see toolbars with buttons.

Not with the test-case tool. I will attach an image. The 2 buttons are missing here.

This is not shown unless I resize the window.



xtype: 'panel',
unstyled: true,
buttonAlign: 'center',
buttons: [{
text: 'Save',
scale: 'medium',
scope: this
},{
text: 'Cancel',
scale: 'medium',
scope: this
}]


Therefore, I need the line in red below.



Ext.override(Ext.Panel, {
initEvents : function(){
if(this.keys){
this.getKeyMap();
}
if(this.draggable){
this.initDraggable();
}
if(this.toolbars.length > 0){
Ext.each(this.toolbars, function(tb){
tb.doLayout(); // This has already been done if the Panel is being rendered with a predefined size
// If not, then it gets done when first sized (onResize)
tb.on({
scope: this,
afterlayout: this.syncHeight,
remove: this.syncHeight
});
}, this);
if(!this.ownerCt){
this.syncHeight();
}
}

}
});


I also tried your htmleditor class definition. It renders even slower than. I replaced svn.ext-5763/src/widgets/form/HtmlEditor.js with yours and rebuilt as svn.ext-5763a for testing with all the overrides. I went back to 5763 and just your overrides below, but with the one change as mentioned above in red (the tb.doLayout() is needed).



Ext.override(Ext.Panel, {
initEvents : function(){
if(this.keys){
this.getKeyMap();
}
if(this.draggable){
this.initDraggable();
}
if(this.toolbars.length > 0){
Ext.each(this.toolbars, function(tb){
tb.doLayout(); // This has already been done if the Panel is being rendered with a predefined size
// If not, then it gets done when first sized (onResize)
tb.on({
scope: this,
afterlayout: this.syncHeight,
remove: this.syncHeight
});
}, this);
if(!this.ownerCt){
this.syncHeight();
}
}

}
});

Ext.override(Ext.layout.CardLayout, {
setActiveItem : function(item){
var ai = this.activeItem;
item = this.container.getComponent(item);
if(ai != item){
if(ai){
ai.hide();
ai.fireEvent('deactivate', ai);
}
var layout = item.doLayout && (this.layoutOnCardChange || !item.rendered);
this.activeItem = item;

// Lay out *before* showing the newly active item.
// This will size the active item. If it is a Container, then it will lay itself out ASAP: no doLayout call necessary
this.layout();

if(item){
item.show();
}
item.fireEvent('activate', item);
}
}
});

Ext.override(Ext.Window, {
afterShow : function(isAnim){
this.proxy.hide();
this.el.setStyle('display', 'block');
this.el.show();
if(this.maximized){
this.fitContainer();
}
if(Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
this.cascade(this.setAutoScroll);
}

if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
Ext.EventManager.onWindowResize(this.onWindowResize, this);
}
this.doConstrain();
// this.doLayout(); // Sizing the Window (Which DOES happen) will cause its layout manager to lay out!
if(this.keyMap){
this.keyMap.enable();
}
this.toFront();
this.updateHandles();
if(isAnim && (Ext.isIE || Ext.isWebKit)){
var sz = this.getSize();
this.onResize(sz.width, sz.height);
}
this.onShow();
this.fireEvent('show', this);
}
});

Ext.override(Ext.Container.canLayout, {
canLayout: function() {
var el = this.getLayoutTarget(), p, result = false;
if (el && (el = el.dom)) {

// Displayed elements which are empty and position:absolute, or are empty and within a <td> will
// report offsetWidth and offsetHeight of zero. So temporarily give it padding to see if it acquires dimensions.
p = el.style.paddingLeft;
el.style.paddingRight = '1px';
result = !!(el.offsetWidth || el.offsetHeight);
el.style.paddingRight = p;
}
return result;
}
});


Yes, it renders faster. But now, another visual problem. Its with FF3.5 under Leopard (I have not tested this under Windows). I click on the Biography tab and FF's loading indicator comes on and doesn't stop. I click the Phone Numbers tab and again the Biography tab. FF, at this point, now appears fine. The loading indicator bar stop.

I'm not sure if any of this even addresses the main problem with IE 6.

The issues with FF is not a concern for me as our users run IE. But, it may be for others out there. This is why I did so much QA for the edge cases. I didn't do QA just for IE.

The worst thing that can happen for us at this point is that if Ext 3.1 is released with these findings, I only add HtmlEditor to the "do not use" list for IE 6 -- when it's added dynamically.

Animal
10 Dec 2009, 8:37 AM
That CardLayout.setActiveItem you just posted is not the latest - see post #37.

The HtmlEditor might render a littler slower.

That's because I ensured that the Toolbar gets layed out on render which was the problem you reported. That is what it must do because its setHeight must account for the Toolbar height.

meroy
10 Dec 2009, 9:13 AM
I got it with the html toolbar appearing while the form is being rendered. That's not a bug then based on what you said. This is new -- should be added to docs for what may look/feel different with 3.1. Some apps may break out there if deferredRender is set to true for forms containing tabs. One of the examples was updated. The change was deferredRender: 'false'.


Here is the overrides.js -- I'm using this with 5763 and using the HtmlEditor.js class that comes with 5763. Also, click on the Biography tab. FF's loading indicator appears and doesn't go away (look at lower right hand corner of window). The same is seen if using your HtmlEditor.js class file. Attaching image below. Are you seeing that. This was under Leopard. These overrides addresses the resizing performance issue. But, the loading indicator should stop -- again click on the Biography tab.

BTW: I hope some of this addresses the issue with IE. I will be heading to work after this post.



Ext.override(Ext.Panel, {
initEvents : function(){
if(this.keys){
this.getKeyMap();
}
if(this.draggable){
this.initDraggable();
}
if(this.toolbars.length > 0){
Ext.each(this.toolbars, function(tb){
tb.doLayout(); // This has already been done if the Panel is being rendered with a predefined size
// If not, then it gets done when first sized (onResize)
tb.on({
scope: this,
afterlayout: this.syncHeight,
remove: this.syncHeight
});
}, this);
if(!this.ownerCt){
this.syncHeight();
}
}

}
});

Ext.override(Ext.layout.CardLayout, {
/**
* Sets the active (visible) item in the layout.
* @param {String/Number} item The string component id or numeric index of the item to activate
*/
setActiveItem : function(item){
var ai = this.activeItem,
item = this.container.getComponent(item);
if(ai != item){
if(ai){
ai.hide();
ai.fireEvent('deactivate', ai);
}
if(this.activeItem = item){
item.hide();
if (this.layoutOnCardChange) {
// sizes the child item *and* lays out its children (when next shown)
this.container.doLayout();
} else {
// Sets the child item's size without laying out its children.
this.layout();
}
item.show();
item.fireEvent('activate', item);
}
}
}
});

Ext.override(Ext.Window, {
afterShow : function(isAnim){
this.proxy.hide();
this.el.setStyle('display', 'block');
this.el.show();
if(this.maximized){
this.fitContainer();
}
if(Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
this.cascade(this.setAutoScroll);
}

if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
Ext.EventManager.onWindowResize(this.onWindowResize, this);
}
this.doConstrain();
// this.doLayout(); // Sizing the Window (Which DOES happen) will cause its layout manager to lay out!
if(this.keyMap){
this.keyMap.enable();
}
this.toFront();
this.updateHandles();
if(isAnim && (Ext.isIE || Ext.isWebKit)){
var sz = this.getSize();
this.onResize(sz.width, sz.height);
}
this.onShow();
this.fireEvent('show', this);
}
});

Ext.override(Ext.Container.canLayout, {
canLayout: function() {
var el = this.getLayoutTarget(), p, result = false;
if (el && (el = el.dom)) {

// Displayed elements which are empty and position:absolute, or are empty and within a <td> will
// report offsetWidth and offsetHeight of zero. So temporarily give it padding to see if it acquires dimensions.
p = el.style.paddingLeft;
el.style.paddingRight = '1px';
result = !!(el.offsetWidth || el.offsetHeight);
el.style.paddingRight = p;
}
return result;
}
});

meroy
10 Dec 2009, 9:22 AM
Have you compared the look and feel of rendering that form with 5690 and 5763. It's much nicer with 5690 as well as faster. The overrides helps a lot, but it's not like 5690. Take a look and you will see it. It's 5690/113.

meroy
10 Dec 2009, 9:33 AM
I have this as suggested:
Ext.Container.prototype.bufferResize = false;

With 5690, the form renders beautifully and not choppy at all.

With 5762, you see it renders in pieces and things move/hide into place. I think folks out there will complain about this. The gracefulness of 5690 is gone, well for this form configured with a tab and a html editor. I'm sure there are apps out there utilizing this form/tab/html editor and added dynamically.

meroy
10 Dec 2009, 10:19 AM
Retested all of this under IE 6. Using several conditions and different outcome. This may help solve the mystery. The tests checks to see if the window goes blank momentarily under IE 6 when dynamically adding a form/tab/html editor.

## // Ext.Container.prototype.bufferResize = false; // commented this out in index.html
## // deferredRender: 'false' // commented this line out in form-configs.js

1. 3.0.3: Passed
2. r5690: Passed

## Ext.Container.prototype.bufferResize = false; // uncommented this in index.html
## // deferredRender: 'false' // commented this line out in form-configs.js

1. 3.0.3: Failed
2. r5690: Failed

## Ext.Container.prototype.bufferResize = false; // uncommented this in index.html
## deferredRender: 'false' // uncommented this line in form-configs.js

1. 3.0.3: Passed
2. r5690: Passed


With r5763, I cannot get IE 6 to stop blanking the entire window with any setting and with/without the overrides by Animal.

I hope this post helps. It's interesting.

Animal
10 Dec 2009, 11:09 AM
I have this as suggested:
Ext.Container.prototype.bufferResize = false;

With 5690, the form renders beautifully and not choppy at all.

With 5762, you see it renders in pieces and things move/hide into place. I think folks out there will complain about this. The gracefulness of 5690 is gone, well for this form configured with a tab and a html editor. I'm sure there are apps out there utilizing this form/tab/html editor and added dynamically.

What happens now is that resize operations on a Container lay that Container out if it is possible to lay itself out (if it is not display:none).

Container.afterRender calls BoxComponent.afterRender which sizes itself to the specified width/hight. That triggers a layout.

So a Container lays out its child containers as it sizes them, while laying ITSELF out.

You will notice that the messages logged from that bookmarklet are "the wrong way round". Inner containers log their layout message first. I thought this would be more efficient and result in less DOM "churn".

If you can supply a test that illustrates that choppiness, I will experiment with a build here which prevents that layout on initial size.

meroy
10 Dec 2009, 12:54 PM
I was using the test-case-2b tool. Again, the 2nd set of buttons -- clicking on "Add 1 Form".

Comment out this line if you had added this -- it wasn't here in the zip file.
Ext.Container.prototype.bufferResize = false;

Here:

FF3.5, r5690/113:

1. Ext.Container.prototype.bufferResize = false; Not choppy 0% -- very nice
2. Ext.Container.prototype.bufferResize = true; choppy -- renders fast though

#1 is the best in this case -- very beautiful rendering of the form/tab/html editor

FF3.5, r5763/119: (no overrides)

1. Ext.Container.prototype.bufferResize = false; This is choppy.
2. Ext.Container.prototype.bufferResize = true; This is choppy -- same.

FF3.5, r5763/119: (with overrides)

1. Ext.Container.prototype.bufferResize = false; This is choppy.
2. Ext.Container.prototype.bufferResize = true; This is choppy -- same.

Findings:

It looks better when applying the overrides. The html editor toolbar is shown right below the tabs momentarily. Without it, the toolbar is briefly shown below the Fax form field.

The test was done on a laptop running at 2.66 GHz. Not sure what you're running on.

Under Windows XP/FF3.5, the loading indicator seen with Leopard is not present here.

Try this. Click on "Add 10 Forms" twice. This adds more stress and slows things down a bit. You can see the form being rendered. I have to give the edge to 5690 for rendering forms containing a tab and html-editor beautifully and much faster too.

Resizing is better with 5763 with the overrides over 5690. Now, I see the performance advantage when Ext.Container.prototype.bufferResize = false; But it ends there, keep reading.

My preference with this demo FF3.5 and form/tab/html-editor is 5690, but set Ext.Container.prototype.bufferResize to true. You should try resizing after adding 10 tabs (Forms), again from the Card Two buttons. Resizing is just nice. It's buffered. Ok, as bufferResize is true here, the rendering of the form is choppy. But, the forms render very fast.

The graceful rendering/resizing of 5690 is gone when going to 5762 with FF3.5. Depending on the app, I can choose which I wanted with 5690.

Ext.Container.prototype.bufferResize = false; // for beautiful rendering of this demo
Ext.Container.prototype.bufferResize = true; // if preference is for resizing as it buffers

I hope this helps. The test-case tool has been invaluable to me.

meroy
10 Dec 2009, 12:56 PM
Is the dev team working on the issue with IE 6? I have not heard from anybody.

Animal
10 Dec 2009, 1:06 PM
I'm looking at what has been changed. I think I can fix it.

meroy
10 Dec 2009, 1:07 PM
Is the dev team working on the issue with IE 6? I have not heard from anybody.

I received confirmation from Jamie that some folks are looking into this.

xantus
10 Dec 2009, 2:51 PM
I'm looking for hot spots in the code to help with speed improvements

meroy
10 Dec 2009, 3:04 PM
I'm looking for hot spots in the code to help with speed improvements

Will this include a resolution for the IE 6 issue whereas the screen goes blank momentarily?

Thank you very much,
Mario

meroy
10 Dec 2009, 9:47 PM
Thanks. Release 5764 addresses the issue with FF3.5 rendering performance for forms/tab/html-editor.

Unfortunately, this does not address the issue with IE 6 mentioned above. I've tried setting Ext.Container.prototype.bufferResize to true and false. IE 6 clears a large part of the window for the form configured with the html editor. :( I've tried deferredRender set to true and false. When set to true, the window is cleared/flashes momentarily after clicking on the Biography tab. When set to false, the entire window clears/flashes when adding a tab dynamically.

Can this be addressed? Thanks.

Animal
10 Dec 2009, 10:07 PM
The thing is, most use cases are faster the way it is now with laying out on resize.

Your code does something unnatural, which would not be done in an app.

If dynamically adding a new Component tab, you would use



function addForm(cardIndex, tabPanel, limit) {

contentPanel.layout.setActiveItem(cardIndex);
var n = 0;

function loop() {
if (n++ < limit) {
tabPanel.setActiveTab(tabPanel.add({
id: 'new-form-' + (++newTabCount),
title: 'New Form #' + newTabCount,
iconCls: 'new-tab',
closable: true,
items: [{
xtype: 'box',
html: '<h3>New Form #' + newTabCount + '</h3>'
}, formConfigs[cardIndex]
]
}));
setTimeout(loop, 1);
}
}
loop();
}


See how that adds in one shot.

Activating a tab performs a layout of that item (CardLayout does that because it sizes the newly active tab).

And then you call another doLayout.

You would add the new Component in its tab in one shot as above.

But my new CardLayout.setActiveItem implementation is best:



Ext.override(Ext.layout.CardLayout, {
/**
* Sets the active (visible) item in the layout.
* @param {String/Number} item The string component id or numeric index of the item to activate
*/
setActiveItem : function(item){
var ai = this.activeItem,
item = this.container.getComponent(item);
if(ai != item){
if(ai){
ai.hide();
ai.fireEvent('deactivate', ai);
}
if(this.activeItem = item){
item.show();
if (item.doLayout && (this.layoutOnCardChange || !item.rendered)) {
// sizes the child item *and* lays it out
this.container.doLayout();
} else {
// sizes the child item without laying it out.
this.layout();
}
item.fireEvent('activate', item);
}
}
}
});

Animal
10 Dec 2009, 10:26 PM
There is still the problem that Containers which are within TableLayout Containers never get layed out!

This is a bad bug!

It needs



Ext.override(Ext.Container, {
canLayout: function() {
var el = this.getLayoutTarget(), p, result = false;
if (el && (el = el.dom)) {

// Displayed elements which are empty and position:absolute, or are empty and within a <td> will
// report offsetWidth and offsetHeight of zero. So temporarily give it padding to see if it acquires dimensions.
p = el.style.paddingLeft;
el.style.paddingRight = '1px';
result = !!(el.offsetWidth || el.offsetHeight);
el.style.paddingRight = p;
}
return result;
}
});

meroy
10 Dec 2009, 10:37 PM
Your code does something unnatural, which would not be done in an app.


This is a stress tool. Thank you for providing a faster method of adding tabs dynamically. That is great. Unfortunately, that doesn't solve the problem with the blanking screen under IE 6.

meroy
10 Dec 2009, 11:19 PM
Forget my test tool for the blanking screen. Just use this example:

examples/form/dynamic.html (scroll to the bottom of the page)

Comment the deferredRender line in dynamic.js (this line was added in r5758). This line isn't needed now with r5764. This should work and the entire form should not blank. The blanking occurs with IE 6. That's the problem with the HTML editor with the current build.

This sample worked with 3.0.3 and 5690. This is the edge testing that's failing with the current build. This is another way of testing. Please dev team... Can you test this under IE 6. The entire form should not go blank.

Thanks.

Animal
11 Dec 2009, 12:36 AM
If Jamie can get the current release "working" satisfactorily by reverting some changes that's fine. Get the release out.

But for 3.2, there must be a fundamental refactor. We need to start a new thread on this process.

doLayout should be a very rare call. Right now it is not. It is used as a sticking plaster in a lot of places.

It should be the way unrendered Components get rendered and layed out.

You think that's the way it works now? It does not.

A resize event will cause a full render and layout. Because ContainerLayout.onResize calls doLayout (It should not) and then ContainerLayout.onLayout calls renderAll()! V2.3's ContainerLayout.onResize just called layout (But even that was wasteful because that onLayout would also call renderAll)

This means that currently, Ext's Component hierarchies are layed out and sized many, many times. More times than that log of doLayouts tells you. That's why you see visible rendering operations cascading down the screen now.


This bit is important:

A resize should just size existing Components. It should NOT render anything! And if those Components happen to be Containers, but not rendered, that's fine, it just sets the size for when it finally gets rendered. No DOM operations happen, it just sets the size and width properties. It should get rendered at the correct size when a doLayout call occurs. But now, setting the size causes a renderAll!

It should take an explicit call to doLayout to render unrendered, added Components.

So ContainerLayout.onLayout must not call renderAll.

In addition CardLayout.setActiveItem should not call doLayout on an unrendered item. This is another cause of visible layouting. (It was mitigated somewhat by the bufferResize scheme). But that makes no difference really because the newly active item gets SIZED, and as we know, that lays out then and there during rendering which causes a glitch as that should only happen afterRender.

The afterRender of the outermost Container (Which has no ownerCt) should kick off the first doLayout.

I will work on a new layout scheme locally, and test it on my work application which has very complex layouts and was badly affected by the "layout storm" problem.

Animal
11 Dec 2009, 1:44 AM
So, here's what the layout browser looks like in my local copy when you select the border example:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/minimallayouts.jpg

Animal
11 Dec 2009, 2:43 AM
And BorderLayout unilaterally decides IT is going to render its children in its onLayout method. That should only be done by doLayout!

The local refactoring is going well.

Animal
11 Dec 2009, 4:10 AM
The restriction on BorderLayout not being able to have regions added after rendering is looking a bit arbitrary now I examine the code. That should change...

Animal
11 Dec 2009, 6:51 AM
OK, if anyone is still interested to get this in the 3.1 release, I have a really great refactoring of the layout system which works super-fast and smooth.

@meroy, your original testcase renders even quicker that with 3.0.3/ It's all much smoother.

I'm testing the other complex tests, and they are much faster and smoother even on my old, broken down, overloaded PC.

TommyMaintz
11 Dec 2009, 9:20 AM
Animal, could you send me, Jamie and Aaron your overrides or modified files so we can review and test it and hopefully put it in 3.1? Have you tried all the complex layouts, and the test case and everything still lays out properly?

Animal
11 Dec 2009, 10:45 AM
Yes, I've been going through the tests, and I've just about got everything ironed out. I will send you an update.

It actually seems faster then 2.0

meroy
11 Dec 2009, 7:32 PM
Update: This is fixed with the latest layout 2.0 code.

With IE 6, 7 and 8, I got an error 'this.dom.tagName' is null or not an object. But, I'm not able to reproduce this. Was using ext-5764-nigel at the time and occurred when I was resizing the window. Will keep an eye out for this. Changing to use ext-all-debug.js.

It occurred again. It's from ext-5764-nigel/ext-all-debug.js line 4267.



/**
* Tests various css rules/browsers to determine if this element uses a border box
* @return {Boolean}
*/
isBorderBox : function(){
return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox;
},


I'm able to reproduce this error with IE 6, 7 and 8.

Do the following:

1. Go to examples/desktop/desktop.html
2. Click on the Grid Window or Accordion Window -- either one will work.
3. Afterwards, close that window just opened
4. Now, size your window smaller from the right towards the center of the window
5. IE will have an alert icon appear in the status bar with the message like above

Maybe something is not being freed somewhere after closing the window. The desktop demo is not the only app in which I've seen this.

If you reload the page and just size the window from the right towards the center and back and forth, all is fine.
It's only when you click on one of the desktop icons and then need to close it, then size the browser window batch and forth.

meroy
11 Dec 2009, 7:47 PM
I've never seen resizing so slick and smooth -- still testing with IE 7. Folks out there, you have no idea. :) It's wizardry in the making. This is how it's suppose to be. Ext JS can actually be fast after all. The graceful Ext JS is back. Welcome back buddy. What a joy it is to witness this on this very night.

meroy
11 Dec 2009, 7:55 PM
I've summoned the best philosophers from all over the world. We assembled here in the district. This had costed thousand and thousands of dollars to come up with the best possible and meaningful way to say thanks to Nigel. Needless to say, I'm broke now. :) After hours and hours and lasting several days, this is the best they came up with and that is:

T h a n k Y o u !

meroy
11 Dec 2009, 8:50 PM
Fixed: This is no longer happening with the latest layout 2.0 code. Please test on your end before releasing 3.1 to be sure.

Need someone to verify memory consumption under IE 7. I think something is not getting cleared up over length of use.

Note: To get these numbers, use ext-all.js and not ext-all-debug.js.

r5765: After testing, 38,248 KB in use. About:blank freed 12,364 KB. This is the benchmark and the result of the work done by Jamie for the 3.1 release. Pass.

r5764-nigel: After testing, 44,612 KB in use. About:blank freed 16,480 KB. I'm not seeing it. The # of DOM elements remaining is the same.

I should include 3.0.3 here too for reference. This one has memory leaks. Look at what was freed.

r3.0.3: After testing, 45,304 KB in use. About:blank only freed 2,492 KB.

This is how I tested with sIEve using the testcase tool.

1. Clicked on 10 forms from Card One. Closed all tabs from context menu (first tab).
2. Clicked on 10 grids from Card One. Closed all tabs.
3. Clicked on 10 forms from Card Two. Closed all tabs.
4. Clicked on 10 grids from Card Two. Closed all tabs.
5. Clicked on 10 forms from Card One. Closed all tabs.
6. Clicked on 10 grids from Card One. Closed all tabs.
7. Clicked on 10 forms from Card Two. Closed all tabs.
8. Clicked on 10 grids from Card Two. Closed all tabs.
9. Clicked on 10 forms from Card One. Closed all tabs.
10. Clicked on 10 grids from Card One. Closed all tabs.

a. Clicked on 1 form from Card One. Closed tab.
b. Clicked on 1 grid from Card One. Closed tab.
c. Clicked on 1 form from Card Two. Closed tab.

d. Waited for GC to run ~ about 30 seconds.

Write down memory consumption at this point.
Clicked on about:blank. Take notice of any memory leaks.
Write down memory freed.

meroy
11 Dec 2009, 9:35 PM
IE 6 initial testing...

I remembered the day when I nearly fell off the seat when I saw IE 6 freed up all grid DOM elements after closing the tab. The same thing happened when I saw the amazing speed boost for closing 30 tabs and never getting the alert box stating -- can't remember the message now.

Well, I'm happy to report that the HtmlEditor works with IE 6 when added dynamically. Activating it no longers clears out the entire window or a large part of it as seen in post #9 up thread.

FF is flashy somewhat when rendering the form containing the HtmlEditor.

FIXED: The flashiness is much better with the latest updates to the layout 2.0 code. It's better than 5765 for comparison.

Animal
12 Dec 2009, 12:12 AM
I think that the flashing issue is caused by the HtmlEditor's iframe not being sized.

I just posted you a fix where the createIframe is passed the correctly adjusted height with which to create itself.

This also relies on the FitLayout sizing the newly active item before showing it if possible.

Also, the createToolbar in my version is better. It must create the Toolbar Component without a renderTo!

Then it adds the buttons, and THEN renders it. Because this has no ownerCt, it will render and lay itself out, and so acquire a height. And so that all-important initial height calculation can be correct.

Animal
12 Dec 2009, 8:43 AM
Apparently the flashing was caused by moving the font <select> that gets created.

I will have to think of a better way of doing it. Toolbar.addDom seem like the way to do it. Add the DomHelper representation, and then afterlayout of the Toobar, grab it to add the listeners.

meroy
12 Dec 2009, 3:29 PM
test-case-3: Adds "Last Action Duration" in the west region. This tool has a stop watch and will state the duration in seconds to complete the action item.

Animal
12 Dec 2009, 4:10 PM
What are your findings? I don't know if I can be arsed to build an older version with my enhancements reverted out.

meroy
12 Dec 2009, 4:16 PM
Have you gone through the samples? I will go through them and test and report back later on.

Animal
12 Dec 2009, 4:26 PM
Yes. All pure Ext examples work with my latest fixes built in.

Some plugins don't (like the SlidingPager grid plugin example) but I am too tired to look into that now... it can't be very difficult to fix!

meroy
12 Dec 2009, 7:15 PM
Update: This is now part of the latest layout 2.0 code

@Animal. You're missing the fix applied to widgets/Container.js in SVN 5766 by Evan for refs.



diff -rb svn.ext-5765/src/widgets/Container.js svn.ext-5766/src/widgets/Container.js
577a578,589
> // private
> onAdded : function(container, pos) {
> //overridden here so we can cascade down, not worth creating a template method.
> this.ownerCt = container;
> this.initRef();
> //initialize references for child items
> this.cascade(function(c){
> c.initRef();
> });
> this.fireEvent('added', this, container, pos);
> },
>

meroy
12 Dec 2009, 9:10 PM
Update: This is now part of the latest layout 2.0 code

And this one too applied to SVN 5764. This part of your layout code 2.0 matches exactly with SVN 5763. This is why I'm including this here.



diff -r svn.ext-5763/src/widgets/Panel.js svn.ext-5764/src/widgets/Panel.js
1235c1235
< // private
---
> // private
1243,1247c1243,1244
< var collapsed = this.collapsed;
< this.collapsed = false;
< Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last
< this.initEvents();
< if(collapsed){
---
> if(this.collapsed){
> this.collapsed = false;
1250c1247,1249
< },
---
> Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last
> this.initEvents();
> },

meroy
13 Dec 2009, 12:05 AM
Update: This is now part of the latest layout 2.0 code

Here's some initial findings:

All browsers: examples/layout-browser/layout-browser.html

1. Basic Ext Layouts --> Absolute
Missing bottom border in center region

2. Basic Ext Layouts --> Accordion
Missing bottom border in center region

3. Ok, several of these are missing the bottom border

4. Also check both Combination Examples (these do not look right -- center region -- look at the bottom)
Absolute Layout Form
Tabs with Nested Layouts

To address these issues, revert one change from yesterday -- and these work. This diff puts it back.



diff -r svn.ext-5769-nigel-2/src/widgets/layout/CardLayout.js svn.ext-5769-nigel-2b/src/widgets/layout/CardLayout.js
111,112d110
< // sizes the child item without a deep layout. Ensure it shows at its layout-defined height
< this.layout();
116,117d113
< // sizes the child item without a deep layout.
< this.layout();
118a115,116
> // sizes the child item without a deep layout.
> this.layout();


Basically, put it back to this:



if (item.rendered) {
item.show();
} else {
this.renderItem(item, this.container.items.indexOf(item), this.container.getLayoutTarget());
}
// sizes the child item without a deep layout.
this.layout();

meroy
13 Dec 2009, 1:03 AM
BUG

Layout 2.0 with IE 6/7/8. Examples/statusbar/statusbar-demo.html

The Ext Word Processor demo (scroll all the way down) is failing.
The text-area box is not the proper height. Clicking inside restores the height.

meroy
13 Dec 2009, 5:36 PM
BUG

Layout 2.0 with IE 6/7/8, FF, Safari. Examples/layout-browser/layout-browser.html.
The form is not displayed for Combination Examples --> Absolute Layout Form

meroy
13 Dec 2009, 5:44 PM
BUG

Layout 2.0 with IE 6/7. Examples/form/form-grid.html.
The grid is not displayed under Company Data.

meroy
13 Dec 2009, 5:52 PM
BUG

Layout 2.0 with IE 6/7/8, FF, Safari. Examples/toolbar/overflow.html.
The overflow menu doesn't work.

meroy
13 Dec 2009, 6:11 PM
BUG

Layout 2.0 with IE 6/7/8. Examples/desktop/desktop.html.
Scrollbar seen in taskbar.

First resize the width of the browser window from right to left -- back and forth. All looks well with the task bar. Restore the width of the browser window.

Now, follow these steps to see the scrollbar appear in the taskbar.
1. Click on the Grid Window's desktop icon.
2. Close the Grid Window.
3. Now, resize the width of the window from right to left -- going 1/4th the width and go back.
4. Notice the scrollbar in the taskbar.

meroy
13 Dec 2009, 7:05 PM
The bug findings for @Animal's new layout 2.0 code begins on page 8 up thread.
http://www.extjs.com/forum/showthread.php?t=87263&page=8

@Animal's new layout logic looks very promising.

Best Regards,
Mario