Results 1 to 4 of 4

Thread: How to call a parent panel function from inside controller

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2015
    Posts
    138
    Answers
    3

    Default How to call a parent panel function from inside controller

    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:

    Code:
    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:

    Code:
    Ext.define('MyApp.view.dashboard.ChartsController', {
        ...
        onChartRefreshClicked: function(panel){
            ??????
        }
    What is the correct syntax inside onChartRefreshClicked to call mainPanelFunction???

  2. #2
    Sencha Premium Member
    Join Date
    Oct 2015
    Posts
    138
    Answers
    3

    Default

    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.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    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.

  4. #4
    Sencha User
    Join Date
    Jul 2017
    Posts
    7

    Default

    Quote Originally Posted by d.m View Post
    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.

Similar Threads

  1. Replies: 2
    Last Post: 30 May 2014, 6:41 AM
  2. Replies: 1
    Last Post: 26 Jul 2012, 4:24 AM
  3. Replies: 7
    Last Post: 16 Jul 2012, 11:10 PM
  4. Can't call another function inside a controller
    By bagusflyer in forum Sencha Touch 2.x: Discussion
    Replies: 4
    Last Post: 2 Jan 2012, 4:50 PM
  5. call function inside panel with add?
    By myput in forum Sencha Touch 1.x: Q&A
    Replies: 1
    Last Post: 17 Nov 2011, 12:19 PM

Posting Permissions

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