View Full Version : getComponent or getItem ??

25 Oct 2007, 10:01 PM
This is for the Ext.FormPanel, but might apply to other components as well

According to the docs for the configOptions of FormPanel:

buttons : Array
An array of Ext.Button instances (or valid button configs) to add to the footer of this panel

Class Ext.ButtonPackage: Ext
Defined In: Button.js
Class: Button
Subclasses: SplitButton, Toolbar.Button
Extends: Component

So a button is a component... and, also for FormPanel...

getComponent( String id ) : Ext.Component
Gets a direct child component by id

id : String
Returns: Ext.Component

But, according to Firebug...

21035 getComponent : function(comp){
21036 if(typeof comp == 'object'){
21037 return comp;
21038 }
21039 return this.items.get(comp);
21040 },

So, it is only looking up items by id which leaves the buttons out of the search, right?
But then... how do you access buttons in a FormPanel? Sure, there's the "buttons" property... but it is not listed as a public property. Why willing to access a button on a form? Perhaps to dinamically assign the "handler" function, I don't know...

Did I miss something?
(sample code: just create a FormPanel with a button [add an id to the button] and then use the form panel getComponent function passing the id of the button to it)... or look into the code for ext-all-debug.js.


EDIT: If anyone is having the same issue, there's a way to avoid the ugly "myFormPanel.buttons[0]" to get an instance of a button component. Assuming you added an id to the button you can use the following to get the button instance:

var myButton = Ext.ComponentMgr.get('id_of_button');

(hope not to be wrong in this one)

25 Oct 2007, 11:47 PM
Fantastic! :-D

26 Oct 2007, 12:19 AM
getItem is only for TabPanel. It just calls getComponent.

getComponent gets child components of a Container.

Buttons are added to a Panel's footer subelement, and are not child Components.

26 Oct 2007, 12:59 AM
Mmm... so, should I assume that buttons are not children or not components?
They derive from the Ext.Component class, and they are (?) childrens of the FormPanel aren't they?

Anyway, I just noticed that getComponent says "direct child" so you are indeed right about getComponent if buttons are grand-children... but how about findById?

findById( String id ) : Ext.Component
Find a component under this container at any level by id
id: String
Returns: Ext.Component

21151 findById : function(id){
21152 var m, ct = this;
21153 this.cascade(function(c){
21154 if(ct != c && c.id === id){
21155 m = c;
21156 return false;
21157 }
21158 });
21159 return m || null;
21160 },

21133 cascade : function(fn, scope, args){
21134 if(fn.call(scope || this, args || this) !== false){
21135 if(this.items){
21136 var cs = this.items.items;
21137 for(var i = 0, len = cs.length; i < len; i++){
21138 if(cs[i].cascade){
21139 cs[i].cascade(fn, scope, args);
21140 }
21141 }
21142 }
21143 }
21143 },

Sure, the footer is not a component, that's why it doesn't get included in the items, but does that prevent a button to be a child (not direct, but child at least) component of a FormPanel?
Anyway... Ok, I can live without getComponent or findById for buttons, but what's the best practice to get a button instance Ext.ComponentMgr.get('id_of_button')?
I might have a bias in my mind, I used to program in Delphi, for which each button, text field, or even Label is a control... Yeah, that's the desktop and this is the web, I understand the need to simplify things to avoid a gigantic code base, but, I don't know... just giving my first steps in this and one of the first things I tried was "form.getComponent('myButtonId')"; and then found that there seemed to be no easy "logical" way of grabbing a button instance to do some stuff (like adding event handlers dinamically or changing the text, or any other dynamic thing that you could do with a button).

It's not my intention to complain, I love ExtJS... just that, formPanel.getComponent('id_of_button') or formPanel.findById('id_of_button') seemed the logical way to go.


26 Oct 2007, 1:34 AM
No, that won't work. The footer subelement is not part or the Container->Component heirarchy.

Buttons are Components, but thay are not managed as children of a Container.

Because they are Components, you can find them using Ext.getCmp() .