Navigation View - Navigation Bar Problem

[slngr]

Hi,

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

        // Navigation Bar
        navigationBar: {
            docked: 'bottom',
            height: 40,
            items: [
                {
                    xtype: 'button',
                    text: 'test'
                }
            ]
        },

Then my push() command for a new view says:

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?

[mitchellsimoens]

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

        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.

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'
                    });
                }
            });
        }
    }
});

[slngr]

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?

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();
    }
});

[orenr]

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...:/

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");
			},
			
			
		},
		....
	}
});

[mitchellsimoens]

You should define listeners within initialize... not the config object.

[orenr]

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?

[mitchellsimoens]

Ext.define('MyClass', {
    ....

    initialize: function() {
        this.callParent(arguments);

        this.on({
            painted : function() {}
        });
    }
});

[orenr]

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