Hybrid View

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default Unanswered: Cannot call method 'setActiveItem' of 'undefined'

    Unanswered: Cannot call method 'setActiveItem' of 'undefined'


    I have a class that has this definition, which is in my Start.js view:

    Code:
    Ext.define('MyApp.view.Start', {
        extend: 'Ext.Container',
        config: {
            id: 'Start',
            cls: 'Start',
            fullscreen: true,
            layout: {
                type: 'vbox',
                pack: 'stretch',
                align: 'center', 
            },
            defaults: {
                flex: 1
            },
            items: [{
                xtype: 'panel',
                layout: {
                    type: 'vbox',
                    pack: 'top'
                },
                items: [{
                    xtype: 'button',
                    cls: 'PadTop',
                    ui: 'Confirm',
                    text: 'Create New Incident',
                    handler: function(button, event) {
                        MyApp.Viewport.setActiveItem('Incident_New', {type: 'slide', direction: 'up'});
                    }
                }]
            },
    Here is the Incident.js view which has the object with ID = 'Incident_New'

    Code:
    Ext.define('MyApp.view.NewIncident', {
        extend: 'Ext.form.FormPanel'
        config: {
            id: 'Incident_New',
            layout: {
                type: 'vbox',
                align: 'stretch',
                pack: 'center'
            },
            items: [{
                xtype: 'textfield',
                name: 'CaseID',
                placeHolder: 'Incident Number'
            },{
                xtype: 'button',
                name: 'Begin',
                ui: 'Confirm',
                text: 'Begin',
                handler: function(button, event) {
                    MyApp.Viewport.setActiveItem('Dashboard', {type: 'fade'});
                }
            }],
            dockedItems: [{
                xtype: 'toolbar',
                cls: 'Secondary',
                dock: 'bottom',
                items: [{
                    xtype: 'button',
                    text: 'Cancel',
                    handler: function() {
                        MyApp.Viewport.setActiveItem('Start', {type: 'slide', direction: 'down'});
                    }
                }]
            }],
            listeners: {
                activate: function() {
                    ToolbarGlobal.setTitle('New Incident');
                }
            }        
        }
    });
    But yet, I still get this error:

    Cannot call method 'setActiveItem' of 'undefined'

    Around this line in my Start.js:

    Code:
    MyApp.Viewport.setActiveItem('Incident_New', {type: 'slide', direction: 'up'});
    What am I doing wrong here that would generate this error?

    P.S. Please note that this error pops-up, once I press the button 'Create New Incident' on my Start.view.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3357
    Vote Rating
    751
    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


    Where do you set the MyApp.Viewport?
    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
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    Good question, it hasn't been set anywhere.

    I also don't have a 'app/view/Viewport.js' file.

    Should I create that, even if it is empty, then set "views: ['Viewport']" in app.js?

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    *bump*

  5. #5
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    19
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Lets see if we can get this running for you.

    First, setActiveItem doesn't take an id/string. It can either be a number which is an index of the current items in the container, or the actual component you want to be active. (http://docs.sencha.com/touch/2-0/#!/...-setActiveItem)

    Next up is the ids. You almost never want to define classes with ids. There's just no reason to do this, give them an id when you create the instance so you can have many instances with different ids. Instead what you probably want to do is give your new components xtypes. These are very handy shortcuts for your new classes.

    The incident component should look a bit more like this:

    Code:
    Ext.define('MyApp.view.NewIncident', {
        extend: 'Ext.form.FormPanel'
        xtype: 'incident',
        config: {
            layout: {
                type: 'vbox',
    ...
    Now you can create many new incidents easily:

    var myNewIncident = Ext.create({ xtype: 'incident', id: 'Incident_New'});

    Now I have created an instance of incident, with an id, and I can keep making more with specific ids, or just let it auto-assign new ones if I don't specify them.

    Now that I have my incident instance (say that 5 times fast). I'll add it to the viewport:

    MyApp.Viewport.add(myNewIncident);

    Make it the active panel:

    MyApp.Viewport.setActiveItem(myNewIncident);

    Now you were passing a 2nd parameter to do an animation. In Touch 2, we have a method for that instead
    (http://docs.sencha.com/touch/2-0/#!/...-setActiveItem)

    MyApp.Viewport.animateActiveItem(myNewIncident, {type: 'slide', direction: 'up'});

    Let me know if that helps get you going.

    Sencha Inc

    Jamie Avins

    @jamieavins

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    Jamie,
    Thank you very much for such a detailed response. This definitely clears up some misconceptions I have had, with trying to get up to speed with the 2.x way of doing things.

    I have done that, and am now getting this error:

    Uncaught Error: [Ext.create] Invalid class name or alias '[object Object]' specified, must be a non-empty string

    This is my exact code:

    Start.js

    Code:
    Ext.define('MyApp.view.Start', {
        extend: 'Ext.Container',
        config: {
            id: 'Start',
            cls: 'Start',
            fullscreen: true,
            layout: {
                type: 'vbox',
                pack: 'stretch',
                align: 'center', 
            },
            defaults: {
                flex: 1
            },
            items: [{
                xtype: 'panel',
                layout: {
                    type: 'vbox',
                    pack: 'top'
                },
                items: [{
                    xtype: 'button',
                    cls: 'PadTop',
                    ui: 'Confirm',
                    text: 'Create New Incident',
                    handler: function(button, event) {
                        var myNewIncident = Ext.create({
                            xtype: 'incident',
                            id: 'Incident_New'
                        });
                        MyApp.Viewport.add(myNewIncident);
                        MyApp.Viewport.setActiveItem(myNewIncident);
                        MyApp.Viewport.animateActiveItem(myNewIncident, {type: 'slide', direction: 'up'});
                    }
                }]
            },{
                xtype: 'panel',
                flex: '1',
                layout: {
                    type: 'vbox',
                    pack: 'bottom'
                },
                items: [{
                    xtype: 'button',
                    cls: 'PadBot',
                    ui: 'Minor',
                    text: 'Edit Existing Incident',
                    handler: function(button, event) {
                    //    MyApp.Viewport.setActiveItem('Incident_Edit', {type: 'slide', direction: 'up'});
                    }
                }]
            },{
                xtype: 'toolbar',
                docked: 'top',
                items: [{
                    icon: 'resources/themes/images/myapp/icon-settings.png',
                    ui: 'Default',
                    handler: function() {
                        MyApp.Viewport.setActiveItem('Settings', {type: 'flip'});
                    }
                },{
                    xtype: 'spacer'
                },{
                    icon: 'resources/themes/images/myapp/icon-info.png',
                    ui: 'Default',
                    handler: function() {
                        MyApp.Viewport.setActiveItem('Info', {type: 'flip'});
                    }
                }]
            }]    
        }
        
    });
    Incident.js

    Code:
    Ext.define('MyApp.view.NewIncident', {
        extend: 'Ext.form.FormPanel'
        xtype: 'incident',
        config: {
            layout: {
                type: 'vbox',
                align: 'stretch',
                pack: 'center'
            },
            items: [{
                xtype: 'textfield',
                name: 'CaseID',
                placeHolder: 'Incident Number'
            },{
                xtype: 'button',
                name: 'Begin',
                ui: 'Confirm',
                text: 'Begin',
                handler: function(button, event) {
                    // MyApp.Viewport.setActiveItem('Dashboard', {type: 'fade'});
                }
            }],
            dockedItems: [{
                xtype: 'toolbar',
                cls: 'Secondary',
                dock: 'bottom',
                items: [{
                    xtype: 'button',
                    text: 'Cancel',
                    handler: function() {
                        MyApp.Viewport.setActiveItem('Start', {type: 'slide', direction: 'down'});
                    }
                }]
            }],
            listeners: {
                activate: function() {
                    ToolbarGlobal.setTitle('New Incident');
                }
            }        
        }
    });
    What's causing this error? Btw, it says it is in 'sencha-touch-debug.js:6368'

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