Results 1 to 9 of 9

Thread: PR3 verses PR4 ref problem (I think)

  1. #1
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    833
    Vote Rating
    25
      0  

    Default PR3 verses PR4 ref problem (I think)

    somehow, my Getters are not being defined for the code below when I try to access them in the function onTapCompanyButton. I attached 2 screen shots of the debugger showing this. One linking to pr3 lib's and one linking to pr4s.

    thanks

    Code:
    Ext.define('Myapp.controller.Main', {
        extend: 'Ext.app.Controller'
    
    
        views: [
                'Viewport',
                'Welcomescreen',
                'Sectionslist',
                'RecipientListTabs'
            ],
    
    
        models: [
                'Sections'
            ],
    
    
        stores: ['Sections'],
    
    
        refs: {
            ref: 'recipientListTabs',
            selector: 'recipientlisttabs',
            xtype: 'recipientlisttabs',
            autoCreate: true
        },
    
    
        init: function () {
            this.control({
                'button[action=CompanyButton]': {
                    tap: 'onTapCompanyButton'
                },
                'button[action=ADButton]': {
                    tap: this.onTapADButton
                }
            })
        },
    
    
        onTapCompanyButton: function () {
            debugger;
            console.log('onTapCompanyButton');
            var tabPanel = this.getRecipientListTabs();
            tabPanel.setActiveItem(1);
        },
    
    
    
    
        onTapADButton: function () {
            console.log('onTapADButton');
            var tabPanel = this.getRecipientListTabs();
            tabPanel.setActiveItem(2);
        },
        onLaunch: function () {
            console.log('onLaunch');
            var tabPanel = this.getRecipientListTabs();
            tabPanel.getTabBar().hide();
        }
    
    
    });
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Location
    Brazil
    Posts
    106
    Vote Rating
    0
      0  

    Default

    refs should be inside config

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
      0  

    Default

    Refs changed significantly from PR3 to PR4. You are using the old approach.

    Code:
    refs: {
        infoButton: 'mainview #infobutton',
        settings: 'mainview settingsview'
    }
    This will result in getInfoButton() and getSettings() being defined. More complex examples are specified in the documentation.

  4. #4
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Vote Rating
    7
      0  

    Default

    Yeah, everything needs to be inside the config: {} block, including control.

    Code:
    Ext.define('MyApp.controller.MyController', {
        extend: 'Ext.app.Controller',
    
        config: {
            control: {
                'button': {
                    tap: 'foo'
                }
            }
        },
    
        foo: function() {
            console.log('foo');
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    833
    Vote Rating
    25
      0  

    Default Still confused on what to put in config block

    does everything mean views, models, functions, etc.?

    Code:
    Ext.define('Myapp.controller.Main', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            views: [
                'Viewport',
                'Welcomescreen',
                'Sectionslist',
                'RecipientListTabs'
            ],
    
    
            models: [
                'Sections'
            ],
    
    
            stores: ['Sections'],
    
    
            refs: {
                ref: 'recipientListTabs',
                selector: 'recipientlisttabs',
                xtype: 'recipientlisttabs',
                autoCreate: true
            },
    
    
            init: function () {
                this.control({
                    'button[action=CompanyButton]': {
                        tap: 'onTapCompanyButton'
                    },
                    'button[action=ADButton]': {
                        tap: this.onTapADButton
                    }
                })
            },
    
    
            onTapCompanyButton: function () {
                debugger;
                console.log('onTapCompanyButton');
                var tabPanel = this.getRecipientListTabs();
                tabPanel.setActiveItem(1);
            },
    
    
    
    
            onTapADButton: function () {
                console.log('onTapADButton');
                var tabPanel = this.getRecipientListTabs();
                tabPanel.setActiveItem(2);
            },
            onLaunch: function () {
                console.log('onLaunch');
                var tabPanel = this.getRecipientListTabs();
                tabPanel.getTabBar().hide();
            }
        }
    
    
    });

  6. #6
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
      0  

    Default

    If you want to get your app up and running, move the models, stores, and views arrays outside of config, but still in the controller.

    I read the new guides and the examples in the guides show that these arrays should be in the app configuration and not the controller configuration. However, when I tried that, I lost the get[ViewName]View() methods.

    My guess is that this is still being sorted out for final release.

  7. #7
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    833
    Vote Rating
    25
      0  

    Default app config?

    wouldnt that make multiple controllers bulky.

  8. #8
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    833
    Vote Rating
    25
      0  

    Default

    So here is what finally works. I tested and you can put views,models and stores in either the controller or he app file. I prefer the controller so your app file does not get too bloated (assuming you have multiple controllers per app).

    Here is my final controller file that works in PR4: (with one button)

    Code:
    Ext.define('Myapp.controller.Main', {
        extend: 'Ext.app.Controller',
    
    
        views: [
                'Viewport',
                'Welcomescreen',
                'Sectionslist',
                'RecipientListTabs'
            ],
    
    
        models: [
                'Sections'
            ],
    
    
        stores: ['Sections'],
    
    
        config: {
            control: {
                companyTabButton: {
                    tap: 'onTapCompanyButton'
                }
            },
    
    
            refs: {
                companyTabButton: 'button[action=CompanyButton]',
                recipientlisttabs: 'recipientlisttabs'
            }
        },
    
    
        onTapCompanyButton: function () {
            var tabPanel = this.getRecipientlisttabs();
            tabPanel.setActiveItem(1);
        }
    
    
    });

  9. #9
    Sencha User edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    11
      0  

    Default

    The reason for this split is that defining models, views and stores inside a Controller is deprecated as a bad approach. There is no real mapping between controllers and any of those things - what 1.x did was a mishmash of dependency specification and dubious convenience functions.

    To keep that behavior I added backwards compatibility logic for the models, views and stores as specified in 1.x (e.g. outside the config block), and have it throwing warnings that it's not a good approach.

    Rather than this.getSomeStore() we recommend simply Ext.getStore('SomeId'), rather than this.getUserModel() just reference the model name (e.g. MyApp.model.User), same with views. Aside from the file size and performance penalties, these functions were confusing to many and simply didn't add enough value to justify bringing them across to Touch 2.

    If you look in the docs you'll see those old configs aren't actually there any more
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

Posting Permissions

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