Results 1 to 3 of 3

Thread: Ext.NavigationView

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default Answered: Ext.NavigationView

    Please find the code below and help me out on wrong code inside handler

    HTML Code:
    var views = Ext.define("MyApp.view.Navigation",{
        extend:'Ext.navigation.View', 
        config:{
        fullscreen: true,
        xtype:"navigationview",
        items: [{
            title: 'First',
            items: [{
                xtype: 'button',
                text: 'Push a new view!',
                handler: function() {
                    this.push({
                        xtype : 'container',
                        title: 'A new view',
                        html: 'Some new content'    
                    });
                }
            }]
        }]
    }
    });
    
    Ext.application({
        name: 'MyApp',
        appFolder:'/public/app',
    
    
        requires: [
            'Ext.MessageBox'
        ],
    
    
        views: ['Main','Navigation'],
    
    
        isIconPrecomposed: true,
    
    
        launch: function() {
    
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('MyApp.view.Navigation'));
         
        },
    
    
        onUpdated: function() {
            Ext.Msg.confirm(
                "Application Update",
                "This application has just successfully been updated to the latest version. Reload now?",
                function(buttonId) {
                    if (buttonId === 'yes') {
                        window.location.reload();
                    }
                }
            );
        }
    });

  2. I think you had more than just the handler code wrong. Watch out for how you reference objects. Also, make sure you keep your Navigation definition in a Navigation.js (path in code).
    I'm assuming you put the code in the same code tag for simplicity.

    Code:
    //in /public/app/view/Navigation.js
    Ext.define('MyApp.view.Navigation', {
        extend:'Ext.navigation.View', 
        config: {
            fullscreen: true,
            items: [{
                title: 'First',
                items: [{
                    xtype: 'button',
                    text: 'Push a new view!',
                    handler: function(me) {
                        me.getParent().push({
                            xtype : 'container',
                            title: 'A new view',
                            html: 'Some new content'    
                        });
                    }
                }]
            }]
        }
    });
    
    
    
    
    //in /public/app/app.js
    Ext.application({
        name: 'MyApp',
        appFolder:'/public/app',
        requires: [
            'Ext.MessageBox'
        ],
        views: ['Main','Navigation'],
        isIconPrecomposed: true,
        launch: function() {
            // Initialize the main view
            Ext.Viewport.add(Ext.create('MyApp.view.Navigation'));
        },
        onUpdated: function() {
            Ext.Msg.confirm(
                "Application Update",
                "This application has just successfully been updated to the latest version. Reload now?",
                function(buttonId) {
                    if (buttonId === 'yes') {
                        window.location.reload();
                    }
                }
            );
        }
    });

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    100
      0  

    Default

    I think you had more than just the handler code wrong. Watch out for how you reference objects. Also, make sure you keep your Navigation definition in a Navigation.js (path in code).
    I'm assuming you put the code in the same code tag for simplicity.

    Code:
    //in /public/app/view/Navigation.js
    Ext.define('MyApp.view.Navigation', {
        extend:'Ext.navigation.View', 
        config: {
            fullscreen: true,
            items: [{
                title: 'First',
                items: [{
                    xtype: 'button',
                    text: 'Push a new view!',
                    handler: function(me) {
                        me.getParent().push({
                            xtype : 'container',
                            title: 'A new view',
                            html: 'Some new content'    
                        });
                    }
                }]
            }]
        }
    });
    
    
    
    
    //in /public/app/app.js
    Ext.application({
        name: 'MyApp',
        appFolder:'/public/app',
        requires: [
            'Ext.MessageBox'
        ],
        views: ['Main','Navigation'],
        isIconPrecomposed: true,
        launch: function() {
            // Initialize the main view
            Ext.Viewport.add(Ext.create('MyApp.view.Navigation'));
        },
        onUpdated: function() {
            Ext.Msg.confirm(
                "Application Update",
                "This application has just successfully been updated to the latest version. Reload now?",
                function(buttonId) {
                    if (buttonId === 'yes') {
                        window.location.reload();
                    }
                }
            );
        }
    });

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default Thank you

    thanks for your time and help. it works good.

Posting Permissions

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