1. #1
    Sencha User a_arias's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Answers
    1
    Vote Rating
    0
    a_arias is on a distinguished road

      0  

    Default Answered: How do you get the viewport from within a controller method?

    Answered: How do you get the viewport from within a controller method?


    Hello!

    How do you select the viewport from within a controller method? I have a navigation widget that fires an custom event when a link is clicked. I would like to be able to add and remove components to and from the viewport based on the link that was clicked. For example, when the user clicks on "Brand" the "Home" component should be replaced with the "Brand" component. Neither link.up('viewport') or this.getView('Viewport') work as expected.

    Below is the relevant code code:

    As always, any help is much appreciated.

    /ext-ui/app/view/Viewport.js:
    Code:
    Ext.define('FashionHelper.view.Viewport', {
        extend: 'Ext.Panel',
    
    
        requires: [
            'FashionHelper.view.Navigation',
            'FashionHelper.view.Home'
        ],
    
    
        initComponent: function() {
            this.items = [{
                xtype: 'navigation'
            }, {
                xtype: 'home'
            }];
            
            this.callParent(arguments);
        }
    });
    /ext-ui/app/controller/Navigation.js:
    Code:
    Ext.define('FashionHelper.controller.Navigation', {
        extend: 'Ext.app.Controller',
    
    
        views: ['Navigation'],
    
    
        refs : [{
            ref: 'navigationView',
            selector: 'navigation'
        }],
    
    
        init: function(application){
            console.log('controller init');
            this.control({
                'navigation': {
                    'golocale': this.goLocale,
                    'gobrand': this.goBrand,
                    'gosize': this.goSize,
                    'goarticle': this.goArticle,
                    'gogender': this.goGender,
                    'goprofile': this.goProfile,
                    scope: this
                }
            });
        },
    
    
        goLocale: function(link){
            console.log('locale clicked');
            console.dir(link);
        },
    
    
        goBrand: function(link){
            console.log('brand clicked');
            // Also tried:
            // var viewport = this.getView('Viewport').create();
            var viewport = link.up('viewport');
            console.dir(viewport);
        },
    
    
        goSize: function(link){
            console.log('size clicked');
        },
    
    
        goArticle: function(link){
            console.log('article clicked');
        },
    
    
        goGender: function(link){
            console.log('gender clicked');
        },
        
        goProfile: function(link){
            console.log('profile clicked');
        }
    });
    /ext-ui/app/view/Home.js:
    Code:
    Ext.define('FashionHelper.view.Home', {
        extend: 'Ext.container.Container',
        alias: 'widget.home',
        width: 500,
        height: 400,
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        autoRender: true,
        autoShow: true,
    
    
        initComponent: function(){
            
            this.items = [{
                xtype: 'component',
                autoEl: {
                    tag: 'p',
                    html: 'Lorem Ipsum is simply dummy text'
                }
            }];
    
    
            this.callParent(arguments);
        }
    });
    /ext-ui/app/view/Brand.js:
    Code:
    Ext.define('FashionHelper.view.Brand', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.brandFormGrid',
        width: 500,
        height: 400,
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        autoRender: true,
        autoShow: true,
    
    
        initComponent: function(){
            
            this.items = [{
                xtype: 'component',
                autoEl: {
                    tag: 'p',
                    html: 'Here we will load the brand grid/form component'
                }
            }];
    
    
            this.callParent(arguments);
        }
    });

  2. You need to specify the alias config on your FashionHelper.view.Viewport class like:

    Code:
    alias: 'widget.fashionhelper-viewport'
    And then add it to your refs array in your Controller so you can get the getter.

  3. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,663
    Answers
    130
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    i would probably put the viewport under views and refs inside of the controller.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  4. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    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


    You need to specify the alias config on your FashionHelper.view.Viewport class like:

    Code:
    alias: 'widget.fashionhelper-viewport'
    And then add it to your refs array in your Controller so you can get the getter.
    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.

  5. #4
    Sencha User a_arias's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Answers
    1
    Vote Rating
    0
    a_arias is on a distinguished road

      0  

    Default Great idea!

    Great idea!


    Thanks for the quick reply. I tried you suggestion and it worked perfectly. By defining the refs, getter and setter function automatically become available in "this". Below is my revised controller in case anyone else needs to know:

    /ext-ui/app/controller/Navigation.js:
    Code:
    Ext.define('FashionHelper.controller.Navigation', {
        extend: 'Ext.app.Controller',
    
    
        refs : [{
            ref: 'navigationView',
            selector: 'navigation'
        }, {
            ref: 'portalView',
            selector: 'portal'
        }, {
            ref: 'brandView',
            selector: 'brand'
        }, {
            ref: 'homeView',
            selector: 'home'
        }],
    
    
        init: function(application){
             .....
        },
    
        ....
    
    
        goBrand: function(link){
            var portal = this.getPortalView();
            portal.removeAll(true);
            portal.add(this.getBrandView());
        },
    
            ....
    });
    Last edited by a_arias; 13 Nov 2011 at 6:21 PM. Reason: fixed typo in goBrand function

  6. #5
    Sencha User a_arias's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Answers
    1
    Vote Rating
    0
    a_arias is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You need to specify the alias config on your FashionHelper.view.Viewport class like:

    Code:
    alias: 'widget.fashionhelper-viewport'
    And then add it to your refs array in your Controller so you can get the getter.
    mitch, your right and that's pretty much exactly what I did. Thanks guys!

  7. #6
    Sencha User a_arias's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Answers
    1
    Vote Rating
    0
    a_arias is on a distinguished road

      0  

    Question portal.add(brandView) not working as expected

    portal.add(brandView) not working as expected


    I seem to be misunderstanding something. I guess I replied too hastily. I had to do some re-factoring to my component structure and layout because I was not able to removeAll components from the viewport without removing my navigation widget.

    So, I created a Portal view and added the Home component in the items list.

    /ext-ui/app/view/Portal.js:
    Code:
    Ext.define('FashionHelper.view.Portal', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.portal',
        autoRender: true,
        autoShow: true,
        autoDestroy: true,
        title: 'Admin Portal',
    
    
        requires: [,
            'FashionHelper.view.Home',
            'FashionHelper.view.Brand'
        ],
    
    
        initComponent: function(){
            
            this.items = [{
                xtype: 'home'
            }];
    
    
            this.callParent(arguments);
        }
    });
    Next, I replaced the Home container in the viewport's items list with the Portal widget.

    /ext-ui/app/view/Viewport.js:
    Code:
    Ext.define('FashionHelper.view.Viewport', {
        extend: 'Ext.Panel',
        alias: 'widget.viewport',
    
        requires: [
            'FashionHelper.view.Navigation',
            'FashionHelper.view.Portal'
        ],
    
        initComponent: function() {
            this.items = [{
                xtype: 'navigation'
            }, {
                xtype: 'portal'
            }];
            
            this.callParent(arguments);
        }
    });
    Then, in my controller I defined view refs and call upon them to do what I would describe as DOM manipulation in the jQuery lexicon.

    /ext-ui/app/controller/Navigation.js:
    Code:
    Ext.define('FashionHelper.controller.Navigation', {
        extend: 'Ext.app.Controller',
    
    
        refs : [{
            ref: 'navigationView',
            selector: 'navigation'
        }, {
            ref: 'portalView',
            selector: 'portal'
        }, {
            ref: 'brandView',
            selector: 'brand'
        }, {
            ref: 'homeView',
            selector: 'home'
        }],
    
        init: function(application){
            ...
        },
    
        goLocale: function(link){
            console.log('locale clicked');
            console.dir(link);
        },
    
        goBrand: function(link){
            var portal = this.getPortalView();
            var brandView = this.getBrandView();
            portal.removeAll(true);
            portal.add(brandView);
        },
        ...
    });
    For some reason, I am able to removeAll items from the Portal view but I am not able to add the Brand component. I get the following error in the console:

    Code:
    Uncaught TypeError: Cannot read property 'xtype' of undefined

  8. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    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


    The xtype 'viewport' is used by Ext.container.Viewport but you are trying to define it to your FashionHelper.view.Viewport class. You should not do this.
    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.

  9. #8
    Sencha User a_arias's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Answers
    1
    Vote Rating
    0
    a_arias is on a distinguished road

      0  

    Default change viewport alias. still no

    change viewport alias. still no


    I changed the viewport alias as you suggested. Still, I get the same error when I try to add components to the Portal view. I can remove components fine.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar