Results 1 to 8 of 8

Thread: Navigation View - Navigation Bar Problem

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    68
    Answers
    3
    Vote Rating
    1
      0  

    Default Answered: Navigation View - Navigation Bar Problem

    Hi,

    when I want to add some items to my navigationBar like this:

    Code:
            // Navigation Bar
            navigationBar: {
                docked: 'bottom',
                height: 40,
                items: [
                    {
                        xtype: 'button',
                        text: 'test'
                    }
                ]
            },
    Then my push() command for a new view says:
    HTML Code:
    Uncaught TypeError: Cannot call method 'getText' of null
    If I remove the items list from navigationBar everything works fine. But I need to add a button to the navigationBar. How can I do this?

  2. Code:
    Ext.define('MyClass', {
        ....
    
        initialize: function() {
            this.callParent(arguments);
    
            this.on({
                painted : function() {}
            });
        }
    });

  3. #2
    Sencha - Community Support Team mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,023
    Answers
    3976
    Vote Rating
    1334
      0  

    Default

    Looks like this is because of this line in Ext.navigation.Bar:

    Code:
            if (!this.backButton) {
                this.backButton = this.down('button[ui=back]');
            }
    Where it tries to resolve the back button but it can't be found so down() returns null. If you wait till the view is painted and then you can add the button. The back button will still show at the first button when it is shown.

    Code:
    var view = Ext.create('Ext.navigation.View', {
        fullscreen : true,
        navigationBar: {
            docked: 'bottom',
            height: 40
        },
        items      : [
            {
                html : 'Test'
            }
        ],
        listeners : {
            buffer  : 50,
            painted : function(view) {
                var bar = view.getNavigationBar();
    
                bar.add({
                    xtype   : 'button',
                    text    : 'Test',
                    handler : function() {
                        view.push({
                            title : 'A new view',
                            html  : 'Some new content'
                        });
                    }
                });
            }
        }
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    68
    Answers
    3
    Vote Rating
    1
      1  

    Default

    Here's my code - painted event is again not working ... no console.log output.
    Is the var view declaration that I made possible like this in MVC structure? I think the main problem ist, that the painted event isn't triggered by the view - any other possibilities?

    Code:
    var view = Ext.define('App.view.Viewport2', {    extend: 'Ext.NavigationView',
        xtype: 'headerscreen',
    
    
        require: ['HomeCarousel', 'ProductSlider'],
        
        // Configuration of the view
        config: {
            fullscreen: true,
            defaults: {
                scrollable: false,
                styleHtmlContent: true
            },
            // Navigation Bar
            navigationBar: {
                docked: 'bottom',
                height: 40,
            },
    		
    		
    		// NavigationView Items
    		items: [{
    			title: 'Home',
    			layout: 'vbox',
    		// Different Items on the view    
    		items: [
    				{
    					id: 'header',
    					height: 125,
    					docked: 'top',
    					xtype: 'container',
    					html: '<h1>Just one more</h1><ul id="menu"><li id="latest">Latest</li><li><a href="/view/About.js" id="random">Random</a></li></ul>'
    				},
    				{
    					xtype: 'button',
    					id: 'aboutButton',
    					text: 'About',
    					handler: function() {
    						//this.push({xtype: 'aboutscreen'});
    					}
    				},
    				{
    					xtype: 'home_carousel'
    				},
    				
    			   ]
    		}],
    		
    		listeners : {
            buffer  : 50,
            painted : function(view) {
                var bar = view.getNavigationBar();
    			console.log('LISTENER TEST');
    
    
                bar.add({
                    xtype   : 'button',
                    text    : 'Test',
                    handler : function() {
                        view.push({
                            title : 'A new view',
                            html  : 'Some new content'
    						});
    					}
    				});
    			}
    		}
        },
    
    
        // Initialize Block
        initialize: function() {
            console.log('>> HEADER [created]');
            this.callParent();
        }
    });

  5. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
      0  

    Default same problem - NavigationView listeners don't fire

    This is the code of my viewport. I tried all types of events but nothing is fire no matter what.
    I think it's a bug...:/

    Code:
    Ext.define('MDA.view.Viewport', {	extend: 'Ext.NavigationView',
    	id: 'myview',
    	xtype: 'my-viewport',	
    	config: {
    		layout: {
    			type:'card'
    		},
    		fullscreen: true,
    		listeners : {
    			painted : function(view) {
    				console.log(view,"dddd");
    			},
    			
    			
    		},
    		....
    	}
    });

  6. #5
    Sencha - Community Support Team mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,023
    Answers
    3976
    Vote Rating
    1334
      0  

    Default

    You should define listeners within initialize... not the config object.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  7. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
      0  

    Default

    thanks for the fast replay

    what do you mean by saying "
    You should define listeners within initialize"?

    where should i do it? can you attach a sample code?

  8. #7
    Sencha - Community Support Team mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,023
    Answers
    3976
    Vote Rating
    1334
      0  

    Default

    Code:
    Ext.define('MyClass', {
        ....
    
        initialize: function() {
            this.callParent(arguments);
    
            this.on({
                painted : function() {}
            });
        }
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  9. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
      0  

    Default

    I thought i did b4...anyway thanks that worked!

Posting Permissions

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