View Full Version : [CLOSED][3.1pre] Examples - bug compilation for 3.1 release

4 Dec 2009, 8:43 PM

It requires installation of shockwave flashplayer. Not only that, I had to first create the following directory. Otherwise, the flashplayer installation failed even though I do not have Opera installed. The charting examples are working with FF and Safari under the Windows environment.

C:\Program Files\Opera\Program\Plugins

Note: Just installed FF and Safari under my VM Windows XP. The charting examples are not working for me. The shockwave isn't runnning. Even after installing the Shockwave_Installer_Slim.exe and restarting the browser. This is release


Ok under IE 6.

Fails with FF3.5 and Safari4 under Windows.

Edit: All charting examples are failing under FF and Safari


Definitely can't reproduce this, using the latest SVN build. Works fine for me in all browsers.
The charting examples are failing under IE 7 running in a virtual machine via Parallels on Leopard. Even if I point the browser to http://www.extjs.com/deploy/dev/examples/chart/charts.html. FF and Safari under Leopard works though.

Got it. It requires Adobe Flash Player 10 for it to work. However, this is not activating the expressinstall.swf automatically. Should this happen if not Flash Player 10?

4 Dec 2009, 8:56 PM
Update: This is also seen with Ext JS 3.0.3.

I can still reproduce this ::: Under Safari, take the scroll button in the scroll bar and try moving down and up. It will pause and it's not smooth. This is seen with Safari on Windows XP and Windows 7. Addressing the pause issue with Safari may address this or point you into the right direction.


Broken under IE 6/7/8. Look at the image. Scroll down and up. Play with this one.

Also, under Safari, try scrolling. Click and hold the mouse while scrolling. There's a big delay -- it's not fluid like under FF.

Unfortunately, FF is not without problems either. Do the following:
1. Load this example.
2. Scroll all the way down -- should be at 500
3. Now reload the page -- notice how the scroll position is still at the bottom and not back at the top although the grid begins at row 1.

Edit: Fine with FF and Safari under Leopard -- above was down under Windows (IE6/FF/Safari). Same issue with IE7 -- to reproduce -- it may be that I released the mouse too soon. If I hold the mouse button down long enough, it has a better chance. The IE issue is hard to reproduce -- try a few times.

4 Dec 2009, 9:11 PM
Note: The PHP Notice is only done once and on initial load. This is not critical. At the very least, fix the paths in the css file.


Apache's error_log states:

PHP Notice: Trying to get property of non-object in examples/restful/remote/lib/request.php on line 47

This is line 47 in red:

if (isset($_REQUEST['data'])) {
$this->params = json_decode(stripslashes($_REQUEST['data']));
} else {
$raw = '';
$httpContent = fopen('php://input', 'r');
while ($kb = fread($httpContent, 1024)) {
$raw .= $kb;
$params = json_decode(stripslashes($raw));
$this->params = $params->data;

Apache also errors on image file(s) not found. Here is the diff to address that.

diff restful.css.old restful.css
< background: transparent url(images/row-editor-bg.gif) repeat-x 0 0;
> background: transparent url(../ux/images/row-editor-bg.gif) repeat-x 0 0;
< background: transparent url(images/row-editor-bg.gif) repeat-x 0 -2px;
> background: transparent url(../ux/images/row-editor-bg.gif) repeat-x 0 -2px;
< background: transparent url(images/row-editor-btns.gif) no-repeat 0 0;
> background: transparent url(../ux/images/row-editor-btns.gif) no-repeat 0 0;
< background: transparent url(images/row-editor-btns.gif) no-repeat right -31px;
> background: transparent url(../ux/images/row-editor-btns.gif) no-repeat right -31px;
< background: transparent url(images/row-editor-btns.gif) repeat-x 0 -62px;
> background: transparent url(../ux/images/row-editor-btns.gif) repeat-x 0 -62px;

4 Dec 2009, 9:22 PM

Update: This is working with Safari under Windows and Leopard -- tested with SVN 5743.

examples/tabs/tab-scroller-menu.html (and)

Fails with Safari.

Providing 2 images for comparison -- look at the image name.

The advance tabs example was reported here: http://www.extjs.com/forum/showthread.php?t=86976

4 Dec 2009, 9:37 PM
This will not be addressed in 3.1

New finding: Look at the 3rd image. This is with SVN 5743. Look at the spacing between the menu and the content. Clicking inside the grouped menu area moves the menu in place. The black border persist under IE6.


IE 6 has black border.

Test with IE 6 as IE 7 is fine.

4 Dec 2009, 9:56 PM

Note: This is working now with SVN release 5728


Click on the one for Multi-line Prompt

Fails under Safari -- height issue

Providing 2 images (image name will specify good/fails)

Edit: Safari under Leopard is fine. But not under Windows.

4 Dec 2009, 10:06 PM

Update: I'm not expericing this anymore. Very interesting. I've addressed post #1 by installing the flash player plugin. Wondering if this had something to do with it. Safari's loading indicator stops -- finally !!!

Note: I've even seen this problem with Ext JS 3.0.x until now after installing the flash player plugin. This is strange.

Finding 1: It looks like I may be the only one experiencing this on my work laptop. I'm not worried about it as the apps I'm writing in house works fine under Safari -- the loading indicator stops. --meroy

Finding 2: I'm even experiencing this with my personal laptop running Windows XP via Parallels Destop 4.x and Safari.

Finding 3: I'm also seeing this on another computer running Safari under Windows 7. I tried reloading the page. It's 3 tries and finally it stops -- sometimes more. Reloading doesn't always work though. At this point, I consider this a bug somewhere. I'm seeing this on 3 computers -- the example is served by Apache remotely.

Edit: I have to reset Safari. I was seeing the same thing with examples/portal/portal.html. I decided to simply reset Safari and it addressed it -- at least for portal.html. But unfortunately, the resetting is not enough for those mentioned below.


More examples in which the loading indicator never stops under Safari.

I'm actually going to a remote server running Apache. I rename the server to localhost before copying/posting the image.

Edit: I'm not posting anymore images here. Unfortunately, there are more examples and will just list them here:


I think that's all I will list for this one as it may be coming from the same logic somewhere -- the loading indicator doesn't stop under Safari. Testing under Windows.

Edit: Safari is fine under Leopard. Interesting though. Wondering if it's because I'm running Apache locally. For the tests above, I was going to a remote server and also running under Windows XP. The images below all show localhost -- that's because I changed it before copying/posting them here.

4 Dec 2009, 10:21 PM
Note: This post has 2 errors. Fixing the path for the include will cause an error inside code-display.js -- you can see it in FF.


Apache reports in error_log.

File does not exist: examples/code-display.js

In column-tree.html, change this:

<script type="text/javascript" src="../code-display.js"></script>


<script type="text/javascript" src="../shared/code-display.js"></script>

Doing that now causes the example to fail.

4 Dec 2009, 10:40 PM


The bottom border is missing --> Accordion --> Custom Panel Look and Feel

Missing under both FF35 and Safari4. The border is there under IE6.

Edit: The border is there in IE7 also. Also missing when running FF35/Safari4 under Leopard.

4 Dec 2009, 11:11 PM

Note: These 2 examples now behave correctly under IE with latest SVN release 5719.


With IE6, I have to resize the window for the buttons to appear.

The images can be found here.


Edit: Look here (same thread) where Animal graciously provides his time and overrides. It works and is documented.


4 Dec 2009, 11:32 PM

Update: This is working with SVN 5743.


Fails with Safari under both Leopard and Windows. Providing 2 images (name of images specifies failed/good).

5 Dec 2009, 12:03 AM

Note: This example is now working consistently across all browsers with SVN 5734.


Just post #1 from this thread that's left.

5 Dec 2009, 12:18 AM
Finding 1: SVN 5736 addresses this for Safari under Windows. This behavior persists with Safari under Leopard.

Finding 2: This problem is also seen with IE8. The height changes when clicking inside the text area box.


Seen with Safari under both Leopard and Windows.

The height of the Ext Word Processor got smaller on click inside the text area under Safari. The height does not change under FF or IE 6.

Providing 2 images -- look at name for description.

5 Dec 2009, 12:26 AM
Ignore -- this is not a bug -- meroy


This is more cosmetic for IE 6. You can see the gray box around the green icon.

The red icon (rounded) appears ok though.

5 Dec 2009, 12:40 AM

examples/dd/dnd_grid_to_formpanel.html (really bad the more you use it)

This example doesn't work right under IE6/7/8, FF and Safari. Just check it out.

1. When click/drag/drop -- drop requires another click under FF and Safari

2. With IE, it behaves wierd -- try multiple times -- notice how the selected/highlighted row is not the one under the mouse pointer. Dropping acts wierd as well. May require multiple mouse clicks for the icon to go away.

Edit: IE 6 errors: 'data' is null or not an object. This may be hard to reproduce -- just try select/drag/drop multiple times.

Edit: Also check this example too: examples/dd/dnd_grid_to_formpanel.html. Same behavior. Try multiple times dragging and dropping -- gets worst over usage.

5 Dec 2009, 12:49 AM
Note: This post contains 2 issues with this sample. One being the include and the other only specific to IE6.


The first record will not highlight when moving the mouse over it under IE 6. The mouse is over record 2 in the image below.

Also, Apache outputs an error stating the following:

File does not exist: examples/code-display.js

Change to:


Here's the image. Please test highlighting issue under IE 6 as it works under IE 7.

5 Dec 2009, 12:59 AM


Update includes to point to:


Apache shows 2 different errors for this one in error_log

File does not exist: examples/code-display.js
File does not exist: examples/dd/grid-examples.css

5 Dec 2009, 1:04 AM

A pop-up window stating the following:

This web site needs a different Google Maps API key. A new key can be
generated at http://code.google.com/apis/maps/.

5 Dec 2009, 1:13 AM
I'm going to reply inline otherwise it's just going to be a mess! More to come ;)

5 Dec 2009, 5:45 AM
Have you tried applying my latest fixes?

Ext.override(Ext.Container, {
shouldBufferLayout: function(){
// A layout should be buffered if we are set to buffer resizes, and
// there is an owning Container, but no ancestor Container has a layout pending.
return this.bufferResize && this.ownerCt && !this.hasLayoutPending();

afterRender: function(){
this.layout = 'auto';
if(Ext.isObject(this.layout) && !this.layout.layout){
this.layoutConfig = this.layout;
this.layout = this.layoutConfig.type;
this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);

// BoxComponent's afterRender will set any configured (or "auto") box size.
// This will will trigger a layout if the layout is configured to monitor resize

var item = this.activeItem;
delete this.activeItem;

// If the BoxComponent's sizing did not trigger a layout
// and we have no ownerCt, force a layout.
if(!this.ownerCt && !this.layout.monitorResize){
this.doLayout(false, true);

if(this.monitorResize === true){
Ext.EventManager.onWindowResize(this.doLayout, this, [false]);

Ext.override(Ext.Viewport, {
bufferResize: false // Window resizes are buffered anyway.

Ext.override(Ext.layout.ContainerLayout, {
onResize: function(){
var ct = this.container,


// *Container* determines whether it needs to buffer a layout or whether it should take place immediately
this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
this.resizeBuffer = Ext.isNumber(b) ? b : 50;
ct.layoutPending = true;

Ext.override(Ext.Element, {
getViewSize : function(){
var me = this,
doc = document,
d = this.dom,
extdom = Ext.lib.Dom,
isDoc = (d == doc || d == doc.body);
return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth || (d.offsetWidth - (me.isBorderBox() ? me.getFrameWidth('lr') : 0))),
height : (isDoc ? extdom.getViewHeight() : d.clientHeight || (d.offsetHeight - (me.isBorderBox() ? me.getFrameWidth('tb') : 0))) };

6 Dec 2009, 9:55 AM
Kind bump -- dev team -- remember to go through this thread from the top -- some remaining issues. Buffer grid and many dd examples and also adv tabs scroller under Safari.

I will test again and update in Blue if passing. Will use release 5728 with a patch set proposed by Animal. It may address some of these. Will report back later on today. Need to head out.

6 Dec 2009, 8:20 PM


Treegrid configuration for the samples page is missing. Remember to create/add image for this too.

6 Dec 2009, 8:50 PM


IE8 under Windows 7

Maximize the window, then restore the size, repeat a couple of times.

Notice the following:

1. Below the toolbar, a 2px (not sure 1 or 2) blue background is seen here. Toolbar should be flushed with the buttom. You may need to magnify this image to see it.

2. Notice, the more you maximize and restore, how the height of the toolbar increases

3. And most obvious is the scrollbar inside the toolbar.

6 Dec 2009, 9:08 PM
Note: This may be a graphics driver issue under Windows 7. But I'm not sure -- this is your call.

Can't reproduce this, running winxp.


IE8 under Windows 7

Dotted line is seen in tree area. Click outside the tree box area. The dotted line goes away. Click inside the tree area and the dotted line is back.

6 Dec 2009, 9:25 PM


IE8 under Windows 7
Also same issue under Safari
Not tested on other browsers (most likely the same issue)
I didn't see the sizing handle previously when testing above.

Resize the bottom border downwards or upwards.
Notice how the width of the bottom toolbar shrinks and no longer flush.

6 Dec 2009, 11:05 PM


FF 3.5.x under Leopard just needs a warm cup of soup of some sort. FF 3.5.x under Windows is fine. There's a thread on this -- putting it here so it's not forgotten.

7 Dec 2009, 2:01 PM
Update on post #15. The dd samples are working now -- tested with SVN 5748.


7 Dec 2009, 6:16 PM
Are any of these issues still outstanding?

7 Dec 2009, 6:34 PM
Are any of these issues still outstanding?

Yes -- those not marked as fixed. A couple with the examples are easy to fix (include paths). The others may need more work.

7 Dec 2009, 7:13 PM
This thread is up to date with SVN release 5748. Just begin with the first page and look for posts not marked as FIXED.

7 Dec 2009, 7:56 PM
This threads contains 23 posts detailing issues. Of these, 15 are marked as FIXED/Ignore. Of the 8 remaining, 5 are more or less issues with the Examples and not so much Ext JS.

Edit: This post updated on December 9, 2009 at 12:15 AM EST

Jamie Avins
7 Dec 2009, 8:04 PM
What remains is non-blocking. Many are already known and set for after 3.1.

7 Dec 2009, 8:12 PM
The 4 critical of the 13 remaining as not fixed in this thread are:

Post 2: http://www.extjs.com/forum/showthread.php?p=415652#post415652

Post 5: http://www.extjs.com/forum/showthread.php?p=415656#post415656

Post 23: http://www.extjs.com/forum/showthread.php?p=415955#post415955 (FIXED)

Post 25: http://www.extjs.com/forum/showthread.php?p=415959#post415959 (FIXED)

Of these 4, post 25 and post 2 are the most critical as it may be break apps out there if not addressed.

This is your call. You guys know best.

Jamie Avins
7 Dec 2009, 8:17 PM
The 4 critical of the 13 remaining as not fixed in this thread are:

Post 2: http://www.extjs.com/forum/showthread.php?p=415652#post415652

Post 5: http://www.extjs.com/forum/showthread.php?p=415656#post415656

Post 23: http://www.extjs.com/forum/showthread.php?p=415955#post415955

Post 25: http://www.extjs.com/forum/showthread.php?p=415959#post415959

Of these 4, post 25 and post 2 are the most critical as it may be break apps out there if not addressed.

This is your call. You guys know best.

5 and 23 aren't going to make it. #2 we're looking at and 25 I cannot duplicate but Evan could. Lets split those 2 back out and we'll go from there.

7 Dec 2009, 10:35 PM
25 should be relatively easy to fix. I'll take a look at it in a couple of hours. Panel.onResize sets the width of its toolbars.

Could be something to do with the frame: true?

8 Dec 2009, 1:44 AM
Fix for 25:

Ext.override(Ext.Panel, {
onResize : function(w, h){
if(Ext.isDefined(w) || Ext.isDefined(h)){
// First, set the the Panel's body width.
// If we have auto-widthed it, get the resulting full offset width so we can size the Toolbars to match
// The Toolbars must not buffer this resize operation because we need to know their heights.

this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth()));
} else if (w == 'auto') {
w = this.body.setWidth('auto').dom.offsetWidth;
} else {
w = this.body.dom.offsetWidth;


// The bbar does not move on resize without this.
if (Ext.isIE) {
this.bbar.setStyle('position', 'static');
this.bbar.setStyle('position', '');
this.fbar.setSize(Ext.isIE ? (w - this.footer.getFrameWidth('lr')) : 'auto');

// At this point, the Toolbars must be layed out for getFrameHeight to find a result.
h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight()));
}else if(h == 'auto'){

if(this.disabled && this.el._mask){
this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight());
this.queuedBodySize = {width: w, height: h};
if(!this.queuedExpand && this.allowQueuedExpand !== false){
this.queuedExpand = true;
this.on('expand', function(){
delete this.queuedExpand;
this.onResize(this.queuedBodySize.width, this.queuedBodySize.height);
}, this, {single:true});
this.onBodyResize(w, h);

8 Dec 2009, 11:31 AM
#23 is an IE bug.

The TaskBar is a border layout (Does it need to be now?). It calls getViewSize to ascertain the size it has available to lay out in.

This (which we have been fixing recently) uses clientHeight/clientWidth if available.

Even though the CSS tyle has a height of 30px, the clientHeight is reporting 31:


So it lays out both items at the size it thinks is available. Which stretches the Taskbar container. Next time the same "stretch" happens again...

8 Dec 2009, 11:49 AM
A more sophisticated getStyleSize fixes it:

Ext.override(Ext.Element, {
getViewSize : function(){
var doc = document,
me = this,
d = me.dom,
extdom = Ext.lib.Dom,
isDoc = (d == doc || d == doc.body),
isBB, w, h, tbBorder = 0, lrBorder = 0;
if (isDoc) {
return { width: extdom.getViewWidth(), height: extdom.getViewHeight() };
isBB = me.isBorderBox();
tbBorder = me.getBorderWidth('tb');
lrBorder = me.getBorderWidth('lr');

// Try the style first, then clientWidth, then offsetWidth
if (w = me.getStyle('width').match(/(\d+)px/)) {
if ((w = parseInt(w[1], 10)) && isBB) w -= lrBorder;
} else if (!(w = d.clientWidth)) {
if ((w = d.offsetWidth) && !isBB) w -= lrBorder;
// Account for left+right padding
if (w) w -= me.getPadding('lr');

// Try the style first, then clientHeight, then offsetHeight
if (h = me.getStyle('height').match(/(\d+)px/)) {
if ((h = parseInt(h[1], 10)) && isBB) w -= tbBorder;
} else if (!(h = d.clientHeight)) {
if ((h = d.offsetHeight) && !isBB) h -= tbBorder;
// Account for top+bottom padding
if (h) h -= me.getPadding('tb');
return {
width : w,
height : h

Also, the style for #ux-taskbar needs to include

position: absolute;
bottom: 0;
width: 100%;

That anchors it at the bottom quicker and smoother than relying on the resizing of the #x-desktop element above it to "push" it down.

8 Dec 2009, 9:18 PM
Also, the style for #ux-taskbar needs to include

position: absolute;
bottom: 0;
width: 100%;

That anchors it at the bottom quicker and smoother than relying on the resizing of the #x-desktop element above it to "push" it down.

Kind bump...

Animal's suggestion above is helpful for examples/desktop/desktop.html