PDA

View Full Version : {xtype: xxx} item as the north panel of a viewport does not show.



wceuppens
28 Jun 2010, 1:10 PM
I am trying to change my test application from "procedural" to "object-oriented" and ran into a strange problem within a viewport.

When I display both versions in a window (using firebug), I receive twice exactly the same toolbar:

var win = new Ext.Window({
title:'North Panel',
width:800, height:400,
items:[{xtype:'APP.panel.North'}, north.Panel]
});
win.show();But when I use the code in a viewport, the "object oriented" <{xtype:'APP.panel.North'}> does not display. It looks as if it's hidden behind the other regions.
The "procedural" <north.Panel> shows correctly in the viewport.

buildViewport : function() {
viewport = new Ext.Viewport({
layout : 'border',
items: [
// north.Panel,
{xtype: 'APP.panel.North'},
east.Panel,
west.Panel,
centre.Panel,
]
});
Ext.getBody().unmask();
},The "procedural" code is:

Ext.namespace('north');
//==============================================================
// Localisation
//==============================================================
//BUTTONS: HANDLER
north.ButtonHandler = function(button) {
window.location.search = Ext.urlEncode({"lng":button.language});
};
//==============================================================// north panel
//==============================================================
north.Panel = new Ext.Panel({
region : 'north',
height : 20, // give north region a height
margins : '0 5 0 5',
tbar : [
{
xtype : 'tbtext',
text : '<b>&nbsp Extjs Case Study 01</b>'
},'->',{
iconCls : 'icon-fr',
language: 'fr',
text : 'Franšais',
tooltip : 'Franšais',
handler : north.ButtonHandler
},'-',{
iconCls : 'icon-uk',
language: 'en_GB',
text : 'English',
tooltip : 'English',
handler : north.ButtonHandler
}
]
})and the "object oriented" code is:

Ext.ns("APP.panel");

APP.panel.North = Ext.extend(APP.panel.BaseCls, {
buildView : function() {
return {
region : 'north',
height : 20, // give north region a height
margins : '0 5 0 5',
tbar : [
{
xtype : 'tbtext',
text : '<b>&nbsp Extjs Case Study 01</b>'
},'->',{
iconCls : 'icon-fr',
language: 'fr',
text : 'Franšais',
tooltip : 'Franšais',
scope : this,
handler : this.onLanguageButton
},'-',{
iconCls : 'icon-uk',
language: 'en_GB',
text : 'English',
tooltip : 'English',
scope : this,
handler : this.onLanguageButton
}
]
};
},
//BUTTONS: HANDLER
onLanguageButton : function(button) {
window.location.search = Ext.urlEncode({"lng":button.language});
},
});
Ext.reg('APP.panel.North', APP.panel.North);

Ext.ns('APP.panel');

APP.panel.BaseCls = Ext.extend(Ext.Panel, {
layout : 'fit',
initComponent : function() {
this.items = this.buildView();
APP.panel.BaseCls.superclass.initComponent.call(this);
},
buildView : function() {
return {};
}
});Why does the "object oriented" code show in a window but not in a viewport, whereas the "procedural" code shows in both?

Ext version tested:


Ext 3.2.1



Adapter used:


ext



Browser versions tested against:


FF3 (firebug 1.5.4 installed)
Google Chrome



Operating System:


Win 2003 server

wceuppens
28 Jun 2010, 11:40 PM
Someone moved this tread from bugs to help, but according to me, it has to be a bug...
If not, can somebody help?

Animal
28 Jun 2010, 11:52 PM
"But when I use the code in a viewport, the "object oriented" <{xtype:'APP.panel.North'}> does not display. It looks as if it's hidden behind the other regions."

Because it has no region does it?

Read the code. You are creating a layout: 'fit' Panel which contains as its sole child a region: 'north' Panel.

wceuppens
29 Jun 2010, 12:09 AM
As far as I understand, the Ext.extends function does not create a child.
Anyhow, I've tried:
- to eliminate the APP.panel.BaseCls;
- to put "region : 'north'" at the same level as buildView;
- to put "region : 'north'"in APP.panel.BaseCls.
The result remains the same: no north region shown in the viewport.

Any more ideas?

wceuppens
29 Jun 2010, 12:10 AM
Sure this is no bug?

Condor
29 Jun 2010, 12:25 AM
No, it's a bug in your own code.

1. The window has no layout specified, so it uses layout:'auto' and doesn't use any regions you specified.
2. The viewport uses layout:'border', so it requires a component with region:'center' and optionally four extra regions ('north', 'east', 'south' and 'west'). Only one region of every type is supported and components without a region are not supported!
3. xtype:'APP.panel.North' will result in a panel with layout:'fit' (without a region!), in which you insert a panel with region:'north' (fit layout doesn't require a region).

wceuppens
29 Jun 2010, 1:22 AM
Sorry Condor, Animal, but I'm at a loss here:
"1. The window has no layout specified, so it uses layout:'auto' and doesn't use any regions you specified."
==> I understand that much.

"2. The viewport uses layout:'border', so it requires a component with region:'center' and optionally four extra regions ('north', 'east', 'south' and 'west'). Only one region of every type is supported and components without a region are not supported!"
==> I have "center, east and west" regions and they show in the viewport. The "north" region is hidden behind those.
21168

"3. xtype:'APP.panel.North' will result in a panel with layout:'fit' (without a region!), in which you insert a panel with region:'north' (fit layout doesn't require a region). "
==> I do not understand where I have to put the "region:'north' here. I tried to replace the "layout: fit" in the baseCls by "region:'north'", but still don't see my north region.

Any help would be welcome...:(

Animal
29 Jun 2010, 1:42 AM
Don't use "items" in the App.panel.North!

items means CHILD items. It CONTAINS another Panel!

Just set it up with region: 'north', and make it do what you want. No need to insert an "item" into it.

wceuppens
29 Jun 2010, 2:12 AM
But there are no "items" in APP.panel.North, just a "tbar"...

Animal
29 Jun 2010, 2:19 AM
Read your own code.



this.items = this.buildView();

wceuppens
29 Jun 2010, 3:00 AM
At last I got it to work...
The problem was not only to move up the "region: 'north'" one level, but also the "height" parameter...

APP.panel.North = Ext.extend(APP.panel.BaseCls, {
region : 'north',
height : 30, // give north region a height
border : false,
margins : '0 5 0 5',

buildView : function() {
return {
// region : 'north',
// height : 20, // give north region a height
// border : false,
// margins : '0 5 0 5',
tbar : [.......................................Thank you all for your help...

Animal
29 Jun 2010, 3:21 AM
You are still CONTAINING another Panel for no good reason. It all just adds to performance problems.

CrazyEnigma
29 Jun 2010, 7:23 AM
So from all this, do you think it is a bug still?

99% of errors is cause by the user:
Not understanding how to use layout, overnesting, and not understanding the API.

Rarely is it a bug.

Animal
29 Jun 2010, 7:25 AM
Your base class is still



Ext.ns('APP.panel');

APP.panel.BaseCls = Ext.extend(Ext.Panel, {
layout : 'fit',
initComponent : function() {
this.items = this.buildView();
APP.panel.BaseCls.superclass.initComponent.call(this);
},
buildView : function() {
return {};
}
});


So it ALWAYS will CONTAIN something. It has items!

wceuppens
29 Jun 2010, 9:22 AM
Ok, you experts, you and Extjs are giving me a hard time. The problem seems to me that you have to many options to do the same thing, which can lead to confusion... (Didn't have those problems during my COBOL and RPG days, although I even than I forbade the use of certain operation codes).
Anyhow, I gave it another try. I got rid of the baseCls, since it did't do a lot anyhow and put my configuration in initcomponent.
Will this pass your scrutiny? (It does work, but is it good???)


buildViewport : function() {
var viewport = new Ext.Viewport({
layout : 'border',
items: [
{xtype: 'APP.panel.North2'},
east.Panel,
west.Panel,
centre.Panel,
]
});
Ext.ns("APP.panel");
APP.panel.North2 = Ext.extend(Ext.Panel, {
initComponent : function() {
Ext.apply( this, {
region : 'north',
height : 30, // give north region a height
border : false,
margins: '0 5 0 5',
tbar : this.buildTbar()

});
APP.panel.North2.superclass.initComponent.call(this);
},

buildTbar: function() {
return [
{
xtype : 'tbtext',
text : '<b>&nbsp Extjs Case Study 01</b>'
},'->',{
iconCls : 'icon-fr',
language: 'fr',
text : 'Franšais',
tooltip : 'Franšais',
scope : this,
handler : this.onLanguageButton
},'-',{
iconCls : 'icon-uk',
language: 'en_GB',
text : 'English',
tooltip : 'English',
scope : this,
handler : this.onLanguageButton
}
];
},

//BUTTONS: HANDLER
onLanguageButton : function(button) {
window.location.search = Ext.urlEncode({"lng":button.language});
}

});
Ext.reg('APP.panel.North2', APP.panel.North2);

Animal
29 Jun 2010, 9:39 AM
Yes, that's an empty Panel with a top toolbar. So it's progress.

Not sure why you would use that as the north region!

Personally, I'd just configure a Toolbar with region: 'north', and use that! No point having it wrapped in a Panel!

wceuppens
30 Jun 2010, 6:28 AM
The K.I.S.S. principle indeed (where the last "S" must be me..)

Ext.ns("APP.panel");

APP.panel.North = Ext.extend(Ext.Toolbar, {
initComponent : function() {
Ext.apply( this, {
region : 'north',
height : 30, // give north region a height
border : false,
margins : '0 5 0 5',
items : this.buildTbar()
});
APP.panel.North.superclass.initComponent.call(this);
},

buildTbar: function() {
return [
{
xtype : 'tbtext',
text : '<b>&nbsp Extjs Case Study 01</b>'
},'->',{
iconCls : 'icon-fr',
language: 'fr',
text : 'Franšais',
tooltip : 'Franšais',
scope : this,
handler : this.onLanguageButton
},'-',{
iconCls : 'icon-uk',
language: 'en_GB',
text : 'English',
tooltip : 'English',
scope : this,
handler : this.onLanguageButton
}
];
},

//BUTTONS: HANDLER
onLanguageButton : function(button) {window.location.search = Ext.urlEncode({"lng":button.language});}
});
Ext.reg('APP.panel.North', APP.panel.North);

I suppose that this is the simpliest I can get it.
Thanks again to Animal and Condor.

Animal
30 Jun 2010, 6:41 AM
That's one of the 10,000 ways you can skin a cat with Ext.