Tab header character limit

[stevanicus]

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!

[sword-it]

Hi Stevanicus,

If you want to truncate (....) the tab panel title, you can use Ext.util.Format.ellipsis() class. For example-

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

[stevanicus]

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

[sword-it]

You can achieve this by set maxWidth to the tabPanel title under tabConfig.

Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    items: [{
        title: 'First tab',
    }, {
        title: 'Second tab for testing',
        tabConfig: {            
            maxWidth:100
        }
    }]
});

[stevanicus]

Thanks!

However it only works for smaller values
Try setting

tabConfig: { maxWidth:500 }

Doesn't go beyond its default width

thanks again

[scottmartin]

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

500: stops at 6
600: stops at 8

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

[stevanicus]

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