PDA

View Full Version : Extending several Panels + dockedItems = panel display failure?



I'm Dennis
1 Sep 2011, 5:57 AM
I'm creating an MVC application (called BM) similar to the one that is described here: http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap

I'm going to create a single (default) panel, define docked items for it and then reuse it by 2 more my panel (to not copy/paste dockedItems JS in each).



BM.views.DefaultPanel = Ext.extend(Ext.Panel, {
/**
* Panel buttons
*/
dockedItems: [{
xtype: 'toolbar',
ui: 'light',
defaults: {
iconMask: true,
ui: 'plain'
},
layout: {
pack: 'center'
},
items: [
{
iconCls: 'bm-icon-user'
},
{
iconCls: 'map'
}
]
}]


After that I try to extend this panel with my 2 custom panels I actually use:


BM.views.StartScreen = Ext.extend(BM.views.DefaultPanel, {
html: "loading"
});

BM.views.MyListing = Ext.extend(BM.views.DefaultPanel, {
html: 'ok'
});



After that I add them both to BM.views object and to Viewport view's Items:
Viewport's method:


initComponent: function() {
/* Add views to BM.views */
Ext.apply(BM.views, {
startScreen: new BM.views.StartScreen(),
myList: new BM.views.MyListing()
});


/* Add items to BM.views.Viewport */
Ext.apply(this, {
items: [
BM.views.startScreen,
BM.views.myList
]
});


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


After that my top toolbar stops rendering (it draws toolbar with 8px width instead of 100%) =/
27812

p.s. If I copy/paste dockedItems code into each of my two custom panels - rendering works well

janelle
8 Nov 2011, 11:30 AM
I am getting the exact same problem!! I need this fixed ASAP! Anyone have any ideas?

janelle
8 Nov 2011, 1:50 PM
I made it work by extending the toolbar, registering it as a type, then adding it to each object rather than to the base object. I stuck my code in with yours, so you should get the basic idea.



app.views.BaseTB = Ext.extend(Ext.Toolbar, {
items: [
{
text: 'Back',
cls: 'clr',
ui: 'back',
handler: function(btn, evt)
{
}
},
{xtype: 'spacer'},
{
text: 'Filter',
handler: function(btn, evt)
{
}
}
]
});


Ext.reg('baseTB', app.views.BaseTB);

BM.views.StartScreen = Ext.extend(BM.views.DefaultPanel, {
html: "loading",
dockedItems: [
{
xtype: 'baseTB',
title: "Start Screen"
}
]


});


BM.views.MyListing = Ext.extend(BM.views.DefaultPanel, {
html: 'ok',
dockedItems: [
{
xtype: 'baseTB',
title: "My Listing"
}
]
});

Juanito
8 Dec 2011, 11:06 AM
This is happening because you are sharing dockedItems among all instances since you put it on the prototype. What you need to do is to define dockedItems from initComponent so that a new dockedItems object is created for each instance.


BM.views.DefaultPanel = Ext.extend(Ext.Panel, {
/**
* Panel buttons
*/
initComponent: function() {
this.dockedItems: [{
xtype: 'toolbar',
ui: 'light',
defaults: {iconMask: true,ui: 'plain'},
layout: {pack: 'center'},
items: [{iconCls: 'bm-icon-user'},{iconCls: 'map'}
]
}];
BM.views.DefaultPanel.superclass.initComponent.call(this);
}
});


Lesson, never put objects on the prototype since it often causes this kind of bug. You are safe with strings, numbers and booleans (and obviously functions) since setting that property would write on the object itself, not the prototype.