PDA

View Full Version : Wrong collapsing with border layout (MVC)



p0rsche
20 Nov 2011, 10:40 PM
Hi all!
I have a problem with wrong collapsing in my MVC ExtJS app. Please take a look at the picture below:
http://imageshack.us/photo/my-images/716/wrongcollapse.jpg29436

viewport.js

Ext.define('Dashboard.view.Viewport', {
extend: 'Ext.container.Viewport',

requires: [
'Dashboard.view.Header',
'Dashboard.view.Footer',
'Dashboard.view.Leftsidebar',
'Dashboard.view.MainContent'
],

id: 'dashboard-viewport',
layout: {
type: 'border',
padding: 0
},
defaults: {
split: true
},
initComponent: function(){
Ext.apply(this, {
items: [{
xtype: 'header'
},{
xtype: 'footer'
},{
xtype: 'leftsidebar'
},{
xtype: 'maincontent'
}
]
});
this.callParent();
}
});
Header.js

Ext.define('Dashboard.view.Header', {
extend: 'Ext.Component',
alias: 'widget.header',
id: 'header',

region: 'north',
height: 40,
autoEl: {
tag: 'div',
html: '<p>where is collapsed header?</p>'
}
})
Footer.js:
Ext.define('Dashboard.view.Footer', {
extend: 'Ext.Panel',
alias: 'widget.footer',
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: false,
title: 'Status bar',
margins: '0 0 0 0'
})
LeftSidebar.js
Ext.define('Dashboard.view.Leftsidebar', {
extend: 'Ext.Panel',
alias: 'widget.leftsidebar',
region: 'west',
stateId: 'navigation-panel',
id: 'west-panel', // see Ext.getCmp() below
title: 'User menu',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion',

items: [{
title: 'Sessions',
html: 'some here',
iconCls: 'nav' // see the HEAD section for style used
}, {
title: 'Tools',
html: '<p>File uploader and other tools here</p>',
iconCls: 'settings'
}, {
title: 'Information',
html: '<p>Total information here</p>',
iconCls: 'info'
}]
});
Maincontent.js
Ext.define('Dashboard.view.MainContent', {
extend: 'Ext.tab.Panel',
alias: 'widget.maincontent',

region: 'center',
deferredRender: true,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'table-content',
title: 'Table',
autoScroll: true
},{
contentEl: 'summary-content',
title: 'Summary',
autoScroll: true
},{
contentEl: 'analysis-content',
title: 'Analysis',
autoScroll: true
}]

})



What's wrong?
Thanks!

p0rsche
20 Nov 2011, 11:46 PM
Damn!
I don't know why, but renaming alias from 'widget.header' to something different ('widget.north-panel') works good! Any comments?

P.S. I have answered to my own questions twice..

flanders
20 Nov 2011, 11:51 PM
You had an xtype collision with Ext.panel.Header: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Header
(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Header)
And therefore this (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component) list isn't as complete as it states.

p0rsche
21 Nov 2011, 2:06 AM
You had an xtype collision with Ext.panel.Header: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Header
(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Header)
And therefore this (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component) list isn't as complete as it states.
Yeah, because I've double-checked this list and didn't find any 'header' xtype.
Another question is why I haven't got any error?

flanders
21 Nov 2011, 2:39 AM
I have made a post in the documentation shortcommings thread so hopefully it will be looked into and fixed.

As for the no error part, I wouldn't know. Maybe you can delve into the inner workings of Ext.define() and propose an improvement that can be incorporated in the development builds.

p0rsche
21 Nov 2011, 6:07 AM
anyway thanks for helping\describing!