PDA

View Full Version : Button and TabPanel



dbottillo
15 Jul 2010, 2:59 AM
i'm dealing with an error that i don't know how to handler

i create a list item layout that enter in a single page when click on a single item
when enter in this type of page i add to the tabpanel e button 'back' to return back to list of items

var back = new Ext.Button({
id: 'ButtonBack',
text: 'back',
handler: function(){
offerte.setCard(0);
var tabBar = panel.getTabBar();
tabBar.removeDocked(back,true);
}
});

var detail = new Ext.Panel({
tpl: '<tpl for=".">Name: {name}<br />img: {img}</tpl>',
listeners: {
beforeactivate: function () {
var tabBar = panel.getTabBar();
tabBar.addDocked(back);
}
}
});
when i turning back i remove the button back (because it's not necessary anymore) but if i click again on a single item i receive this error on chrome:

Uncaught TypeError: Cannot read property 'parentNode' of undefined

if i delete 'tabBar.removeDocked(back,true);' method the error doesn't appear but obviously button back remain on TabPanel
methods removeDocked and addDocked i pick from documentation

any idea?

Thank you

evant
15 Jul 2010, 3:35 AM
There's not really enough info here. Please post a drop in test case.

dbottillo
15 Jul 2010, 3:43 AM
my code is:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
Ext.regModel('Offer', {
fields: ['name', 'img', 'alt']
});

var list = new Ext.List({
tpl: [
'<tpl for=".">',
'<div class="contact"><div style="width: 90%; height: 70px; margin: 5px auto; background-color: white">',
'<div style="width: 90px; float:left">',
'<img src="{img}" style="margin-top: 5px; margin-left: 5px;" alt="{alt}" />',
'</div>',
'<div style="float:left; font-size: 12px">',
'<span style="font-size: 18px; color: darkblue; font-weight: bold">{name}</span><br/><br/>',
'da 500 €',
'</div>',
'</div></div>',
'<div style="clear:both"></div>',
'</tpl>'
],
itemSelector: 'div.contact',
title: 'Offerte',
singleSelect: true,
store: new Ext.data.Store({
model: 'Offer',
data: [{
name: 'Lanzarote',
img: 'data/thumbs/41.jpg',
alt: 'Lanzarote image'
}}]
}),
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
offerte.setCard(1);
detail.update({
name: "test1",
img: "test2",
alt: rec.get('alt')
})
},
beforeactivate: function () {
Ext.getCmp('topToolbar').setTitle(this.title);
}
}
});

var back = new Ext.Button({
id: 'ButtonBack',
ui: 'back',
xtype: 'toolbar',
text: 'back',
handler: function(){
offerte.setCard(0);
var tabBar = panel.getTabBar();
tabBar.removeDocked(back,true);
}
});

var detail = new Ext.Panel({
tpl: '<tpl for=".">Name: {name}<br />img: {img}</tpl>',
listeners: {
beforeactivate: function () {
var tabBar = panel.getTabBar();
tabBar.addDocked(back);
}
}
});

var offerte = new Ext.Container({
layout: 'card',
title: 'Offerte',
iconCls: 'more',
items:
[list, detail]
});

var panel = new Ext.TabPanel({
fullscreen: true,
ui: 'light',
animation: { type: 'cube', direction: 'down' },
tabBar: { dock: 'bottom', layout: { pack: 'center'} },
dockedItems: [{ id: 'topToolbar', dock: 'top', xtype: 'toolbar', title: 'My title'}],
items: [offerte,
{ title: 'Search', iconCls: 'search'
}],
defaults: {
listeners: {
beforeactivate: function () {
Ext.getCmp('topToolbar').setTitle(this.title);
}
}
}
});
}
});

evant
15 Jul 2010, 4:17 AM
tabBar.removeDocked(back,true); // Second parameter is autoDestroy


Since you're using the button again, you don't want to destroy it, so you need to pass false, not true.

Also, you'll want to hide/show it:



var back = new Ext.Button({
id: 'ButtonBack',
ui: 'back',
xtype: 'toolbar',
text: 'back',
handler: function(){
offerte.setCard(0);
var tabBar = panel.getTabBar();
tabBar.removeDocked(back, false);
back.hide();
}
});

var detail = new Ext.Panel({
tpl: '<tpl for=".">Name: {name}<br />img: {img}</tpl>',
listeners: {
beforeactivate: function(){
var tabBar = panel.getTabBar();
tabBar.addDocked(back);
back.show();
tabBar.doLayout();
}
}
});

dbottillo
15 Jul 2010, 4:43 AM
ok thank you
i miss the documentation about Button (hide and show), sorry!

but now how can i set a layout for this button? because now is:
21465

i want that appears like 'back button' in toolbars example

in the code of the example button is defined:

var buttonsGroup1 = [{
text: 'Back',
ui: 'back',
handler: tapHandler
}, {
text: 'Default',
handler: tapHandler
}, {
text: 'Round',
ui: 'round',
handler: tapHandler
}];

but also my button is defined with the same ui but it appears like a simple square button with only text