1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    66
    Vote Rating
    1
    Answers
    1
    stevanicus is an unknown quantity at this point

      0  

    Default Unanswered: Tab header character limit

    Hi there,

    I haven't been able to find the answer to this - hence my post

    For tab titles.. after x amount of characters the title is shortend to i.e. "My lov...", is there anyway to change this?

    Maybe extend the max char limit or remove it altogether?

    Thanks in advance!

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,334
    Vote Rating
    87
    Answers
    124
    sword-it is just really nice sword-it is just really nice sword-it is just really nice sword-it is just really nice

      0  

    Default Use Ext.util.Format.ellipsis()

    Hi Stevanicus,

    If you want to truncate (....) the tab panel title, you can use Ext.util.Format.ellipsis() class. For example-
    Code:
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        items: [{
            title: Ext.util.Format.ellipsis('Offer item', 8)
        }, {
            title: Ext.util.Format.ellipsis('Custom Title', 6)
            
        }]
    });
    For more detail read API http://docs.sencha.com/ext-js/4-1/#!...ethod-ellipsis
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    66
    Vote Rating
    1
    Answers
    1
    stevanicus is an unknown quantity at this point

      0  

    Default

    Thanks for replying!

    It truncates the title automatically... I want to extend the number that it truncates at.

    With every key stroke on the "title textfield" the tab title is updated. Is there a config anywhere that I have overlooked to extend the truncation limit?

    Thanks again

  4. #4
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,334
    Vote Rating
    87
    Answers
    124
    sword-it is just really nice sword-it is just really nice sword-it is just really nice sword-it is just really nice

      0  

    Default

    You can achieve this by set maxWidth to the tabPanel title under tabConfig.
    Code:
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        items: [{
            title: 'First tab',
        }, {
            title: 'Second tab for testing',
            tabConfig: {            
                maxWidth:100
            }
        }]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    66
    Vote Rating
    1
    Answers
    1
    stevanicus is an unknown quantity at this point

      0  

    Default

    Thanks!

    However it only works for smaller values
    Try setting

    tabConfig: { maxWidth:500 }

    Doesn't go beyond its default width

    thanks again

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,263
    Vote Rating
    486
    Answers
    696
    scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute

      0  

    Default

    I see the tab expand as I increase the value: (Ext 4.1.1)

    500: stops at 6
    600: stops at 8

    Code:
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        items: [{
            title: 'First tab',
        }, {
            title: 'Second tab for testing asdasdad1 asdadasd2 asdadad2 asdasdad4 adasdada5 asdadad6 asdasd7 asdasdad8 asdadasd9 asdadasd0 ',
            tabConfig: {            
                maxWidth:600
            }
        }]
    });​
    Scott

  7. #7
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    66
    Vote Rating
    1
    Answers
    1
    stevanicus is an unknown quantity at this point

      0  

    Default

    Sorry about my late reply,

    However, it seems to reset itself if you use the setTitle() method afterwards.

    For example I have a textfield which updates the tab title.

    Thanks

Thread Participants: 2

Tags for this Thread