Results 1 to 7 of 7

Thread: Call a viewController's function from summaryRenderer

  1. #1
    Sencha User
    Join Date
    Nov 2014
    Location
    France
    Posts
    5

    Default Call a viewController's function from summaryRenderer

    I would like to call a function from my summaryRenderer but i don't know how to access my viewController. Any idea how to achieve this?

    Since my controller is registered at the beginning of the file, I thought this could work (but it doesn't):

    Code:
    {
                        xtype: 'gridcolumn',
                        summaryRenderer: function(val, params, data) {
                            return createHtml(myParameters);
                        },
                        summaryType: 'sum',
                        baseCls: 'x-header-col1',
                        align: 'right',
                        dataIndex: 'col1',
                        text: 'Col1'
                    }

  2. #2
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    Getting a Controller reference :

    var wellTestController = AEGMobile.app.getController('WellTestController');
    var refvarName = AppName.appNameSpace.getController('controllerName')

    Or you can reference it directly, AEGMobile.controller.WellController Here is how My controllers appear as in the Global Stack...

    Screen Shot 2014-12-03 at 6.36.09 AM.png

    As far as what you are doing with the renderer, if you can execute your function (assuming it is configured to run correctly) then you can get a reference to the Controller.

    HOWEVER - Have you considered firing an Event instead of getting a Reference from the method?

    If asynchronous behavior doesn't matter to you, you can use Events effectively to pass data and perform handoff's to other objects.

    Here is one way to to this...

    In the Init of the Listening Object - This is from another controller
    //Fired from WellTestJSONStore
    application.addListener('WellTestRefreshEvent',this.wellTestReplication, this);


    OR from a class outside of a controller...
    AEGMobile.app.addListener('ReplicationCompletedLocalUpdateEvent',this.replicationCompletedLocalUpdate, this);

    To fire one of these events, I do this...
    AEGMobile.app.fireEvent('WellTestRefreshEvent',eventArgs);

    Hope this helps - if you are going to use Events, then cleanup after you use them and Remove the Event Listeners you use only once - they add to the memory requirements

    Cheers,

    Curtis

  3. #3
    Sencha User
    Join Date
    Nov 2014
    Location
    France
    Posts
    5

    Default

    Thanks for your answer curtis.fisher

    I don't want to fire an event only to call a function... It seems really weird to me.

    I tried :
    Code:
    summaryRenderer: function(val, params, data) {
    var controller = MyApp.app.getController('mycontroller');
    var html = controller.createHtml(myParameters);
    return html; }
    but it didn't work. Maybe it is because I try to get a 'ViewController' and not a 'Controller'

    Anyway I managed to call my function using this:
    Code:
    summaryRenderer: function(val, params, data) {
    var html = this.up('myview').getController().createHtml(myParameters);
    return html;
    }
    Tell me if you think it is a bad practice.

  4. #4
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    Best Practices? Brother, I am trying to figure that out myself!

    Honestly? Best Practices are to use Events instead of references in many Event Driven Frameworks, but Sencha uses Reference Variables as Config Objects. These are what you use as the traditional "handle" to whatever Object you want to access. They promote this in their courseware , but also they do emphasize that Events are the "Backbone" of the Framework. So maybe you will see this as you deep dive into the product.

    If it seems a bit strange to use Events then consider logic dependencies that may end up in the code before you have completed a method. In other words, asynchronous behavior may rear it's ugly head and you may find your code trying to work with data that either doesn't exist yet, or needs to have an Action completed before continuing. Events are the ultimate "Decoupler" when it comes to Objects talking to each other, and once you start pulling data, they will be your friend...

    Okay, that's all I have to say about Events, and I think you may have a case of "Case" being the real issue why you cannot find the Controller.
    Code:
    var controller = MyApp.app.getController('mycontroller');
    
    Is it possible you Controller Name is...
    Code:
    var controller = MyApp.app.getController('myController');
    or some other name?
    Try this...
    1. Open up the Debugger in Chrome, set a breakpoint on your method and run the app up to that point.
    2. Look at your Global Stack (Scope Variables) to find something like this...
    3. Screen Shot 2014-12-03 at 6.36.09 AM.png
    4. Do you see your controller Name in your Stack?
    5. While paused in debugger, go to the Console and type in MyApp.app.getController('The Exact Controller Name that shows in your Global Stack')
    6. You should see something like this...
    7. Screen Shot 2014-12-04 at 6.59.15 AM.jpg
    That my Friend, is my Controller. It works for me and I'm not sure why it won't work for you except that the Name is not correct. Controllers are singletons and they are right at the top of the object lifecycle.

    So give this a try if Events are a bit quirky to you at this stage.

    Cheers,

    Curtis

  5. #5
    Sencha User
    Join Date
    Nov 2014
    Location
    France
    Posts
    5

    Default

    debug.jpg

    Here is what I got. I am using a ViewController and not a Controller. I think this is why I can't see a Global Controller (because it doesn't exist)
    I have a 'controllers' under 'app' but its empty

    I tried
    Code:
    MyApp.app.getController('createsession')
    
    in the debugger but it is '<not available>'

    This is the definition of my controller.
    Code:
    Ext.define('MyApp.view.CreateSessionViewController', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.createsession',
    Thx for your answers and your help!

    Bastien

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    I am not certain how you are using a ViewController (This pattern is known as MVVM) because it is not a MVC pattern which Sencha Touch does not support at this time.

    If this is an Ext JS 5.x project, and not a Touch project, then I haven't experienced using that pattern. I do know that controllers under an MVVM pattern are not Global, but are used for each View as an instance to be garbage collected if it is not being used.

    I'm out of my element to assist you with this, as I have to research Touch related stuff and have just began to have enough knowledge to give an informed answer.

    Read everything concerning MVVM in the documentation for Ext JS 5.x and you will find the answer.

    This is a good starting point...
    http://www.sencha.com/blog/using-vie...rs-in-ext-js-5

    Sincerely,

    Curtis

  7. #7
    Sencha User
    Join Date
    Nov 2014
    Location
    France
    Posts
    5

    Default

    My project is an Ext JS 5.x project and I am using MVVM pattern. I should have specify.

    Thanks for your time.

    Regards,Bastien

Tags for this Thread

Posting Permissions

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