PDA

View Full Version : [FIXED-162] Docked back button in tabpanel's tabbar not appearing correctly



meyerovb
22 Jul 2010, 5:47 AM
I want to embed a back button in a tabpanel's scrollable tabbar as shown below, however the button doesn't display correctly.



Ext.setup({ onReady: function () {
var t = { title: 'Tab Tab Tab Tab Tab Tab' };
new Ext.TabPanel({
fullscreen: true,
tabBar: {
scroll: 'horizontal',
dockedItems: [{ xtype: 'button', ui: 'back', text: 'back', dock: 'left'}]
},
items: [t, t, t, t, t]
});
}});

evant
22 Jul 2010, 6:00 AM
Put it in the items, not the docked items.

meyerovb
22 Jul 2010, 6:04 AM
That isn't working, when I put an item in with xtype:button, it makes a tab and the tab's content is a button. I just want a back button docked to the left of the tabs, only in the tab bar. Can you send back example code please?

evant
22 Jul 2010, 6:06 AM
Ext.setup({
onReady: function(){
var t = {
title: 'Tab Tab Tab Tab Tab Tab'
};
new Ext.TabPanel({
fullscreen: true,
tabBar: {
scroll: 'horizontal',
items: [{
xtype: 'button',
text: 'A'
}]
},
items: [t, t, t, t, t]
});
}
});

meyerovb
22 Jul 2010, 6:10 AM
The point of making it a dockedItem was so that it wouldn't scroll with the rest of the tabs.

evant
22 Jul 2010, 6:31 AM
Ext.setup({
onReady: function(){
var t = {
title: 'Tab Tab Tab Tab Tab Tab'
};
new Ext.TabPanel({
fullscreen: true,
dockedItems: [{
dock: 'left',
xtype: 'button',
text: 'A',
stretch: false
}],
tabBar: {
scroll: 'horizontal'
},
items: [t, t, t, t, t]
});
}
});

evant
22 Jul 2010, 6:36 AM
Though still, you should be able to put a button there, it's just not sizing correctly, so we'll take a look.

meyerovb
22 Jul 2010, 6:44 AM
Your last example pushed the entire tabpanel over, not just the tabbar. Thanks for taking a look at it. Could you tag the thread with a Trac ticket # so I can track it with my other tickets? Thanks!

Jamie Avins
22 Jul 2010, 8:48 AM
Ticket added :)

evant
8 Sep 2010, 6:51 PM
This has since been resolved in 0.94. Going to mark this as closed.

=NR=
21 Aug 2013, 2:06 PM
I'm getting this error while trying to do this..

Hope that you can explain to why this happened:

Uncaught Error: [ERROR][Ext.Container#doAdd] Adding a card to a tab container without specifying any tab configuration

General structure of my view:

Tabpanel

fullscreen: true


item 1 => list
item 2 => tabpanel with supposedly docked button on the left

layout fit



the dockedItems for the button need to be outside of tabbar, right?




Ext.setup({
onReady: function(){
var t = {
title: 'Tab Tab Tab Tab Tab Tab'
};
new Ext.TabPanel({
fullscreen: true,
dockedItems: [{
dock: 'left',
xtype: 'button',
text: 'A',
stretch: false
}],
tabBar: {
scroll: 'horizontal'
},
items: [t, t, t, t, t]
});
}
});



UPDATE: I did not put title for dockedItems - button that is the reason of the error