View Full Version : Strategies for avoiding id

12 Nov 2009, 1:35 AM

I know and understand that using id is "a bad thing".

I've been thinking of using "ref" so I can refer to each widget via its container. That seems reasonable to me and for the moment meets my needs.

What other strategies do people employ?



12 Nov 2009, 2:36 AM
I instantiate all Components and reference them all with vars named after the Component's itemId.

This way, I always have a simple, easily remember reference to any Component, anywhere in the page.

12 Nov 2009, 2:45 AM
like this?

var widget = {
itemId: 'widget'


12 Nov 2009, 2:51 AM
That's just a config.

I mean instantiate the widgets.

12 Nov 2009, 3:02 AM
Well at the moment I'm dealing with some displayfields, so are you suggesting this?

var total = {xtype:'displayfield', fieldLabel:'Total', value: 0, itemId:'total'};

or this

var total = new Ext.form.DisplayField{fieldLabel:'Total', value: 0, itemId:'total'};

Or am I completely missing what you've said?

12 Nov 2009, 3:02 AM
Instantiate the Component.

1 Dec 2009, 5:40 AM
Hi Animal

I'm back at this and realised I hadn't finished off. At the risk of really annoying you, what do you mean instantiate the component? I feel like I'm missing something.

Best DF

1 Dec 2009, 6:14 AM
What is Animal is referring to is the latter option of "new".

Using id would be bad if you are doing things dynamically, because it will render objects in the same div as the id specified, and then you will get some really bad behavioral browsers issues. EXT JS creates an id for you, but when you have to use Save State this might be an issue.

Using itemId is a good option, though I have not had the need to use it yet.

When capturing events in the listeners, take advantage of the objects that get sent in as a parameter, they are very useful, as well as using "ownerCt", but there are some issues with using Menus as this does not give back the owner control. I'm still trying to resolve this issue.

1 Dec 2009, 6:47 AM
Animal uses something similar to:

var item1, item2, item3, viewport = new Ext.Viewport({
layout: 'form',
items: [
item1 = new Ext.form.TextField({
itemId: 'item1'
fieldLabel: 'Text',
name: 'item1'
item2 = new Ext.form.DateField({
itemId: 'item2'
fieldLabel: 'Date',
name: 'item2'
item3 = new Ext.form.ComboBox({
itemId: 'item3'
fieldLabel: 'List',
store: [1, 2, 3],
triggerAction: 'all',
editable: false

1 Dec 2009, 1:11 PM
aviod "lazy" instantiation :)