1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    68
    Answers
    3
    Vote Rating
    1
    slngr is on a distinguished road

      0  

    Default Answered: Navigation View - Navigation Bar Problem

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    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


    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 @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.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    68
    Answers
    3
    Vote Rating
    1
    slngr is on a distinguished road

      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
    orenr is on a distinguished road

      0  

    Default same problem - NavigationView listeners don't fire

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    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


    You should define listeners within initialize... not the config object.
    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. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    orenr is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    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


    Code:
    Ext.define('MyClass', {
        ....
    
        initialize: function() {
            this.callParent(arguments);
    
            this.on({
                painted : function() {}
            });
        }
    });
    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
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    orenr is on a distinguished road

      0  

    Default


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

Thread Participants: 2