PDA

View Full Version : Cannot make setActiveItem work



fatih
5 Jul 2011, 1:14 AM
Hey guys,

I am a newbie and I want to develop an app which has only change panels. I made something by looking the samples and documentation but i can not get the toolbar button work. Here is my toolbar code:

this.bottomTabs = new Ext.Toolbar({
id: 'bottomTabs',
dock: 'bottom',
items: [
{
id: 'btn-homepage',
cls: 'card card1',
iconMask: true,
iconCls: 'home',
},
{ xtype: 'spacer'},
{
cls: 'card card2',
iconMask: true,
iconCls: 'favorites',
//ui: 'action',
handler: function () {
this.nicobetPanel.setActiveItem('couponlistPanel', { type: 'slide', reverse: true });
}
},
{ xtype: 'spacer'},
{
iconMask: true,
cls: 'card card3',
iconCls: 'user'
},
{ xtype: 'spacer'},
{
iconMask: true,
cls: 'card card4',
iconCls: 'settings',
badgeText: '4'
}
]
});
and here is the panels that i want to load:

this.couponlistPanel = new Ext.Panel({
id: 'couponlistPanel',
layout: 'fit',
dockedItems: [
this.couponlistToolbar,
this.couponlistBottomtab
],
items:[
this.couponlistView
]
});

this.nicobetPanel = new Ext.Panel({
id: 'nicobetPanel',
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
dockedItems: [
this.homepageToolbar,
this.bottomTabs
],
items: [
this.loginForm
]
});

What am i doing wrong?

I really need your help :s

Hanni Sullivan
5 Jul 2011, 1:29 AM
Without knowing your exact error message, we can only make wild guesses. Like this one :D




{
cls: 'card card2',
iconMask: true,
iconCls :'favorites',
handler:function () {
this.nicobetPanel.setActiveItem('couponlistPanel', { type: 'slide', reverse: true });
},
// Looks like you're missing the correct scope. Set it likes this:
scope: this
}

fatih
5 Jul 2011, 1:35 AM
Without knowing your exact error message, we can only make wild guesses. Like this one :D




{
cls: 'card card2',
iconMask: true,
iconCls :'favorites',
handler:function () {
this.nicobetPanel.setActiveItem('couponlistPanel', { type: 'slide', reverse: true });
},
// Looks like you're missing the correct scope. Set it likes this:
scope: this
}

You are right sorry Hanni :)

The exact error message is right here :

Uncaught TypeError: Cannot call method 'setActiveItem' of undefined

and it gives that error at line

handler: function () {
this.viewport.setActiveItem('couponlistPanel', { type: 'slide', reverse: true });
}

Here is new edited code:

this.bottomTabs = new Ext.Toolbar({
id: 'bottomTabs',
dock: 'bottom',
items: [
{
id: 'btn-homepage',
cls: 'card card1',
iconMask: true,
iconCls: 'home',
},
{ xtype: 'spacer'},
{
cls: 'card card2',
iconMask: true,
iconCls: 'favorites',
//ui: 'action',
handler: function () {
this.viewport.setActiveItem('couponlistPanel', { type: 'slide', reverse: true });
}
},
{ xtype: 'spacer'},
{
iconMask: true,
cls: 'card card3',
iconCls: 'user'
},
{ xtype: 'spacer'},
{
iconMask: true,
cls: 'card card4',
iconCls: 'settings',
badgeText: '4'
}
]
});

and panels:

this.couponlistPanel = new Ext.Panel({
id: 'couponlistPanel',
layout: 'fit',
dockedItems: [
this.couponlistToolbar,
this.couponlistBottomtab
],
items:[
this.couponlistView
]
});

this.nicobetPanel = new Ext.Panel({
id: 'nicobetPanel',
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
dockedItems: [
this.homepageToolbar,
this.bottomTabs
],
items: [
this.loginForm
]
});

this.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [this.nicobetPanel]
})

bclinton
5 Jul 2011, 7:53 AM
I'm not quite sure what "this" is... maybe a generic object that you are wrapping all this code with?

Regardless, you didn't add the "scope: this" line to your handler as Hanni suggested.

Jack9
5 Jul 2011, 11:13 AM
UI coding is really an art that takes a little bit of "Wrapper" thinking. This is true in CSS, Java SWING, HTML, and now Sencha/Touch.

You don't fully understand 3 things, which I will try to explain.

MOST IMPORTANTLY

1. What is a Layout? A layout is a default behavior to visually organize CHILD components.

2. What is a 'card' layout? It's a set of index cards. SetActiveItem is a method for either TabPanel (has a built-in card layout) or a component with the layout 'card'.

Forget the toolbar for now. That's just a way to choose which index card you want.

You have 2 panels...one of which has a card layout. So we know that the CHILDREN (stuff in the items:[] property) of nicobetPanel will be treated as index cards, but sencha doesn't know you want the 2 panels (nicobetPanel and couponListPanel) to be index cards.

Here's what you have been doing wrong.
You haven't made the 2 panels a child of something with a card layout. You could also make the panels children of a TabPanel, but you didn't do that either.


3. What does "this" mean? 'this' is a javascript keyword. It represents a reference to the currently scoped object. Generally, look for an opening curly brace (that's not a function definition) and you'll have a good idea of what object 'this' will be referring to.

The default (top level) 'this' object is the DOM Window object. Do not use the keyword unless you know exactly what you are doing. console.log(this); is generally very helpful in debugging.


Here is a fixed version of your code with small adjustments for fun.



<script type="text/javascript">
Ext.setup({
tabletStartupScreen: 'tablet_startup.png'
,phoneStartupScreen: 'phone_startup.png'
,icon: 'phone_startup.png'
,glossOnIcon: true
,onReady: function() {
var HomePanel = new Ext.Panel({
id:'homepanel',
layout:'card',
cardAnimation: 'slide',
activeItem:1, // I assume you want to start at login.
fullscreen:true,
dockedItems:[
new Ext.Toolbar({
id: 'bottomTabs',
dock: 'bottom',
defaults:{ // This assigns a property to each item in items, if the property is not set.
// But you only have access to the button itself and the event
handler:function(b,e){
alert("You tapped "+b.id);
}
},
items: [
{
id: 'btn-homepage',
cls: 'card card1',
iconMask: true,
iconCls: 'home'
},
{ xtype: 'spacer'},
{
id:'button2',
cls: 'card card2',
iconMask: true,
iconCls: 'favorites',
//ui: 'action',
handler: function () {
// this would refer to the object, button2 not homepanel
//this.setActiveItem('couponlistPanel', { type: 'slide', reverse: true });

Ext.getCmp('homepanel').setActiveItem('couponListPanel', { type: 'slide', reverse: true });
}
},
{ xtype: 'spacer'},
{
iconMask: true,
cls: 'card card3',
iconCls: 'user'
},
{ xtype: 'spacer'},
{
iconMask: true,
cls: 'card card4',
iconCls: 'settings',
badgeText: '4'
}
]
})
]
,items:[
couponListPanel = new Ext.Panel({
id: 'couponListPanel',
layout: 'fit',
dockedItems: [
],
items:[
new Ext.Panel({
html:'CouponList'
})
]
})

,nicobetPanel = new Ext.Panel({
id: 'nicobetPanel',
layout:'fit',
items: [
new Ext.Panel({
html:'Login'
})
]
})
]
});
}
});
</script>