PDA

View Full Version : How can I change a tab/component id?



mschwartz
9 Jun 2009, 10:28 AM
I need to change the id of a tab that's already added to a tab panel.

Not so easy.

It's registered by id with ComponentMgr, and apparently in some internal hash in tab panel. Maybe other places, too.

Any suggestions?

Why? I want to be able to do findById() on a tab with a form that's been submitted and now has a record id that would be part of the id that I want to change in the tab.

9 Jun 2009, 10:37 AM
you can set some other type of property like 'appId' and then use the Container's findBy method.

mschwartz
9 Jun 2009, 10:38 AM
I tried:
ComponentMgr.unregister() -> change id -> ComponentMgr.register() but findById fails on it.

mschwartz
9 Jun 2009, 10:39 AM
you can set some other type of property like 'appId' and then use the Container's findBy method.

Easier said than done, as the tab panel has lots of other kinds of tabs, but this is something I'm already considering...

And findById() is actually really slow - it finds all the form fields and so on that are in any tab in the panel. I'd really like to just search the actual tabs.

9 Jun 2009, 10:41 AM
other kinds of tabs ?

i say leave the Ext id alone and go with some custom property if possible.

mschwartz
9 Jun 2009, 10:44 AM
other kinds of tabs ?

i say leave the Ext id alone and go with some custom property if possible.

Yeah, lots of other kinds of tabs.

Some tabs are grids, others are forms, many not related to one another directly in function.

On top of that, there's like a hundred places the id is used.

9 Jun 2009, 10:50 AM
that's fine. If you search the first level children, you should be OK.

what does changing the id of the component get you?

mschwartz
9 Jun 2009, 10:53 AM
that's fine. If you search the first level children, you should be OK.

what does changing the id of the component get you?

I encode information in the ID about what kind of object is being edited and what's responsible for managing the data produced.

In any case, I think it's a good thing to be able to change a component's ID just as you can change a window's title, etc. Orthagonal...

9 Jun 2009, 10:55 AM
ah.

This is precisely why when i was in the 'extperts' panel in the conference, the first thing i said when asked what not to do was use ids for components (and depend on them). ;)

mschwartz
9 Jun 2009, 10:58 AM
ah.

This is precisely why when i was in the 'extperts' panel in the conference, the first thing i said when asked what not to do was use ids for components (and depend on them). ;)

What's the point in having them and ComponentMgr?

9 Jun 2009, 11:00 AM
Provides a registry of all Components (instances of Ext.Component or any subclass thereof) on a page so that they can be easily accessed by component id (see get, or the convenience method Ext.getCmp).

This object also provides a registry of available Component classes indexed by a mnemonic code known as the Component's xtype. The xtype provides a way to avoid instantiating child Components when creating a full, nested config object for a complete Ext page.

A child Component may be specified simply as a config object as long as the correct xtype is specified so that if and when the Component needs rendering, the correct type can be looked up for lazy instantiation.

For a list of all available xtypes, see Ext.Component.
...

9 Jun 2009, 11:02 AM
btw, you can use itemId if you wish, instead of id.

mschwartz
9 Jun 2009, 11:04 AM
Ext.getCmp() is something I use in a thousand places in the code, just as the docs suggest I should.

:D

This project was started long before Ext 3 was available to me to develop for, so things like itemId weren't an option.

9 Jun 2009, 11:07 AM
i'm out of suggestions dude. I am sorry that i could not assist you to a solution.

mschwartz
9 Jun 2009, 11:11 AM
I already implemented the solution, though I think the dialogue about being able to change id's and the value of Ext.getCmp() is a good one. And maybe the n00bs will learn something from all this.



tabPanel.findByName = function(name) {
var found = null;
tabPanel.items.each(function(item) {
if (item.name && item.name === name) {
found = item;
return false;
}
return true;
});
return found;
};
And



tab = tabPanel.add({...});
tab.name = 'what_really_should_be_the_id';