PDA

View Full Version : Best practice for reusable components and Id's?



estesbubba
6 May 2010, 5:36 AM
We are developing our application using all custom components. Some of these components will be used in multiple places. I'm wondering if there is a best practice for defining and accessing components within a custom component? I see three ways to do this:


Give the internal components an Id. I think this would be OK if the component had only one instance. I know with Dojo having more than 1 component with the same Id caused problems. Maybe with ExtJS having multiple components with the same Id isn't a problem? I guess I could give each a prefix so Id's would be like 'instance1-form' & 'instance2-form'.
Give the internal components an itemId. I really like this method but it appears that getComponent() only searches immediate children. So when you have items within items you need to know the parent for getComponent() to work. A deep search option for this method would be nice.
Assign all internal components you're going to need to access to vars using new(). This would work but I like the clean look of defining components using xtypes.

My personal preference is I like #2 but don't want to have to know the parent to use getComponent(). Any suggestions on a clean way to do this? I would like to implement early instead of refactoring a bunch of components down the road.

Thanks!

Animal
6 May 2010, 5:51 AM
IDs must be unique.

I assign vars to reference all Components in the page. The vars are named after the Component's itemId, so anywhere in script you can just use



resultsPanel.blah(....


If you create everything with config objects, you can poke in a little initComponent to assign the var



var resultsPanel, <all your other itemIds here as seperate vars>;
...
...
{
xtype: 'grid',
itemId: 'resultsPanel',
initComponent: function() {
resultsPanel= this;
this.constructor.prototype.initComponent.call(this);
},
...
}


There are as many ways of doing this as there are developers I guess!

estesbubba
6 May 2010, 6:22 AM
With your method, is resultsPanel a global var? I want my reference to be a var within the component. For example



MyComponent = Ext.extend(Ext.Panel, {
// Wouldn't really put these here
component1: ,
component2: ,

var config = {
items: [{
// want this to be component1
xtype: 'grid'
...
},{
// want this to be component2
xtype: 'statusarea'
...
}
}
...

Then from within the component, I could do this.component1 and from outside do mycomponentinstance.getComponent1() (or just mycomponentinstance.component1)

Animal
6 May 2010, 6:25 AM
Encapsulate your code in a function. var statements will be local.

For what you want above though, see the ref config.

Mike Robinson
6 May 2010, 6:58 AM
On this subject, folks, I would make one tiny request ...

I think that we need a recursive ability to locate objects by their itemId. (I have written such a function and will be very embarrassed if it's already in there.) =;

This function, given an object and an ID-string to search for, would return an array of references to all instances of that ID. A variable should be provided to stop the search after the first hit.

:-| ... heh ... you're smiling ... heh ...

Okay, go ahead. Start typing. Tell me right here in public why my hand will thereafter swiftly be applied to my forehead = "doh!!" ;)

cnelissen
6 May 2010, 8:35 AM
If you are worried about having the same id under multiple instances of the same class, you can always use the findById method of a component instead of a gloabl Ext.get()... This will limit the search to just the children of one particular component. For instance:

MyComponent.findById('some-child-id');

This is usually how I go about dealing with these types of issues.

estesbubba
6 May 2010, 8:52 AM
Clint - so it sounds like if you have multiple instances of a component, the global Ext.get() will not be reliable for child Id's but the components findById() will be because it only works on the single instance's Id collection? If that is the case that should work for our purposes.

eugs51
6 May 2010, 6:48 PM
Please note that this does not apply in all cases. I encountered this when having similar ids in a window dialog and a tab panel, the window dialog is set to destroy on close, but when I close the dialog it also destroyed the similar ID object in tab panel. Use at your own risk. Could work in most cases though.


If you are worried about having the same id under multiple instances of the same class, you can always use the findById method of a component instead of a gloabl Ext.get()... This will limit the search to just the children of one particular component. For instance:

MyComponent.findById('some-child-id');

This is usually how I go about dealing with these types of issues.

Animal
6 May 2010, 9:22 PM
Please note that this does not apply in all cases. I encountered this when having similar ids in a window dialog and a tab panel, the window dialog is set to destroy on close, but when I close the dialog it also destroyed the similar ID object in tab panel. Use at your own risk. Could work in most cases though.

I've checked all your posts. All your replies are similar. Are you a spammer? No reply will be taken as the affirmative.

eugs51
6 May 2010, 10:38 PM
I've checked all your posts. All your replies are similar. Are you a spammer? No reply will be taken as the affirmative.

Hi Animal, first of all, I would like to thank you for all the support you are giving in this forum, you helped me in so many of my problems and has many of your code snippets in my current projects.

Why do you think I am a spammer? I think spammers leave links of their products in their post while I dont have a single one in mine. I hate spammers like everybody else. Note that I am also active in StackOverflow supporting mostly Javascript. I do this to give back to the community.

So why are my replies quick? Because I am doing this while working, while building my project etc. You see I am usually in state of "flow" while doing this, so Id like my posts to be as quick as possible. I have long been a lurker in this forum noticing your advanced replies to many advanced questions until I discovered this "Help" area today where most of the questions sounded easy to me so I scoured most unanswered easy questions and provided my unsolicited advice.

Anyway maybe this means I should just be a lurker again? No I am kidding, of course I am here to stay. Please allow me to write quick posts.

evant
6 May 2010, 10:39 PM
@eugs51, Nice one, you went on a roll so fast he thought you spammed! ;)

Keep it up.

eugs51
6 May 2010, 10:47 PM
@eugs51, Nice one, you went on a roll so fast he thought you spammed! ;)

Keep it up.

Thank you for the support. Will do. Thank you for the great library. Hope to help in my free time.

Animal
6 May 2010, 11:18 PM
Fair enough eugs.

I just get suspicious. The spammers resort to posting kind of mashups of Exty keywords in a manner that almost, but doesn't quite make sense*. They have low post counts, and just dive into as many threads as they can.

* Not saying that yours don't make sense! ;)

eugs51
6 May 2010, 11:33 PM
Yeah, I realized that too after your post. Sorry about that, I attempted several times to help in this forum but just cant answer all of them until I found this area so I got hyperactive. Will try to slow things down. Anyway, back to work. :)