1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    63
    Answers
    1
    Vote Rating
    1
    stevanicus is on a distinguished road

      0  

    Default Unanswered: Tab header character limit

    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 - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    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 Use Ext.util.Format.ellipsis()

    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
    63
    Answers
    1
    Vote Rating
    1
    stevanicus is on a distinguished road

      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 - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    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


    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
    63
    Answers
    1
    Vote Rating
    1
    stevanicus is on a distinguished road

      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
    8,884
    Answers
    653
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    63
    Answers
    1
    Vote Rating
    1
    stevanicus is on a distinguished road

      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