Results 1 to 5 of 5

Thread: ComponentQuery and lookupReference together

  1. #1
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    269
    Answers
    15

    Default ComponentQuery and lookupReference together

    In an app with, for example, a grid panel (with a grid and a toolbar with buttons) for get buttons reference I use reference and this.lookupReference.

    If the toolbar is in another panel (with different controller) to obtain the buttons reference, I use Ext.ComponentQuery.query('#button')[0]; because this.lookupReference does not work in this cases.


    However, if I need to get the reference of more than one button, note that works as follows:

    Code:
    var toolbar = Ext.ComponentQuery.query('#toolbar')[0];
    
    toolbar.lookupReference('buttonAdd');
    toolbar.lookupReference('buttonSave');
    toolbar.lookupReference('buttonDelete');

    Question: This is a good practice or not give any advantage over using directly:
    Code:
    Ext.ComponentQuery.query('#buttonAddItemId')[0];
    Ext.ComponentQuery.query('#buttonSaveItemId')[0];
    Ext.ComponentQuery.query('#buttonDeleteItemId')[0];
    Thanks.

  2. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi--

    If you are able to use lookupReference(), it will have better performance since the reference will just be looked up in the owning view's reference cache, while CQ will have to search all components. In cases where you must use CQ, I'd try to provide a "root" from where to start the search.

    More Info: https://docs.sencha.com/extjs/5.1/ap...html#Reference

    Thanks!
    Joel

  3. #3
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    269
    Answers
    15

    Default

    Thanks Joel.
    Quote Originally Posted by joel.watson View Post
    I'd try to provide a "root" from where to start the search.
    How I do it?
    I follow my example aprowche getting the root with CQ and then I do the search with lookupReference?

    Related issue:
    If the app have a hbox (panel) with two panels children, usually I set up just one controller for the hbox component and I use lookupReference to search diretcly in both panel children. Works fine.
    In the post below, they suggested a very interesting technique and for some time I've been reflecting on it, and I was wondering if, in your opinion, it is better to do this way:
    Something like:

    Code:
    Ext.define('APP.MotherHBox', {    
    extend: 'Ext.container.Container',
        
        controller:'mycontroller',
        
        (...)
        items: [
            {
                xtype:'panelOne'
            }, {
                reference:'paneltwoRef',
                xtype:'panelTwo'        
            }]
    
    
    });
    
    Ext.define('APP.PanelChildTwo', {
        extend: 'Ext.panel.Panel',
        xtype:'panelTwo,
        (...)                        
        items:[{
            xtype: 'textfield',
            reference: 'childTwoRef
        }]
    }
    
    
    //For get textfield reference:
    var motherpanelLevel = this.lookupReference('paneltwoRef');    
    motherpanelLevel.lookupReference('childTwoRef');
    This is the best technique or is enough only:

    Code:
    this.lookupReference(childTwoRef);

    https://www.sencha.com/forum/showthr...entQuery.query

  4. #4
    Sencha User
    Join Date
    Apr 2015
    Posts
    12
    Answers
    1

    Default

    1. toolbar.down('#buttonAddItemId') instead of Ext.ComponentQuery.query. A lot faster than ComponentQuery, but slower than reference.
    2. this.lookupReference won't work if this is not a referenceHolder. In this case you need to look up the component's reference holder: this.lookupReferenceHolder().
    3. motherpanelLevel holds the childTwoRef's reference.

  5. #5
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    269
    Answers
    15

    Default

    Quote Originally Posted by gyoroka View Post
    In this case you need to look up the component's reference holder: this.lookupReferenceHolder().
    Thanks gyoroka.
    I do not quite understand your suggestion.
    It's something like that?
    It seems does not work...


Similar Threads

  1. lookupReference
    By Chris Wallace in forum Ext 5: Q&A
    Replies: 7
    Last Post: 5 Mar 2015, 1:35 AM
  2. Replies: 4
    Last Post: 19 Nov 2014, 7:13 AM
  3. ComponentQuery or LookupReference for a sibling?
    By blomasky in forum Ext 5: Q&A
    Replies: 5
    Last Post: 9 Sep 2014, 12:03 PM
  4. lookupReference not working
    By Urkman in forum Ext 5: Q&A
    Replies: 3
    Last Post: 9 Aug 2014, 6:44 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
  •