1. #1
    Sencha User mbarrot's Avatar
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    8
    Vote Rating
    2
    mbarrot is on a distinguished road

      0  

    Default Answered: [ST RC] Lost reference to carousel component in controller

    Answered: [ST RC] Lost reference to carousel component in controller


    Hi, something happened between B3 and RC that caused my controller code to loose track of an embedded carousel component within a view.

    The view looks like:
    Code:
    Ext.require ('Ext.carousel.Carousel');
    Ext.define ('fn.view.NewsBrowser', {
       extend: 'Ext.Container',
       alias: 'widget.newsbrowser',
       config: {
          layout: 'card',
          cls: 'newsbrowser',
          items: [
             {
                ...
             },
             {
                xtype: 'carousel',
                cls: 'newscarousel',
                indicator: false,
                items: [
                   {                                                                
                      ...
                   },
                   ...
                ]
             }
          ]
       },
       ...
    });
    The controller looks like
    Code:
    Ext.define ('fn.controller.Main', {
       extend: 'Ext.app.Controller',
       config: {
          refs: {
             ...
             newsCarousel: 'carousel[cls="newscarousel"]',
             ...
          },
       },
       someMethod: function () {
          var carousel = this.getNewsCarousel ();
          ...
       },
       ...
    });
    With ST2 Beta 3, this.getNewsCarousel () returns a reference to the carousel component, as I expected.

    With ST2 RC, this.getNewsCarousel () returns undefined, which I definitely didn't expect :-)

    I may have missed something in the ComponentQuery syntax - being rather new to Ext and ST - then again, something may have shifted surreptitously between ST releases.

    I'd be very grateful if someone with more ST experience could check this out. Thanks in advance.

    Marc

  2. All configs in the config object get a getter and a setter (and use apply and update) methods. The actual property these use gets an underscore prefixed so cls becomes _cls but due to some addition logic int he apply or update the _cls property becomes an Array. So there is no cls property, there is a _cls that is an array.

    But if you pass in a custom property when you create the carousel then that config won't be touched like the cls config would.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    First thing, you view should look like this instead:

    Code:
    Ext.define ('fn.view.NewsBrowser', {
       extend: 'Ext.Container',
       xtype: 'newsbrowser',
    
        requires : [ 'Ext.carousel.Carousel' ],
    
       config: {
          layout: 'card',
          cls: 'newsbrowser',
          items: [
             {
                ...
             },
             {
                xtype: 'carousel',
                cls: 'newscarousel',
                indicator: false,
                items: [
                   {                                                                
                      ...
                   },
                   ...
                ]
             }
          ]
       },
       ...
    });
    Your ComponentQuery can simple be:

    Code:
    carousel[cls=newscarousel]
    Not saying this will solve your issue, just some things that jumped out at me
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User mbarrot's Avatar
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    8
    Vote Rating
    2
    mbarrot is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Not saying this will solve your issue, just some things that jumped out at me
    Hi Mitchell, thanks for the quick answer.

    So I moved the 'requires' statement inside the NewsBrowser view, and removed the double-quotes from the ComponentQuery string.

    The code looks cooler, unfortunately, the result is the same: works great in Beta3, throws an error in RC:
    TypeError: 'undefined' is not an object (evaluating 'carousel.setActiveItem')
    The ComponentQuery still fails and returns undefined. Weird.

    The parent 'newsbrowser' component is itself embedded into a 'tabpanel', which is included in a 'vbox', which makes one of the cards of the app's main view. That's quite some embedding :-)

    Unless you can think of something quickly, my next step (tomorrow in London) is to try to replicate this issue in a test app, with a simpler layout, and see what's happening.

  5. #4
    Sencha User mbarrot's Avatar
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    8
    Vote Rating
    2
    mbarrot is on a distinguished road

      0  

    Default


    Quote Originally Posted by mbarrot View Post
    Unless you can think of something quickly, my next step (tomorrow in London) is to try to replicate this issue in a test app, with a simpler layout, and see what's happening.
    Ok, so extracting the view from the rest of the whole application didn't make any difference. I can replicate the problem every time. Given this view:
    Code:
    Ext.define ('fn.view.NewsBrowser', {
       extend: 'Ext.Container',
       xtype: 'newsbrowser',
       requires: ['Ext.carousel.Carousel'],
       config: {
          layout: 'card',
          cls: 'newsbrowser',
          items: [
             {
                layout: 'vbox',
                id: 'browserlist',
                items: [
                   { xtype: 'indicator', size: 13, position: 1 },
                   { xtype: 'newslist', flex: 1 }
                ]
             },
             {
                xtype: 'carousel',
                cls: 'newscarousel',
                indicator: false,
                items: [
                   {
                      ...
                   },
                   ...
                ]
             }
          ]
       },
       ...
    });
    With ST RC, browser.down ('carousel[cls=newscarousel]') returns null, whereas browser.down ('carousel') returns the expected carousel object.
    Screen Shot 2012-02-27 at 2.36.51 PM.png
    Screen Shot 2012-02-27 at 2.56.33 PM.png

    With ST beta 3, both ComponentQuery requests return the very same carousel object, as expected.

    This is not a big issue for our current app development effort as we can tweak the ComponentQuery request as needed for a work-around, but I think someone in the ST dev team should take a quick glance, it looks unwholesome. Let me know if there's any way we can help.

    Cheers

    Marc

  6. #5
    Sencha User mbarrot's Avatar
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    8
    Vote Rating
    2
    mbarrot is on a distinguished road

      0  

    Default


    I checked quickly with the newly released RC2, the problem is still here. Marc

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is because there is no cls property on the carousel. You should add a custom property instead of using cls as it is changed due to the getter/setter system.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha User mbarrot's Avatar
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    8
    Vote Rating
    2
    mbarrot is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    This is because there is no cls property on the carousel. You should add a custom property instead of using cls as it is changed due to the getter/setter system.
    I'm sorry Mitchell, I'm missing something here.

    Do carousel components have a special use of the 'cls' property ? How is it 'changed due to the getter/setter system' ? I also do not understand why the behaviour changed between Beta 3 and RC/RC2.

    I've already changed the app code to use a custom property, but I'm trying to improve my understanding of and proficiency in ST2 here, so please bear with me :-)

    Cheers

    Marc

  9. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    All configs in the config object get a getter and a setter (and use apply and update) methods. The actual property these use gets an underscore prefixed so cls becomes _cls but due to some addition logic int he apply or update the _cls property becomes an Array. So there is no cls property, there is a _cls that is an array.

    But if you pass in a custom property when you create the carousel then that config won't be touched like the cls config would.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1