PDA

View Full Version : [FIXED-EXTJSIV-1793]Sandbox version can collide with ids used with other versions



Burke
28 Apr 2011, 12:53 PM
We have a substantial amount of legacy code, all using and older version of Ext. We are writing our new components using Ext4. We have run into issue with id generation via Ext.id().

In certain cases, when you render components in Ext4 without specifying an id, the generated id can collide with an existing element on the page, and give inconsistent behavior. See the sample html at the bottom of the post for an example. In this case, when the menu is rendered, it's body attaches to a previously rendered element on the page.

One solution seem to set the Ext4.idSeed to a large number. However, this doesn't seem like a bullet-proof solution. I'd love to see a way to provide a prefix that could be added to all generated id's, something like:

Ext4.idPrefix = 'x4';

Ext.id() // => 'x4-ext-gen1011';

Or even better, when running in sandbox mode, set this idPrefix automatically.

Thanks


------------------------ Example ------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="ext/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-3.3.1/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-4.0.0/builds/ext-all-sandbox.js"></script>
<link type="text/css" rel="stylesheet" href="ext/ext-4.0.0/resources/css/ext-sandbox.css" />
<script type="text/javascript">
Ext4.onReady(function() {

// simulate a bunch of stuff being rendered in Ext 3.3
for (var i = 0; i < 1011; i++) {
Ext.id();
}
Ext.getBody().createChild();

// now the menu code from Ext 4.0
var el = Ext4.get('align-to-me');
var menu = new Ext4.menu.Menu({
xtype : 'menu',
plain : true,
shadow: 'drop',
items : [
{ text : 'Item 1', plain : true },
{ text : 'Item 2', plain : true }
],
width : 200
});

el.on('click', function() {
menu.show();
menu.alignTo(el);
});
});
</script>
</head>
<body>
<div id="align-to-me" style="float:left;border:1px solid green;">Click here to see the menu</div>
<div style="float: right;border:1px solid red;">Over here</div>
</body>
</html>

evant
28 Apr 2011, 5:53 PM
Makes sense, we'll look into it.

Jamie Avins
27 May 2011, 11:41 AM
This has been fixed for the 4.0.2 release. We will be prepending all Ids for a sandboxed Ext instance with the unique global namespace.

Burke
31 May 2011, 6:47 AM
Thanks for the quick fix.

Wainer
26 Dec 2011, 3:42 PM
i have this problem with ext4.07 and ext3 version! how i can fix that?(:|

pouniok
23 Apr 2012, 6:21 AM
I'm getting this issue with Ext 4.0.7 sandbox mode and Ext 3.4.0.

I don't know how to fix it, so for the moment, I just add a config line into each ext4 object :
id: Ext4.id()

Better solution would be much appreciated ;)