1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default Dynamically create a panel inside a controller

    Dynamically create a panel inside a controller


    I encountered another problem: the panel I created in my controller doesn't show up. Here is my code:

    app.js

    Code:
    Ext.Loader.setConfig({
        enabled : true,
        paths   : {
            Override : 'overrides'
        }
    });
    Ext.application({
        name: 'App',
        autoCreateViewport: true,
        models: ['User'],    
        stores: ['MyProfile'],
        controllers: ['Root'],
        init: function () {
            console.log('app initialize');
        },    
        launch: function() {              
            console.log('app launch');
        }
    });
    Root.js (controller)

    Code:
    Ext.define('App.controller.Root', {
        extend: 'Ext.app.Controller',
        
        stores: ['MyProfile'],
            
        init: function() {
            console.log('init root controller');
        },
        
        onLaunch: function() {
            console.log('onLaunch root controller');
    
    
            var store = App.store.myProfile;
            if ( store )
            {
    //            store.load();
                if ( store.first() )
                {
                   // do something
                    return;
                }
            }
            
            this.showProfile();
        },
        
        showProfile: function() {
            console.log('Show user profile');
            
            var panel = Ext.create('Ext.Panel', {
                html: 'This is my panel'
            });
            Ext.Viewport.add(panel);
        },
        }
        
    });
    Viewport.js

    Code:
    Ext.define('App.view.Viewport', {
        extend : 'Ext.Panel',
        xtype  : 'app-viewport',
        config : {
            fullscreen : true,
            layout     : 'card',
    
    
            items: 
            [{
                xtype        : 'toolbar',
                docked       : 'top',
                title        : APPNAME,
                items        : 
                [{
                    ui     : 'action',
                    itemId : LEFTBTN,
                },{xtype:'spacer'},
                {
                    ui     : 'action',
                    itemId : RIGHTBTN,
                }]
            }]
        }
    });
    The showProfile function is called but the new panel is never show up.Can anybody help? What's wrong with my code? Thanks.

    I found the most difficult part of Sencha touch is the relationship of different element. It's too flexible. For example, you create a panel, you can use Ext.create, or something like define then config: {} etc. I've spent 1 week at 1.1 and now at 2.0 and I got totally no clue at all.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,329
    Vote Rating
    847
    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


    Ext.Viewport is basically a container using card layout. Since you have autoCreateViewport set to true, it will automatically create the App.view.Viewport class and since it has fullscreen to true is should be added to Ext.Viewport as the first card. Now when you create your Ext.Panel in showProfile and use Ext.Viewport.add to add it, it is probably added as the 2nd card. Inspect the DOM to make sure that's what is going on. You will need to switch to the new card you added.
    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.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    Actually my intension was to add the panel to my own viewport. Can I use use App.view.Viewport to add new panel? Thanks

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    I got the following error message if I use App.view.Viewport.add(panel):

    'Undefined' is not a function(Evaluating 'App.view.Viewport.add(panel)')

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    Can anybody help? Actually my question is how can I get the viewport instance generated by
    autoCreateViewport?

    Thanks

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,329
    Vote Rating
    847
    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


    App.view.Viewport is the class not the instance. In your controller you could setup a ref:

    Code:
    refs : [
        {
            ref      : 'viewport',
            selector : 'app-viewport'
        }
    ]
    The in your controller, you should be able to execute this.getViewport() and it should (hopefully) return the viewport instance for you.
    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.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    Great. It works. Thank you.

    I found Sencha Touch is quite difficult because it's like like normal OO language which has a strict class definition so that we can find properties, methods easily. I'll still need more time to be used to it.

Thread Participants: 1