Results 1 to 9 of 9

Thread: Question about the proper use of getComponent and ownerCt

  1. #1

    Default Question about the proper use of getComponent and ownerCt

    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:

    1. the listview click is relayed to the panel wrapper.
    2. then, to reference the Viewport:
      1. var x = this.ownerCt.ownerCt
    3. to reference the grid:
      1. var z = x.getComponent('centerRegion').getComponent('grids').getComponent('mainGrid')
    4. to load the grid:
      1. z.store.load...

    Thanks again for your time,

    Dag

  2. #2
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676

    Default

    Code:
    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')

    Code:
    var z = x.getComponent('centerRegion').getComponent('grids').getComponent('mainGrid')
    possible, but complicate, also dependend on not changing structure.
    I prefer namespaced vars

    Code:
    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.
    Code:
    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:
    Code:
    this.getComponent('refreshButton').enable();
    btw - ownerCt often is used for simple actions, like changing something inside component and then do a
    Code:
    this.ownerCt.doLayout();
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3

    Default Thank you

    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?

  4. #4
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676

    Default

    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
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224

    Default

    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...
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  6. #6

    Default video

    Steffen,

    I will check out Jays' video. Thanks again,

    Dag

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    19

    Default

    Can you link to the video? Or point me in the right direction?

    Thanks!

  8. #8
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  9. #9

    Default brilliant!

    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.)
    Code:
    ,initComponent:function() {         
    Ext.apply(this, {              
    items:this.buildItems()            
     ,buttons:this.buildButtons()         });
    
    MyApp.AbstractFormPanel.superclass.initComponent.call(this);       } 
    
    buildItems : function() {         return [];     }, 
    ...
    v.
    Code:
    ,initComponent: function() {   
    this.buildItems();   
    this.buildButtons();  
    MyApp.AbstractFormPanel.superclass.initComponent.call(this); },
    
    buildItems : function() {         return [];     }, 
    ...
    Thank you,

    Dag

Similar Threads

  1. bubble function question, scope issues and this.ownerCt doesn't always have ref
    By CrazyEnigma in forum Ext 3.x: Help & Discussion
    Replies: 12
    Last Post: 23 Nov 2009, 2:04 PM
  2. getComponent question
    By dizor in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 4 Apr 2009, 11:21 PM
  3. this.ownerCt.ownerCt.close(); feels weird..
    By alexandern in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 13 Jun 2008, 1:54 PM
  4. Question about proper use of ext in terms of tabpanel autoLoad
    By zunicf in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 24 May 2008, 5:33 PM
  5. Replies: 1
    Last Post: 7 Oct 2007, 1:10 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •