How to call controller's function from a view

[gnidhi]

I am trying to build a search ui. On top it has a search bar. Whenever user clicks on trigger button it will reload the page with new search results. This is the code of my view


Ext.define('FV.view.ux.SearchField', {
extend: 'Ext.form.field.Trigger',

alias: 'widget.searchfield',

trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',

trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',

hasSearch : false,
paramName : 'query',

initComponent: function(){
this.callParent(arguments);
//this.on('specialkey',this.checkEnterKey, this);
},

afterRender: function(){
this.callParent();
this.triggerEl.item(0).setDisplayed('none');
},

onTriggerClick: function(){
this.application.getController('Feeds').checkEnterKey();
// FV.controller.Feeds.prototype.checkEnterKey(arguments);
FV.view.ux.SearchField.superclass.onTriggerClick.apply(this, arguments);
}
});

I am following MVC architecture. So I want to call my controller's checkEnterkey's function whenever user hits the trigger. Controller:

Ext.define('FV.controller.Feeds', {
extend : 'Ext.app.Controller',

stores : [ 'Feeds', 'Articles' ],
models : [ 'Feed' ],
views : [ 'feed.Add','feed.List','ux.SearchField' ],

refs : [
{
ref : 'searchField',
selector : 'searchfield'
}
],

init : function() {
this.control({
'searchfield' : {
specialkey :this.checkEnterKey
}
});
},

onLaunch : function() {

},

checkEnterKey : function(field, e){
var searchField=this.getSearchField();
var value = searchField.getValue();

console.log("query=" + value);
if (e.getKey() === e.ENTER && !Ext.isEmpty(value)) {

var resultstore = this.getArticlesStore();
var facetquery=[];
var senderpan=Ext.ComponentQuery.query('form[title="SenderName"] checkboxgroup');
var senderchecked=senderpan[0].getChecked();
Ext.Array.each(senderchecked,function(obj){
facetquery.push("senderName:\""+obj.name+"\"");
console.log(obj.name);
});

var topan=Ext.ComponentQuery.query('form[title="To"] checkboxgroup');
var tochecked=topan[0].getChecked();
Ext.Array.each(tochecked,function(obj){
facetquery.push("to:\""+obj.name+"\"");
console.log(obj.name);
});
var folderpan=Ext.ComponentQuery.query('form[title="Folder"] checkboxgroup');
var folderchecked=folderpan[0].getChecked();
Ext.Array.each(folderchecked,function(obj){
facetquery.push("folder:\""+obj.name+"\"");
console.log(obj.name);
});


resultstore.proxy.extraParams = {
q : value,
wt : 'json',
hl : 'on',
fq :facetquery,
// 'hl.fl' : 'description',
'json.nl' : 'arrarr'
};
resultstore.load();

Ext.getCmp('gridid').bindStore(resultstore);
Ext.getCmp('paging').bindStore(resultstore);


}
}

});

I tried with this.getController() in my searchfield view but it gives me error that this.getController is not a function. Then I tried using prototype FV.controller.Feeds.prototype.checkEnterKey then i was not able to refer to my searchfiled, got the following error
this.getSearchField is not a function

I checked the documentation of Ext.form.field.Trigger but I didn't find the trigger event :(

[findajit]

@gnidhi

I think a cleaner approach would be:

Fire a custom event, say - customtriggerclicked - within the onTriggerClick
Register the handler for the customtriggerclicked in the controller this.control()

In case, you have you trigger field sitting inside a form panel, then the steps would be:

Fire a custom event, say - customtriggerclicked - within the onTriggerClick
Relay the customtriggerclicked from the form panel (so that the controller thinks as if the event is coming from the form panel rather than the trigger field)
Register the handler for the customtriggerclicked on the form panel (the view) that the controller is managing

Regards
Ajit

[gnidhi]

@ajit

Thanks for the reply. Hope you remember me. I once attended a training conducted by you.
My code started working . I added the following change..

in view

onTriggerClick: function(){
this.fireEvent('tryevent');

FV.view.ux.SearchField.superclass.onTriggerClick.apply(this, arguments);
}

In controller

init : function() {
this.control( {
'searchfield' : {
specialkey :this.checkEnterKey
},
'searchfield' : {
'tryevent' :this.checkEnterKey
}
});
}

[findajit]

good to learn that you have got your code working as expected! And, yeah I do remember you! It's a small world!

[arvindwill]

what is the use of below code in the snipplet ?

FV.view.ux.SearchField.superclass.onTriggerClick.apply(this, arguments);