1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Vote Rating
    1
    jwjiwon is on a distinguished road

      0  

    Default make back button on the right side and long title beautiful on the navigation Bar

    make back button on the right side and long title beautiful on the navigation Bar


    I got the navigation view,


    I realized that if the title is long enough to be bigger than the width of browser,
    it becomes short with 3 dots at the end of the title
    for example: "bulabulabu..."

    and the problem begins, when I made the backbutton on the right side of the navigation View,
    code is like this :

    Code:
    Ext.define('navi',{
        extend: 'Ext.NavigationView',
        xtype: 'navi',
    navigationBar : {
                docked: 'top',
                backButton: {
                    align: 'right'
                }
    });
    and the title becomes longer, it covers over the backbutton.
    which was on the left side before.. which is now on the right side..
    sencha made the title length and the place automatically,
    so I need to move title more left side, and thinking.. it is related to sencha private function..
    any good idea?

    ================================================

    I'm sorry . it is related to Sencha Touch 2.
    I'll copy it into other bulletin board .

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    You can use following code:-

    Code:
    var view = Ext.create('Ext.NavigationView', {
        fullscreen: true,
        navigationBar: {
          ui: 'light',
          docked: 'top',
            backButton:{ align:'right', width:200}
        },
        defaultBackButtonText:'Hello!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!',
        items: [{
            title: 'First',
            items: [{
                xtype: 'button',
                text: 'Push a new view!',
                handler: function() {
                    view.push({
                        title: 'Secondddddddddddddddddddddddddddddddddddddddnd',
                        html: 'Second view!'
                        
                    });
                }
            }]
        }]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1