Ext.navigation.View navigationBar long title wrong alignment in Sencha Touch 2.1

[KoSik]

Hi.

When there is no additional buttons added to navigationBar of navigationView - everything is working well. I also works well if title is short. But when title is cut - there are problems with alignment and title behaves unexpectable. See screenshots:

iOS Simulator Screen shot Jan 22, 2013 11.01.39 AM.pngiOS Simulator Screen shot Jan 22, 2013 11.01.32 AM.pngiOS Simulator Screen shot Jan 22, 2013 11.01.24 AM.png


Here is the code on my NavigationView:

Ext.define("iCoordinator.view.time.Nav", {
    extend: 'Ext.navigation.View',
    xtype: 'timenavigationview',


    config: {
        autoDestory: true,
        navigationBar: {
            ui: 'default'
        }
    },


    initialize: function () {
        var me = this;


        var nextIntervalBtn = Ext.create('Ext.Button', {
            itemId: "nextIntervalBtn",
            iconMask: true,
            iconCls: 'arrow_right',
            align: 'right',
            handler: this.onNextIntervalBtnClick,
            scope: this
        });


        var previousIntervalBtn = Ext.create('Ext.Button', {
            itemId: "previousIntervalBtn",
            iconMask: true,
            iconCls: 'arrow_left',
            align: 'left',
            handler: this.onPreviousIntervalBtnClick,
            scope: this
        });


        this.getNavigationBar().add([nextIntervalBtn, previousIntervalBtn]);


        me.getNextIntervalBtn = function() {
            return nextIntervalBtn;
        }


        me.getPreviousInteralBtn = function() {
            return previousIntervalBtn;
        }


        this.callParent(arguments);
    },


    setTitle: function(title) {
        this.getNavigationBar().setTitle(title);
    },


    onPreviousIntervalBtnClick: function() {
        this.fireEvent('previousIntervalCommand', this);
    },


    onNextIntervalBtnClick: function() {
        this.fireEvent('nextIntervalCommand', this);
    }
});

Actually, title looks good only when navigationView is first initialized. After pushing/popping views you can see on screenshots, what happens.

[mitchellsimoens]

With your provided test case, I don't see anything wrong.

[KoSik]

You are right, when navigationView is used separately (I tried it myself) - everything works well. But my bug appears if I put this navigationView inside other Container. I my case it is this container:

Ext.define("iCoordinator.view.time.Main", {
    extend: 'Ext.Container',
    xtype: 'timemainview',


    config: {
        layout: 'fit'
    },


    initialize: function () {
        var me = this;
        this.callParent(arguments);


        var timeNavigationView = {
            xtype: 'timenavigationview'
        }


        this.add([timeNavigationView]);
    }
});

[KoSik]

You can use this controller as an example:

Ext.define('iCoordinator.controller.TimeController', {
    extend: 'Ext.app.Controller',


    config: {
        views: [
            'iCoordinator.view.time.Nav',
            'iCoordinator.view.time.Main'
        ],
        refs: {
            timeNavigationView: 'timenavigationview'
        },


        control: {
            timeNavigationView: {
                nextIntervalCommand: 'onNextIntervalCommand'
            }
        }
    },


    onNextIntervalCommand: function() {
        var me = this;


        me.getTimeNavigationView().push({
           title: 'Very long title goes here lalala',
           html: "Text content"
        });
    }


});