Google Chrome Issues

[evant]

In keeping up with the upcoming browsers, we'd like to know any issues which you may encounter with the Google Chome Betas and RC's. This thread is for any of those issues.

Please do NOT report these as bugs in the Bugs forum. Because Google Chrome is currently in beta it is not supported at this time.

Thanks,

[rob.agar]

1. in keypress event Ctrl-Enter EventObject.getKey() returns wrong keycode 10 instead of 13

2. arrow keys do not raise the keypress event

[j22karu]

Scrolling with mousewheel in grid causes text to disappear. Exactly the same issue as with Safari. Chrome uses the same renderer.

[smit_al]

In a form layout embedded in a table layout the icons for combo boxes, date fields, etc.... are aligning to the left of the text field.

[Condor]

Please include a link to the bugreport if you made one.

Ctrl-Enter key code (http://extjs.com/forum/showthread.php?t=46144)
Mouse wheel grid scrolling (http://extjs.com/forum/showthread.php?t=44623) (includes possible fix)
Combobox height & trigger position (http://extjs.com/forum/showthread.php?t=45997) (includes possible fix)

[radustefan]

Sorry if it's offtopic but I think I found a performance bug in Chrome.

Working in my Extjs project, after a while, Google Chrome accessed my HDD nonstop writing something continuously in C:\Documents and Settings\Administrator\Local Settings\Application Data\Google\Chrome\User Data\Safe Browse.

Deactivate this option (http://www.google.com/support/chrome/bin/answer.py?answer=99020&hl=en&ctx=rosetta) if you have the same problem.

[akannu]

This may be unique to us. The grid seems to have an extra row of column header at the top. This extra row runs across the entire grid and is not exactly duplicating column headers.

[rarerules]

Ext objects show behind flash objects, even when Ext.useShims = true.

[corndog]

Grid columns do not line up, plus extra column (as akannu reported)

[HCammus]

autoLoad TabPanel config is possible doesn't work coz I try one example and the Chrome don't show the contest.

[crpatrick]

I think Chrome may have the same stack issues which I have seen with Safari. Our application is a tabbed application, with a border layout within the tabs, and grids in the border layout region. No issues on Firefox/IE/Opera, but Safari would never render the grid since the stack was full (though the latest incarnation of Safari renders a few additional components). In any case, not sure if it is the same issue, but have seen an identical behavior with Chrome.

[evant]

Chrome uses WebKit (the Safari rendering engine).

[EzBulka]

Not necessarily an Ext issue or even a bug for that matter, but the plain JavaScript Date.toLocaleString function gives different results in Chrome than in IE or Firefox, giving the entire verbose Date/Time string. Stick to Date.format() if you can

[JoomlaMan]

Google stamps the word 'BETA' on all of its applications that it releases to the public. For example, Gmail was released on April 1, 2004, and has had the word beta stamped on it for over 4 years now. Gmail is still in BETA status as of this post. [Look at their icon on the upper left].

Should we have to wait 4 + years before EXT JS will support Chrome?

[evant]

Not necessarily, however I think it's poor form by google to leve products in perpetual beta.

That being said, a majority of issues should be fixed as part of any Safari fixes.

[nctag]

Also take a look at this demo: http://luzern.nct.ch/ext/example3.html.
This example offers 3 different versions in IE, FF and Safari (Chrome). It's also a Chrome bug, I belive...

PS: If any user has a solution for this behavior don't be afraid of write me a pm.

[ThorstenSuckow]

Not necessarily, however I think it's poor form by google to leve products in perpetual beta.


That's how Web2.0 defines itself ;)

However, I don't think chrome will be left for too long in beta status This piece of software is too important for google... and if it's still beta internal for a long time, I guess they wouldn't let us know! Cheers!

[chalu]

Just downloaded google chrome to test some of my projects, take a look

[Condor]

Just downloaded google chrome to test some of my projects, take a look

The first page of this thread already contains a link to a fix (http://extjs.com/forum/showthread.php?t=45997) for this.

[nvarga]

I have extended the htmlEditor class to be masked when disabled. When calling
Ext.MessageBox.show(...), mask of the htmlEditor stays on top and not hidden
with MsgBox.


Ext.my.HtmlEditor = Ext.extend(Ext.form.HtmlEditor, {
...
onDisable: function(){
if(this.rendered){
var roMask = this.wrap.mask();
roMask.dom.style.filter = "alpha(opacity=100);"; //IE
roMask.dom.style.opacity = "1"; //Mozilla
roMask.dom.style.background = "#EEEEEE";
}
...
});

[Bruno.SantAnna]

Chrome uses WebKit (the Safari rendering engine).

wrong, chrome uses v8, which was based on webkit but we dont know if it behaves exacly like webkit.
anyway we must assume that it uses a different javascript processing engine...

[Bruno.SantAnna]

I think this is not an issue of ExtJS but i'll post it here, maybe someone have the same problem.
on file upload (using extjs 2.2 file upload field) chrome does not send content-type post header.
both firefox and ie file upload works.
i'm using struts2 framework and for file uploads im using fileuploadinterceptor... the last one cannot instantiate a file object since upload content type is null...

I have also created a issue at google groups (chrome troubleshooting) regarding this problem:

http://groups.google.com/group/google-chrome-help-troubleshooting/browse_thread/thread/2b33dd1b4a4729dc

[tuan]

ItemSelector -- the right side border of the To box is cut off a bit.
http://extjs.com/deploy/dev/examples/multiselect/multiselect-demo.html

The toolbarfiller ('->') doesn't seem to work.

[davemarkle]

I've got a DIV that contains a flash app. The div is position absolute. When a link is clicked, the DIV fades in and gets a Spotlight, much like a custom little lightbox.

In IE7, IE6, FF and Safari, this all works great. In Chrome, when the fade in begins, the flash app moves off the spot where it should be until the fade finishes and then the flash app sort of snaps back into the correct place.

I don't have much by way of explanation for this. I've played and played with it. I've got nothing.

[derrickburns]

The following produces

Uncaught Error: INVALID_NODE_TYPE_ERR: DOM Range Exception 2
in Google Chrome, but works in Firefox and IE 7:



var markerClass = "y";
var dh = Ext.DomHelper;
var el = document.createElement( "span" );
dh.append( el, { tag: 'span', cls: markerClass + 'Size' }, true );
dh.append( el, { tag: 'div', cls: markerClass }, true );


Any ideas?

[ritesh.kapse]

I have extended the htmlEditor class to be masked when disabled. When calling
Ext.MessageBox.show(...), mask of the htmlEditor stays on top and not hidden
with MsgBox.


Ext.my.HtmlEditor = Ext.extend(Ext.form.HtmlEditor, {
...
onDisable: function(){
if(this.rendered){
var roMask = this.wrap.mask();
roMask.dom.style.filter = "alpha(opacity=100);"; //IE
roMask.dom.style.opacity = "1"; //Mozilla
roMask.dom.style.background = "#EEEEEE";
}
...
});


any solution to this ?

[bernard]

Any ETA for Google Chrome support? (now that it is no longer a beta product)

I could use "Ext.isChrome" today to workaround quirks.

Anybody could share how "Ext.isChrome" could be implemented in the interim?

thanks!

[joao_candido]

I

[nctag]

Any ETA for Google Chrome support? (now that it is no longer a beta product)

I could use "Ext.isChrome" today to workaround quirks.

Anybody could share how "Ext.isChrome" could be implemented in the interim?

thanks!

Off course, since it has been released it would be nice to have chrome supported too. Over all because it's simply the fastest available browser. Any comments from the developer team?:-/

[smudgeface]

I have been having difficulty with the rowdoubleclick event in a grid panel. It seems that Chrome is trying to select the raw TD that makes up the cell that the doubleclick occurs on. Eventually the rowdoubleclick event fires and the handler is called, but there is (in my case) a large delay between when I actually double-click and when the event handler executes.

EDIT: It's more complicated than just a delay with rowdblclick...My gridpanel is in a tab panel. When you doubleclick on a row, it creates a new gridpanel, adds it to the tabpanel, and then sets the new grid as the activeTab. When I double click, the grid gets created and inserted instantly, but there is a large delay when setting the new tab as the active tab.

The wierd part is that I also use key handler so that users can select a row and press enter (same effect as a double click) but there is no delay when this happens. The large delay only occurs on rowdblclick...

EDIT2: I've narrowed down the problem to line 19152 of ext-all-debug.js
this.layout.setActiveItem(item);
Which calls the following in CardLayout.setActiveItem, on line 14462
this.layout();


EDIT3: SOLVED in
http://extjs.com/forum/showthread.php?p=293926#post293926

[nctag]

Again the question wheter support for google chrome is sheduled?

[evant]

Are there really any major shopstopper issues for Chrome? Using the latest SVN build I've gone through most of the examples and haven't really found any issues.

[Condor]

I just rechecked the ComboBox issues in standards compliant mode with the latest SVN:
- ComboBox in a tbar still looks bad in Safari 3.2/Win (but why not in Chrome?).
- ComboBox in a table layout still off by 1 px on FF3 and Chrome (caused by different vertical-align of field vs. trigger).

[nctag]

Are there really any major shopstopper issues for Chrome? Using the latest SVN build I've gone through most of the examples and haven't really found any issues.
Haven't tested it again. But we could not use it in productive way as long as you don't support it officially. Hope that you can understand that. We have time to wait but an information wheter it's sheduled or not would be very fine.

[JoomlaMan]

An entire grid disappearing when you use the mouse wheel to scroll in Chrome or Safari isn't considered showstopping?

[tryanDLS]

An entire grid disappearing when you use the mouse wheel to scroll in Chrome or Safari isn't considered showstopping?
Please create a thread in BUGs with appropriate details/sample code to duplicate the problem.

[Condor]

No, please don't post this as a bug. It has already been reported and fixed (http://www.extjs.com/forum/showthread.php?p=214273#post214273).

[Guteman]

Noticed the following issue with the ComboBox in Google Chrome. Using Ext 2.2.I also have my exact version part of the image.

http://extjs.com/forum/attachment.php?attachmentid=11742&stc=1&d=1233590082

Paul

[mystix]

with the latest Ext 2.2 code from SVN, tabbing from within an active cell editor in an editorgrid fails in Chrome 1.0.154.46 (also fails on the version of Chrome just prior to this one).

the online example (which uses the official 2.2 download) works though:
http://extjs.com/deploy/dev/examples/grid/edit-grid.html

[aconran]

Mystix - The link you provided is for 2.2.1 and is working for me. Does the latest build from SVN fail for you?

[mystix]

Mystix - The link you provided is for 2.2.1 and is working for me. Does the latest build from SVN fail for you?

very odd... i just tried it again using the official 2.2.1 download, the version from SVN, and the link i posted (which was pointing to the 2.2 examples just yesterday, but refers to the 2.2.1 examples as of this moment), and it still doesn't work on Chrome 1.0.154.46 -- clicking on a cell commences an edit as per normal, and attempting to tab out of the same cell to the next cell fails to activate the next cell.


[update]
just updated to Chrome 1.0.154.48 and i'm still seeing the same issues. the editorgrid example in the official 2.2 download works.
Which version of Chrome did you test on?

[jay@moduscreate.com]

Should this be de-stickied? Being that google chrome is now officially supported, should all bugs now be posted in the bugs forum?

[nctag]

Its officially supported when it's listed here: http://www.extjs.com/products/extjs/ and: it's not.

[jay@moduscreate.com]

Its officially supported when it's listed here: http://www.extjs.com/products/extjs/ and: it's not.

http://extjs.com/deploy/dev/CHANGES.html

[nctag]

All right, thx.

Will it be a official release on the webpage or do I have to build it from SVN by my own?

[jay@moduscreate.com]

All right, thx.

Will it be a official release on the webpage or do I have to build it from SVN by my own?

have you tried to download 2.2.1 ? Maybe they just got too busy to update the site.

[nctag]

Where is the link? When I browse through the http://code.extjs.com/svn/ext/ directories, I cannot find a version 2.2.1. Thx for support.

[jay@moduscreate.com]

Where is the link? When I browse through the http://code.extjs.com/svn/ext/ directories, I cannot find a version 2.2.1. Thx for support.

http://extjs.com/products/extjs/download.php
http://www.reload.ws/blog/bushbaby.jpg

[nctag]

Sometimes you can't see the forest behind the trees. Thank you for your help. Thought it would be only in SVN and I can't find it because I didn't see an annoucement in the forums or blog...

[jay@moduscreate.com]

I do believe condor posted a request for an official SVN tag

[smudgeface]

As a follow up to my previous post regarding issues with Grids in chrome...
http://extjs.com/forum/showthread.php?p=274795#post274795

I have solved one issue in my case. Chrome does not accept the attribute unselectable="on" as a way to prevent test selection. Nor does it understand -moz-user-select:none; as a css attribute. It does, however, recognize the 'onselectstart' event. I modified the template of my grid view using an undocumented 'templates' property of Ext.grid.GridView as below:



this.view = new Ext.grid.GridView({
templates: {
cell: new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" onselectstart="return false" {attr}>{value}</div>',
"</td>"
)
}
});

Also, not sure if it has been mentioned yet, but the up/down arrows do not move the selection anymore. Chrome defaults to scrolling the gridview instead...

[evanc]

In the HTML editor, "undo" doesn't work.

You can see the issue on Form 3 here: http://extjs.com/deploy/dev/examples/form/dynamic.html

Type some words, and press ctrl+z. (cmd+z on mac) Nothing happens.

To see how it should work go here:

http://tinymce.moxiecode.com/examples/full.php

Type some text and press ctrl+z (cmd+z on mac), it will go undo the last typing.

If you right click "undo" is also unavailable.

[Animal]

Chrome has a weird thing where it miscalculates the computed margin of a sized element when within another element.

It returns the right margin value as the space between the right edge and the right edge of its container.

This is incorrect, and yields problems.

In the example below, I have applied a bugfix override to AnchorLayout to make it take into account the margins round any child items.

This is a badly needed bugfix in sizing layouts. The size available must take the margis of chidl items into account.

Anyway, this brings out the bug in Chrome.

Drop te example below into examples/* and run it in FF.

It works just fine. Clicking on the button reports correctly that that Container with the 1px blue border round it has no margins.

No margins are ever set for that element. Resize the width of the browser to a narrow width.

Then size it back up.

All components stay anchored as required. Clicking the button again reports that the margins are zero.

Now try the same steps in Chrome.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Anchor bug</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<style type="text/css">

.foo {
padding:10px;
border:1px solid #BADBFA;
}

</style>
<script type="text/javascript">

Ext.override(Ext.layout.AnchorLayout, {

// private
adjustWidthAnchor : function(value, comp){
return value - comp.el.getMargins('lr');
},

// private
adjustHeightAnchor : function(value, comp){
return value - comp.el.getMargins('tb');
}
});

Ext.onReady(function(){

new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'toolbar',
items: {
text: 'Show margins',
handler: function() {
var m = Ext.get('test-anchor').getMargins('lr');
Ext.get('content').update("left+right margin of blue bordered container: " + m);
}
},
height: 25,
region: 'north'
}, {
region: 'center',
xtype: 'container',
layout: 'anchor',
autoEl: {},
style: {
padding: '5px'
},
items: {
xtype: 'container',
id: 'test-anchor',
autoEl: {},
cls: 'foo',
anchor: '100%',
layout: 'anchor',
items: {
xtype: 'box',
autoEl: {},
id: 'content',
style: {
'background-color': 'red',
'margin': '5px'
},
height: 200,
anchor: '-20'
}
}
}]
});
});
</script>
</head>
<body>
</body>
</html>


A very simple illustration of the underlying Chrome bug is here:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Margin bug</title>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var inner = Ext.get("inner");
var m = inner.getMargins('lr');
inner.update('My left+right margins are ' + m);
});
</script>
</head>
<body>
</body>
<div id="outer" style="height:300px;width:500px;border:1px solid black">
<div id="inner" style="height:200px;width:200px;background-color:red">
</div>
</div>
</html>

[Animal]

BTW, that's in Safari too, so it's the Webkit engine.

[deanna]

Didn't see this mentioned before. If you are playing with any of the css rules. When you get a rule that has a background image url, the url is translated to full path name, not the relative path from the css document. Will play havoc if you have any logic using those paths.

[mystix]

following up on this issue:

with the latest Ext 2.2 code from SVN, tabbing from within an active cell editor in an editorgrid fails in Chrome 1.0.154.46 (also fails on the version of Chrome just prior to this one).

the online example (which uses the official 2.2 download) works though:
http://extjs.com/deploy/dev/examples/grid/edit-grid.html
and

Mystix - The link you provided is for 2.2.1 and is working for me. Does the latest build from SVN fail for you?



@aaron, Chrome keyboard support (in the editorgrid for example) is definitely broken in 2.2.x since the introduction of the Ext.isChrome flag. Since a lot of the checks in the codebase target Safari specifically, Chrome simply isn't getting the same tender loving care it used to receive when masquerading as Safari.

i implemented the following overrides which fixed all of the issues which i've come across in my application
(i.e. editorgrid navigation, and combo editor key events):


Ext.apply(Ext, {
/**
* True if the detected browser is Webkit-based (e.g. Safari / Chrome).
* @type Boolean
*/
isWebkit: function() {
return Ext.isSafari || Ext.isChrome;
}
});

Ext.override(Ext.EventObjectImpl, {
setEvent : function(e) {
if (e == this || (e && e.browserEvent)) { // already wrapped
return e;
}

// note: these 2 variables are private to Ext.EventObjectImpl, so i had to copy them in again
var E = Ext.lib.Event,
// normalize button clicks
btnMap = Ext.isIE? {1:0,4:1,2:2} : (Ext.isWebkit? {1:0,2:1,3:2} : {0:0,1:1,2:2});

this.browserEvent = e;
if (e) {
// normalize buttons
this.button = e.button? btnMap[e.button] : (e.which? e.which - 1 : -1);
if (e.type == 'click' && this.button == -1) {
this.button = 0;
}
this.type = e.type;
this.shiftKey = e.shiftKey;
// mac metaKey behaves like ctrlKey
this.ctrlKey = e.ctrlKey || e.metaKey;
this.altKey = e.altKey;
// in getKey these will be normalized for the mac
this.keyCode = e.keyCode;
this.charCode = e.charCode;
// cache the target for the delayed and or buffered events
this.target = E.getTarget(e);
// same for XY
this.xy = E.getXY(e);
} else {
this.button = -1;
this.shiftKey = false;
this.ctrlKey = false;
this.altKey = false;
this.keyCode = 0;
this.charCode = 0;
this.target = null;
this.xy = [0, 0];
}
return this;
}
});

Ext.override(Ext.form.Field, {
initEvents : function() {
this.el.on(Ext.isIE || Ext.isSafari3 || Ext.isChrome? "keydown" : "keypress", this.fireKey, this);
this.el.on("focus", this.onFocus, this);

// fix weird FF/Win editor issue when changing OS window focus
var o = this.inEditor && Ext.isWindows && Ext.isGecko? {buffer:10} : null;
this.el.on("blur", this.onBlur, this, o);
}
});

Ext.override(Ext.form.ComboBox, {
// bugfix for "Tabbing away from active Combo editor in editorgrid in Safari fails to activate next editable cell"
// by @evant -- http://extjs.com/forum/showthread.php?p=255909#post255909
fireKey : function(e) {
var fn = function(e) {
if (e.isNavKeyPress() && !this.isExpanded() && !this.delayedCheck) {
this.fireEvent("specialkey", this, e);
}
};

// add Chrome support
if (this.inEditor && Ext.isWebkit && e.getKey() == e.TAB) {
fn.defer(10, this, [new Ext.EventObjectImpl(e)]);
} else {
fn.call(this, e);
}
}
});

Ext.override(Ext.grid.CellSelectionModel, {
initEvents : function() {
this.grid.on("cellmousedown", this.handleMouseDown, this);

// bugfix -- adds Chrome support
this.grid.getGridEl().on(Ext.isIE || Ext.isWebkit? "keydown" : "keypress", this.handleKeyDown, this);

var view = this.grid.view;
view.on("refresh", this.onViewChange, this);
view.on("rowupdated", this.onRowUpdated, this);
view.on("beforerowremoved", this.clearSelections, this);
view.on("beforerowsinserted", this.clearSelections, this);
if (this.grid.isEditor) {
this.grid.on("beforeedit", this.beforeEdit, this);
}
}
});

[aconran]

Thanks Marc, added Ext.isWebKit and Field & CellSelectionModel fixes. Still need to verify EventObjectImpl and Combo issues and test for any possible regressions.

[mystix]

Thanks Marc, added Ext.isWebKit and Field & CellSelectionModel fixes. Still need to verify EventObjectImpl and Combo issues and test for any possible regressions.

i was just thinking (and reading), maybe we should fix stuff once and for all by updating the EventObject implementation -- unify the key events at the EventObjectImpl level (as far as possible) so a keypress means a keypress, and obtaining such an event from the Ext keyboard event model will give the same results X-browser.

this way, we won't have to sprinkle the codebase with various browser tests to determine which key event -- keypress, keydown, keyup etc -- to use i.e. a keypress will mean a keypress, regardless of browser. this should result in code savings overall.

let me know if i should take this up for discussion in the Feature Requests thread / a separate thread, 'cos i've got a few bookmarked links which could come in handy for this.

[JoomlaMan]

Chrome is no longer a beta - this entire thread should be renamed!

[mystix]

Chrome is no longer a beta - this entire thread should be renamed!

done

[mystix]

Thanks Marc, added Ext.isWebKit and Field & CellSelectionModel fixes. Still need to verify EventObjectImpl and Combo issues and test for any possible regressions.

@aaron, i forgot to include the required CSS fixes for Chrome

note: all of the rules (except the one in red) should use the new ext-webkit css class in the 3.x branch, since they affect both Chrome / Safari:


/* remove safari's blue / chrome's yellow input field outline */
.ext-safari *:focus,.ext-chrome *:focus{outline:none;}

/* non-grid triggerfields */
.ext-safari .x-form-field-wrap .x-form-trigger,.ext-chrome .x-form-field-wrap .x-form-trigger{height:21px;}

/* safari / chrome combo grid editor height */
.ext-safari .x-small-editor .x-form-text,.ext-chrome .x-small-editor .x-form-text{height:15px!important;padding-top:3px;font-size:100%;}


/* chrome combo grid editor height */
.ext-chrome .x-small-editor .x-form-text{height:14px!important;}

/* grideditor combo trigger */
.ext-safari .x-small-editor .x-form-trigger,.ext-chrome .x-small-editor .x-form-trigger{height:19px!important;}

/* input fields / comboboxes in toolbars */
.ext-safari .x-toolbar .x-form-text,.ext-chrome .x-toolbar .x-form-text{padding:2px;height:14px!important;font-size:100%;}

/* editorgrid editable cell height */
.ext-safari .x-grid3-cell-inner,.ext-chrome .x-grid3-cell-inner{height:14px;}

/* Ext.Button right-padding */
.ext-safari .x-btn-text-icon .x-btn-center .x-btn-text,.ext-chrome .x-btn-text-icon .x-btn-center .x-btn-text{padding-right:4px;}

[ncardeli]

Hi! I'm experiencing some problems with a TabPanel placed inside a Viewport that has layout:'fit'. I'm using Ext 2.2.1.

The control renders ok but if the window is resized (to a smaller size) horizontal and vertical scrollbars appear inside the TabPanel.

Here's an example:


<html>
<head>
<title>Chrome resizing problem</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'fit',
items:{
activeTab: 0,
xtype: 'tabpanel',
autoScroll: true,
items: [
{
title: 'Start',
layout: 'fit'
}
]
}
});
});
</script>
</head>
<body>
</body>
</html>


Thanks for your help!

[mystix]

@ncardeli,

there's a bug in FitLayout which has been fixed in SVN.

use the following override in the meantime:


Ext.override(Ext.layout.FitLayout, {
onLayout : function(ct, target){
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
if(!this.container.collapsed){
var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();
this.setItemSize(this.activeItem || ct.items.itemAt(0), size);
}
}
});

[ncardeli]

mystix, thanks for your response!

Now it's working better as the scrollbars don't appear anymore. However I have a more complex case where I still find some problems while resizing the window. Now, a space the same size of the scrollbar appears instead.

Here's an example:



<html>
<head>
<title>More complex sample</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.override(Ext.layout.FitLayout, {
onLayout : function(ct, target){
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
if(!this.container.collapsed){
var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();
this.setItemSize(this.activeItem || ct.items.itemAt(0), size);
}
}
});
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'border',
items: [
{
region: 'east',
width: '200',
split: true,
title: 'EastA1'
},
{
title: 'Center A1',
region: 'center',
layout: 'fit',
autoScroll: true,
items: [
{
activeTab: 0,
xtype: 'tabpanel',
autoScroll: true,
items: [
{
title: 'Start',
layout: 'fit',
html: 'Hi!'
}
]
}
]
}
]
});
});
</script>
</head>
<body>
</body>
</html>


Thanks for your help!!

[ppritchard]

Per this sticky, extjs still considers Chrome to be a special case of browser, although it is no longer in beta.

However:


Ext JS supports all major web browsers, as stated in the overview page at http://www.extjs.com/products/extjs/
Safari is considered a major browser, since it appears in the list of supported "major" browsers
Chrome has a market share that equals or exceeds Safari's. For example, see http://www.w3schools.com/browsers/browsers_stats.asp
Assuming that the criteria for a "major" browser should be the number of people using it, Chrome should qualify as a major browser.


At what point will extjs officially support Chrome?

[mystix]

Per this sticky, extjs still considers Chrome to be a special case of browser, although it is no longer in beta.

However:


Ext JS supports all major web browsers, as stated in the overview page at http://www.extjs.com/products/extjs/
Safari is considered a major browser, since it appears in the list of supported "major" browsers
Chrome has a market share that equals or exceeds Safari's. For example, see http://www.w3schools.com/browsers/browsers_stats.asp
Assuming that the criteria for a "major" browser should be the number of people using it, Chrome should qualify as a major browser.


At what point will extjs officially support Chrome?

as mentioned by @aconran in post #59, webkit support has already been added to Ext 2.2.x / Ext 3.0 in SVN.
exactly what chrome-specific problems prompted this post?
or was it simply the omission of Chrome from the supported browsers list?

[franck34]

keyboard bugs on 2.2.1

I've tried patch found on this thread without success.

See demo link on http://extjs.com/forum/showthread.php?p=318382

[ncardeli]

mystix, thanks for your response!

Now it's working better as the scrollbars don't appear anymore. However I have a more complex case where I still find some problems while resizing the window. Now, a space the same size of the scrollbar appears instead.

Here's an example:



<html>
<head>
<title>More complex sample</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.override(Ext.layout.FitLayout, {
onLayout : function(ct, target){
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
if(!this.container.collapsed){
var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();
this.setItemSize(this.activeItem || ct.items.itemAt(0), size);
}
}
});
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'border',
items: [
{
region: 'east',
width: '200',
split: true,
title: 'EastA1'
},
{
title: 'Center A1',
region: 'center',
layout: 'fit',
autoScroll: true,
items: [
{
activeTab: 0,
xtype: 'tabpanel',
autoScroll: true,
items: [
{
title: 'Start',
layout: 'fit',
html: 'Hi!'
}
]
}
]
}
]
});
});
</script>
</head>
<body>
</body>
</html>


Thanks for your help!!

mystix, I applied the override you sent me but I'm experiencing this problem in Chrome and Firefox 3. Could you give me a clue where I could start looking for a solution in the code?

Thanks in advance!

[mystix]

keyboard bugs on 2.2.1

I've tried patch found on this thread without success.

See demo link on http://extjs.com/forum/showthread.php?p=318382

exactly which overrides did you try? (e.g. the one i posted in post #58?)
i looked through your IconAlive demo and didn't see you using any overrides.

[mystix]

@ncardeli,

you shouldn't be using layout 'fit' with autoscroll (think about it -- it doesn't really make sense).

this was the cause of the problem:


Ext.override(Ext.layout.FitLayout, {
onLayout : function(ct, target){
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
if(!this.container.collapsed){
var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();
this.setItemSize(this.activeItem || ct.items.itemAt(0), size);
}
}
});
Ext.onReady(function() {
new Ext.Viewport({
layout:'border',
items: [{
region: 'east',
width: '200',
split: true,
title: 'EastA1'
}, {
title: 'Center A1',
region: 'center',
layout: 'fit',
//*
autoScroll: true,
//*/
items: [{
activeTab: 0,
xtype: 'tabpanel',
autoScroll: true,
items: [{
title: 'Start',
layout: 'fit',
html: 'Hi!'
}]
}]
}]
});
});

comment that out and you'll see it works as expected.

[franck34]

exactly which overrides did you try? (e.g. the one i posted in post #58?)
i looked through your IconAlive demo and didn't see you using any overrides.

Yes sorry i removed it. Now there is the patch which is in post #58, no changes.

I've made a really little test case with the patch below, tested with FF/IE6 only, which is not working with google chrome :
http://innovacode.com/extjs/Ext.ux.IconAlive/nokey_pb.html

Thanks

[mystix]

Yes sorry i removed it. Now there is the patch which is in post #58, no changes.

I've made a really little test case with the patch below, tested with FF/IE6 only, which is not working with google chrome :
http://innovacode.com/extjs/Ext.ux.IconAlive/nokey_pb.html

Thanks

just tested the example. i suspect chrome has a problem with the Ext.Window's focus element. the keys work correctly once the Ext.Window has been resized. try testing your example using 3.0rc1, and if the problem still exists there, file a bug report for it.

[franck34]

just tested the example. i suspect chrome has a problem with the Ext.Window's focus element. the keys work correctly once the Ext.Window has been resized. try testing your example using 3.0rc1, and if the problem still exists there, file a bug report for it.

The behavior you detected is a good way for me to go deeper, thanks. I can not/don't want to test with 3.0, got a huge app working with latests 2.x.x and i'll wait to official 3.0 (and probably buy a license). So let's keep in touch about that using 2.x.x and patches for the moment, it's not critical for me.

[mystix]

could you try this css override and let me know if the problem still manifests?
i used this to enable the focusEl for Ext.Windows to actually receive focus in Safari / Chrome:


.x-dlg-focus{-moz-outline:0 none;outline:0 none;width:1px;height:1px;overflow:hidden;position:absolute;top:0;left:0;}

Safari / Chrome are apparently unable to focus page elements without width + height.

[franck34]

could you try this css override and let me know if the problem still manifests?
i used this to enable the focusEl for Ext.Windows to actually receive focus in Safari / Chrome:


.x-dlg-focus{-moz-outline:0 none;outline:0 none;width:1px;height:1px;overflow:hidden;position:absolute;top:0;left:0;}
Safari / Chrome are apparently unable to focus page elements without width + height.

Yep, it's working like a charm ! Thanks !

[ncardeli]

@ncardeli,

you shouldn't be using layout 'fit' with autoscroll (think about it -- it doesn't really make sense).


mystix, thanks for your response. Removing autoScroll solved the problem.
The cause of the problem was in front of me all the time! Thank you very much!

[aconran]

Post any relevant bugs for Ext 2 and Ext 3 in the appropriate forum for Google Chrome as it is now out of beta for a while.

Thanks,