PDA

View Full Version : [CLOSED]Ext IDs



LesJ
4 Mar 2011, 12:20 PM
Is it possible to make Ext IDs more consistent?

Here's an example:


// Current
<div id="ext-gen1013" class="x-window-body x-layout-fit" ...
<div id="component-1033" ...

// Proposed change
<div id="x-gen-1013" class="x-window-body x-layout-fit" ...
<div id="x-component-1033" ...

MeDavid
4 Mar 2011, 12:38 PM
or possibly disable?

mitchellsimoens
5 Mar 2011, 6:00 AM
I wouldn't disable it, not that I use them for anything but debugging.

So my question to the OP is, does it really matter?

steffenk
5 Mar 2011, 6:19 AM
only important is that they are unique. By DOM explore you know if they are components or where they do belong, nothing more. I see no advantage to have "x-.." instead.

Animal
5 Mar 2011, 11:01 AM
Consistent with what?

Component encapsulating elements are given the ID of that Component. That is very useful for debugging,

LesJ
5 Mar 2011, 11:22 AM
I see that the IDs are now more informative compared to Rel 3, and I like it.

>>> Consistent with what?

The format is not consistent. See the example that I pasted. In one place the ID is prefixed with "ext" and in another place, there's no prefix. The prefix "ext-gen" could be replaced by simply "x-". You can skip the "gen" part. It obvious that this is an Ext-generated ID.

I'd like to have the "x-" prefix (as in class names) for widget IDs. This is a quick visual clue that the ID was generated by Ext. I like class name format better.

LesJ
5 Mar 2011, 11:39 AM
Another example.

See ext-4.0-pr3/examples/form/anchoring.js

The ID format in this example of these IDs is not consistent:

"ext-gen1032"
"textfield-1017"
"x-form-item-body-ext-gen1038"

These are all Ext generated IDs.

mitchellsimoens
5 Mar 2011, 1:08 PM
Can I ask a question again? Does this matter at all?

LesJ
5 Mar 2011, 1:20 PM
Does this matter at all?

The only requirement is that the ID is unique - we could have a random number in place of the ID and this would work.

BUT, a consistent well thought out ID format can at a glance provide more useful information.

Take a look at the Ext class names. They have a consistent format and are informative.

mitchellsimoens
5 Mar 2011, 1:21 PM
Ok... when do you use the IDs of the DOM elements?

LesJ
5 Mar 2011, 1:26 PM
Ok... when do you use the IDs of the DOM elements?

I inspect them visually and this gives me more info about the widgets. I can quickly understand or learn the application if the IDs are informative and consistent.

I assume tools such Illuminations for Firebug could parse the ID and generate even more useful info.

mitchellsimoens
5 Mar 2011, 1:28 PM
Easy way to visualize components... if you open firebug (or the like) and mouse over DOM elements, it will highlight it. No change required for that.

LesJ
5 Mar 2011, 1:34 PM
Easy way to visualize components... if you open firebug (or the like) and mouse over DOM elements, it will highlight it. No change required for that.

I use Illuminations. This works great, but only in Firefox.

Take a look at Ext css class names - they are consistent and informative.

The effort to correct the generated ID names is miniscule, but better names would provide helpful information.

mitchellsimoens
5 Mar 2011, 1:38 PM
I'm gonna stop posting here... this is a none issue.

evant
6 Mar 2011, 9:31 PM
I don't really see this as being much of an issue, though I guess it might be something we could look at eventually.

However I wouldn't say the amount of effort is miniscule, there's many more important things to look at now.

LesJ
7 Mar 2011, 4:02 AM
Ext.Component's getId() changes between releases:


// Rel 3: As you can see the ID is not very informative.
// It's just a prefix + sequential number.
getId : function(){
return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID));
}

// Rel 4: This is better b/c the ID includes the xtype prefix.
getId: function() {
return this.id || (this.id = (this.getXType() || 'ext-comp') + '-' + this.getAutoId());
}

// My suggestion:
// Modify this method to have the "ext" or "x" prefix,
// so it sorts nicely in the Ext widget registry.
// This is a small change that provides further improvement to the ID format.
getId: function() {
return this.id || (this.id = 'ext-' + (this.getXType() || 'comp') + '-' + this.getAutoId());
}