How to call a parent panel function from inside controller

[d.m]

One year of programming in ExtJS and still cannot figure this simple thing out properly...

I have a master panel with charts ('MyApp.view.dashboard.MainPanel') which contains some functions.
Inside this main panel, there are second-level panels, which in turns contain the actual charts panels.
I need to make the REFRESH button of these charts call the functions of MainPanel.

Something like this in my dashboard.js:

Ext.define('MyApp.view.dashboard.BaseChart',{
    xtype: 'basechart',
    ...
    tools: [{
        type: 'refresh',
        tooltip: 'refresh',
        callback: 'onChartRefreshClicked'
    }]
}

Ext.define('MyApp.view.dashboard.MainPanel', {
    ...

    mainPanelFunction: function(...) {
        ...
    },

   items: [{
        //first subpanel
        ...
        items: [{
            //first chart
            xtype: 'basechart',
            ...
         }, {
            //second chart
            xtype: 'basechart',
            ...
         }]
    }, {
        //second subpanel
        ...

In my dashboardcontroller.js:

Ext.define('MyApp.view.dashboard.ChartsController', {
    ...
    onChartRefreshClicked: function(panel){
        ??????
    }

What is the correct syntax inside onChartRefreshClicked to call mainPanelFunction???

[d.m]

And once again, if I don't post here it's not working, but as soon as I post, I figure it out myself... :/

The solution was: panel.up('mainpanel').mainPanelFunction() where 'mainpanel' is actually the xtype of MainPanel.

[Gary Schlosberg]

Funny how that is -- there must be something about the process of writing up a forum post, or perhaps it's just Murphy's Law. Thanks for posting your solution for the community.

[jfconde]

And once again, if I don't post here it's not working, but as soon as I post, I figure it out myself... :/

The solution was: panel.up('mainpanel').mainPanelFunction() where 'mainpanel' is actually the xtype of MainPanel.

I know I come here too late. Well, actually the forum is filled with spam messages, so it's not so bad to re-up this thread.

Please, do not use .up() on components. It's just a bad practice, which also couples your views and components tightly, making them harder to reuse, change and test.

A more correct and elegant version of your code could be made following an event-oriented pattern:

- The charts should fire an event, for example 'chartrefresh'. You can fire the event from the view or the controller. Be careful when listening to controller events, since your listeners by default will be called for every event fired by an instance of a controller which matches the selector used. This means that if you are listening to a '#charts' controller, a chart in a completely different view in your app would trigger the listener, whereas listening to components (listen: { component: { ) in a ViewController is restricted to the instance of the view using that controller and its (recusrive) children.

Ex:

onChartRefreshClicked: function(panel){
// Follow ext schema by passing the instance of the component firing the event as first param.
this.getView().fireEvent('chartrefresh', this.getView(), <optional info (parameters) to pass in the event>);
}

- Your MainPanel controller listens to the event 'chartrefresh' fired by 'basechart' (xtype) components.

Ex:

In your MainPanelController, which extends from ViewController

listen: {
component: {
basechart: 'onBaseChartRefreshed'
}
},

...


onBaseChartRefreshed: function (basechart, <optional args passed from the event>) {
// Perform your logic, for example...
this.getView().mainPanelFunction (); // This should be in the ViewCtrl too, leave the View as declarative configuration if using Ctrls.
}

Using this approach you can reuse your basecharts everywhere. if the event does not need to be listened to, then nothing will happen, whereas when you're using up(...).someFunction() this will result in a red Error in the console, the rest of the code not being executed and unexpected behaviours.