Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Dallas, TX
    Posts
    68
    Vote Rating
    1
    rkanemeier is on a distinguished road

      0  

    Default Where Do You Put Custom onTriggerClick Triggers In An MVC App?

    Where Do You Put Custom onTriggerClick Triggers In An MVC App?


    I'm converting a non-MVC ExtJS 4 app to MVC ExtJS 4. I have an x-form-search-trigger defined in a form and the controller does not seem to recognize the onTriggerClick event. I did some researching and found this thread:

    http://www.sencha.com/forum/showthread.php?180018-Trigger-field-triggerclick-is-not-exposed-by-API-so-controllers-cant-catch-it

    Someone posted a solution by defining a custom trigger. However, I'm a little confused about where to put this code in the MVC folder structure. Does it belong in the same code as the view that defines the trigger? Is this even an appropriate example of how to handle onTriggerClick events?

  2. #2
    Sencha User
    Join Date
    May 2010
    Location
    Dallas, TX
    Posts
    68
    Vote Rating
    1
    rkanemeier is on a distinguished road

      0  

    Default


    Ok,

    So I found an easier solution (easier to me I guess) on this thread:

    http://www.sencha.com/forum/showthre...-Trigger-field


    in the view:
    Code:
    ,{
                        xtype: 'trigger',
                        width: 275,
                        name: 'mySearchField',
                        itemId: 'mySearchField',
                        fieldLabel: 'Search',
                        selectOnFocus: true,
                        triggerCls: 'x-form-search-trigger',
                        onTriggerClick: function(e) {
                            this.fireEvent("ontriggerclick", this, event);
    			        }
                    },
    controller code:
    Code:
        init: function() {
            this.control({
    ....,
                '#mySearchField' : {
                    "ontriggerclick": this.getSearchList
                }
            });
        },
    
        getSearchList: function() {
            console.log('getSearchList called!');
        }
    However, I am still interested in knowing where I should put my custom trigger code (if I chose to go that route).

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You would place it in your controller as shown in your 2nd post.

    Code:
    'app-form my-combo' :{
        click: me. myClickFunction
    }
    
    myClickFunction: function(){
        // code
    }
    Or did I miss you point?

    Scott.

  4. #4
    Sencha User
    Join Date
    May 2010
    Location
    Dallas, TX
    Posts
    68
    Vote Rating
    1
    rkanemeier is on a distinguished road

      0  

    Default


    Scott,

    Thanks for your response. It's probably important to note that this is my 1st MVC app, and about my 10th ExtJS app. So I'm still new and I'm not 100% up-to-speed on all the terminology yet. When I did my original searches, I found a post (listed above) that suggested making my own Ext.form.field.Trigger. I a When I made my original post, I was curious where I would put this custom form.field.trigger IF I did decide to create one. I continued to do more research and came across the second link I posted, which solved my problem. However, I was/am still curious as to where in the MVC structure I would put my code for a custom form field trigger. The more I look at it, the more I realize that it probably belongs in the VIEW folder (and possibly in the same js file as the VIEW that uses the tigger).

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    The picker itself should be in views, config. etc.. the controller should handle the actions.

    The idea of MVC is to structure your code so you or anyone else can read your code and know right away where look.

    For the custom picker:
    I would create a new JS under app/view/field
    Then your view for editing should use field in requires:[]
    And the controller for the edit view would contain the action.

    Scott.

  6. #6
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


    This thread helps me a lot but i've a problem with a reference error.

    I'm using 4.1.1 and Architect, this is my code

    In myView:
    PHP Code:
    {
          
    xtype'combobox',
          
    onTriggerClick: function(e) {
                      
    this.fireEvent("ontriggerclick"thisevent);
          },
          
    itemId'ricChiam',
          
    fieldLabel'Chiamante',
          
    labelWidth60,
          
    hideTriggerfalse,
          
    triggerCls'x-form-clear-trigger',
          
    displayField'chiamante',
          
    store'StoreChiamanti',
          
    valueField'id'

    In myControler onLaunch function:

    PHP Code:

    this
    .getRicercaChiamanteFiltri().on({
        
    'select'this.funcion1,
        
    'ontriggerclick'this.function2,
        
    scopethis
    }); 
    select event works properly (function1) in firebug i've an error 'ontriggerclick' "event is not defined"