PDA

View Full Version : TabPanel show/hide item cards



dishwashwebdesign
21 Nov 2011, 3:20 AM
It seems quite tricky to initialize items in a tabpanel as hidden. Then setting them to visible depending on a form selection.
At the moment it works ok with creating/destroying the item cards. Sometimes this errors for some funny reason (TypeError: 'undefined' is not an object (evaluating 'dom.parentNode')).
Any hints of achieving this task with pure and simple, straight forward code? :)
this is what i got now:

viewport definition:

myVp.views.Viewport = Ext.extend(Ext.TabPanel, {
id: 'IdViewport',
tabBar: { dock: 'bottom', layout: { pack: 'center' } },

initComponent: function() {
var views = new Object();
views.SettingsCard = new MyApp.views.SettingsCard();
Ext.apply(MyApp.views, views);

var items = new Array();
items.push(MyApp.views.SettingsCard);

Ext.apply (this, {
items: items
});

MyApp.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});

The card i would like to add into the bottom tabpanel depending on switch action in settinscard:


(function() {
var topbar = {
xtype: "toolbar",
title: "extra card",
items: []
};

MyApp.views.MyNewCard = Ext.extend(Ext.Panel, {
title: "New inserted card",
iconCls: "user",
id: "indExtraCard",
layout: {
type: 'vbox',
align: 'stretch'
},
initComponent: function() {
Ext.apply(this, {
dockedItems: [
topbar
],
});
MyApp.views.MyNewCard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('MyNewCard', MyApp.views.MyNewCard);
})();


Then the magic form which should show/hide the MyNewCard:


...
new Ext.Panel({
items: [{
xtype: 'form',
items: [{
xtype: 'fieldset',
title: 'Enable/disable extra functions',
defaults: {
labelAlign: 'right'
},
items: [{
xtype: 'togglefield',
label: 'My Panel',
listeners: {
change: function (slider, thumb, newValue, oldValue) {
var tBar = Ext.getCmp('IdViewport');
var sItemCard = new MyApp.views.MyNewCard();
tBar.insert(0, sItemCard);
tBar.doLayout();
}
else if (oldValue == 1 && newValue == 0 && tBar) {
var sItemCard = Ext.getCmp('indExtraCard');
tBar.remove(userCard, true);
tBar.doLayout();

}
}
}
...

So the best way would be to initialize MyApp.views.MyNewCard in the viewport. Only to set it as hidden in the bottom toolbar till it gets activated in the form.
Thanks for any hints...

mitchellsimoens
21 Nov 2011, 9:52 AM
To keep DOM as lightweight as possible.. why not just add/remove the tab?

dishwashwebdesign
22 Nov 2011, 1:25 AM
Thanks for the hint.
ok, lets roll with that one then, but there is still this weird message i get, sometimes when re-creating the panel:


Uncaught TypeError: Cannot read property 'parentNode' of undefined
Ext.layout.Layout.Ext.extend.isValidParentsencha-touch-debug.js:28890
Ext.layout.Layout.Ext.extend.renderItemssencha-touch-debug.js:28841
Ext.layout.Layout.Ext.extend.beforeLayoutsencha-touch-debug.js:28826
Ext.layout.Layout.Ext.extend.layoutsencha-touch-debug.js:28817
Ext.layout.ComponentLayout.Ext.extend.afterLayoutsencha-touch-debug.js:29000
Ext.layout.DockLayout.Ext.extend.afterLayoutsencha-touch-debug.js:29169
Ext.layout.Layout.Ext.extend.layoutsencha-touch-debug.js:28819
Ext.lib.Component.Ext.extend.doComponentLayoutsencha-touch-debug.js:19931
Ext.lib.Component.Ext.extend.onShowsencha-touch-debug.js:19228
Ext.Component.Ext.extend.onShowsencha-touch-debug.js:20398
Ext.Component.Ext.extend.showsencha-touch-debug.js:20212
Ext.lib.Container.Ext.extend.showsencha-touch-debug.js:20976
Ext.layout.CardLayout.Ext.extend.setActiveItemsencha-touch-debug.js:29712
Ext.TabBar.Ext.extend.onTabTapsencha-touch-debug.js:24143
Ext.TabBar.Ext.extend.onTouchStartsencha-touch-debug.js:24117

mitchellsimoens
22 Nov 2011, 6:53 AM
When you add are you creating a new instance of the component?

dishwashwebdesign
22 Nov 2011, 6:58 AM
hmm, to be honest, i dont know. Whats the difference and how to define an instance or a new object?

mitchellsimoens
22 Nov 2011, 7:01 AM
hmm, to be honest, i dont know. Whats the difference and how to define an instance or a new object?

If you are removing a component and trying to readd it, that component is destroyed and you will easily get errors. If you create a new instance either by doing something like:


cmp.add(new Ext.Panel({....}));

or like this:


cmp.add({
xtype : 'panel',
....
});

dishwashwebdesign
22 Nov 2011, 7:12 AM
not quite sure if i am following you all the way.
at this stage, the add code does something like this


var tBar = Ext.getCmp('IdViewport');
var sItemCard = new MyApp.views.MyNewCard();
tBar.insert(0, sItemCard);

Where myNewCard is its own included javascript file->panel:


MyApp.views.MyNewCard = Ext.extend(Ext.Panel, {
title: "New inserted card",
iconCls: "user",
id: "indExtraCard",

does this make any sense?

dishwashwebdesign
25 Nov 2011, 8:31 AM
hmm, still experiencing some funny errors when creating/destroying the panels:


TypeError: '[object Object]' is not a constructor (evaluating 'new BeMobile.views.LabCard()')