Results 1 to 8 of 8

Thread: Using ref inside controller's control method

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    33

    Default Using ref inside controller's control method

    It seems redundant that the same component query often have to be typed twice, once while defining the refs in controller, once as argument to the control method. It would be nice if the refs defined can be used in control method as well, such as

    Code:
    Ext.define('Soc.controller.Subjects', {
        extend: 'Ext.app.Controller',
        refs: [
            {ref: 'delSubjectBtn',  selector: 'subjectsGrid button[action=delete]' }
        ],
    
    
        init: function() {
            var me = this;
            me.control({
                'delSubjectBtn': {
                    click: me.deleteSubject
                }
            });
        }
        ....
    })
    Thoughts?

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,519

    Default

    You could implement relative easy exending Controller class or overriding some methods.
    I think, as you do, that would be nice if ExtJS's team implement in core product.

    Regards.
    UI: Sencha Architect / ExtJS 4 - 6
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: WildFly / Weblogic
    Databases: Oracle
    / MySQL / DB2 / Firebird

    If you like my answer please vote!

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    33

    Default

    So one can easily implement this functionality by simply extending the Ext.app.Controller and override the control method to first see if the selector strings match any defined references? Wow that's pretty powerful!

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149

    Default

    Honestly, this feature should be built in by default. Whenever I have a long ref I have to go and find the same corresponding query in the control (which happens often) and update that as well. I don't think I should have to do that twice. I thought the whole point of a reference selector was to only have to list the path once.

  5. #5

    Default

    Yep i can confirm the problem!

    The explanations and demos say that it SHOULD work:

    app/controller/Station.js

    Code:
    ...
    refs: [{     // A component query
         selector: 'viewport > #west-region > stationslist',
         ref: 'stationsList'
    }] 
    ...
    init: function() {
         this.control({
               'stationslist': {
                       selectionchange: this.onStationSelect
                },
                ...
          }); 
    },
    ...
    source:
    http://docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt3

  6. #6
    Sencha Premium User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    135

    Default ... and inside custom methods

    I think that's useful for custom methods in controller too...

    PHP Code:

    ... refs: [{     // A component query
          
    selector'viewport > #west-region > stationslist',
           
    ref'stationsList' }] 

     ... 
    init: function() {      
             
    this.control({            
                  
    'stationslist': {                    
                            
    selectionchangethis.onStationSelect             
                   
    },             
     ...       
    });  
    }, ... 
    If I set a ref I want to use it to listen for his events (in control method) and manage remove/update ... in other mycontrol methods...

    In Ext3, with a ref setted in the ui class, in my "logic" class (something like a controller in ext4) :

    this.myref.on(....
    this.myref.reset();

    was simple...

  7. #7
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506

    Default

    Quote Originally Posted by chaostimmy View Post
    The explanations and demos say that it SHOULD work:
    app/controller/Station.js
    Code:
    ...
    refs: [{     // A component query
         selector: 'viewport > #west-region > stationslist',
         ref: 'stationsList'
    }] 
    ...
    init: function() {
         this.control({
               'stationslist': {
                       selectionchange: this.onStationSelect
                },
                ...
          }); 
    },
    ...
    I think you misunderstand the example. The code uses this.control({ 'stationslist' ... because 'stationlist' is the xtype of the component, not because it makes use of the 'ref' definition. You can see that the 'ref' uses 'stationsList' (camelCase) instead.

    There might be a good reason why they use a different query to identify the target, however, I assume there is only one component of xtype 'stationlist' in this application and therefore both queries reference the same component and the different queries were merely to demonstrate the query feature.

  8. #8
    Sencha User
    Join Date
    Jul 2011
    Location
    Holland
    Posts
    98

    Default

    This behavior is not aligned with Sencha Touch 2. I think the implementation in Sencha Touch 2 is more powerful then ExtJS.

Posting Permissions

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