PDA

View Full Version : Question about the proper use of getComponent and ownerCt



discmode
15 Mar 2011, 9:06 AM
Thanks to assistance from this forum I now have a working understanding of getComponent and ownerCt. But I want to ensure that I am using them correctly.

For example, I have a viewport with a border layout, with West and Center Regions. In the West region, I have a listview nested in a panel and a container. In the Center, a gridPanel is also nested within a panel and a container.

The process loads the store from a listview click. It works, but I'm wondering if there is a better way to reference parent/child containers.

What I do:


the listview click is relayed to the panel wrapper.
then, to reference the Viewport:

var x = this.ownerCt.ownerCt

to reference the grid:

var z = x.getComponent('centerRegion').getComponent('grids').getComponent('mainGrid')

to load the grid:

z.store.load...


Thanks again for your time,

Dag

steffenk
15 Mar 2011, 9:23 AM
var x = this.ownerCt.ownerCt
too dangerous. As soon you add something or change the container, it will fail.
For viewport i use id as viewport is unique anyways, so getCmp('viewportId')


var z = x.getComponent('centerRegion').getComponent('grids').getComponent('mainGrid')

possible, but complicate, also dependend on not changing structure.
I prefer namespaced vars


MyApp.MainGrid = new Ext.grid.GridPanel({...});
then you simply use MyApp.MainGrid for reference.

for stores i normally use the StoreManager to get the right store, but your way would work also.

Ext.StoreMgr.get('storeId').load();

The idea of itemId is that you have a defined component which can be used multiple times in one page. Then you can use this reference inside the component:

this.getComponent('refreshButton').enable();

btw - ownerCt often is used for simple actions, like changing something inside component and then do a

this.ownerCt.doLayout();

discmode
15 Mar 2011, 10:15 AM
Steffen,

Wonderful! Thank you for taking the time to review some of the Ext basics. You have cleared up a few of my mix ups.

Question: I normally register classes with an xtype, adding them to a container using the xtype and assigning an id. Is using Ext.getCmp with an id then the best way of grabbing a component reference?

steffenk
15 Mar 2011, 11:04 AM
You should avoid id whenever it's possible. Component with given id can be used only once in the page to avoid invalid HTML. Use itemId or ref whenever it's possible.
Jay has a video out where he also warn using id and getCmp :)

conorarmstrong
15 Mar 2011, 11:16 AM
personally I think the way you are referencing the grid from the list view is less than ideal. You should really be aiming for loose coupling wherever possible. The listview shouldn't really care if it is used to update a grid or some other component. The only thing that cares about that is the viewport.

In my opinion, the viewport should add a on click (or similar) handler to the listview and then trigger the appropriate action in the grid's store. Saki did an excellent tutorial on this very point: http://examples.extjs.eu/?ex=compcomm

Hope this helps...

discmode
15 Mar 2011, 11:17 AM
Steffen,

I will check out Jays' video. Thanks again,

Dag

ewomack
15 Mar 2011, 1:20 PM
Can you link to the video? Or point me in the right direction?

Thanks!

steffenk
15 Mar 2011, 1:24 PM
http://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp

discmode
16 Mar 2011, 3:29 PM
Thanks once again for your patience and assistance. I've been watching screencasts and studying the different formats for extending classes. It's been a rewarding experience and I have more than a little work ahead of me.

Through all the examples, a few questions so far remain unanswered:
1. When to put certain config properties in the initComponent and when in the main body of the class? This question was brought up by a commentor on Jay's 'Extending abstact classes' screencast.

2. When to use constructor and when to use initComponent.

3. This one is quite basic, but when is it proper to use apply in initComponent? How do the below patterns differ? (This example is from Jay's 'Extending abstact classes' screencast and a comment posted on Saki's blog where he built on Jay's format.)


,initComponent:function() {
Ext.apply(this, {
items:this.buildItems()
,buttons:this.buildButtons() });

MyApp.AbstractFormPanel.superclass.initComponent.call(this); }

buildItems : function() { return []; },
...
v.


,initComponent: function() {
this.buildItems();
this.buildButtons();
MyApp.AbstractFormPanel.superclass.initComponent.call(this); },

buildItems : function() { return []; },
...
Thank you,

Dag