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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      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
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    You should define listeners within initialize... not the config object.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Code:
    Ext.define('MyClass', {
        ....
    
        initialize: function() {
            this.callParent(arguments);
    
            this.on({
                painted : function() {}
            });
        }
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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
  •