PDA

View Full Version : Moving panel to external file crashes my layout. HELP!!!



Misiu
22 Jun 2012, 1:51 AM
I'm building a simple application that is based on Ext.container.Viewport.

In main application file I'm building view like so:

createLayout : function() {

this.statusBar = Ext.create("Urlopy.Components.Statusbar");
this.centerPanel = Ext.create("Ext.tab.Panel", {
xtype : 'tabpanel',
border : false,
region : 'center',
bodyStyle : 'background:#DBDBDB'
});

this.menuBar = Ext.create("Urlopy.Components.MenuBar.UserMenuBar");
this.centerView=Ext.create("Urlopy.Components.Dashboard.UserDashboard");
this.centerPanel.add(this.centralView);

Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [{
xtype : 'panel',
border : false,
layout : 'border',
items : [
this.centerPanel
],
bbar : this.statusBar,
tbar : this.menuBar
}]
});
}

This creates my layout perfectly.

UserDashboard looks like so:


Ext.define('Urlopy.Components.Dashboard.UserDashboard', {
extend : 'Ext.panel.Panel',
layout : 'border',
border : true,
id : 'user-dashboard',
title: 'Dashboard',
closable: false,
padding : 5,

initComponent : function() {

this.info = Ext.create("Ext.panel.Panel", {
title : 'Twoje informacje',
collapsible : true,
region : 'west',
split : true,
width : 300,
animCollapse : false
});

this.grid = Ext.create("Ext.panel.Panel", {
title : 'Grid',
region : 'center',
split : true
});

this.detailPanel = Ext.create("Ext.panel.Panel", {
title : 'Historia',
collapsible : true,
region : 'east',
split : true,
width : 300,
animCollapse : false
});

this.items = [this.info, this.grid, this.detailPanel];

this.callParent();
}
});

And this works fine, both side panels can be callapsed.

But when I try to move left panel definition to external file like so:


Ext.define('Urlopy.Components.UserInfo', {
extend : 'Ext.panel.Panel',
id : 'user-Panel',
title : 'Panel informacji',
collapsible : true,
split : true,
region : 'west',
width : 200,
animCollapse : false
});

and create info panel in my dashboard like this:

this.info=Ext.create("Urlopy.Components.UserInfo");
layout is created, but when I try to collapse this panel whole layout crashes and menu dissapear.

This is correct bahaviour:
http://dl.dropbox.com/u/1206389/layout-ok.gif

This is my error:
http://dl.dropbox.com/u/1206389/layout-error.gif

What am I doing wrong? Help!

scottmartin
22 Jun 2012, 9:01 AM
Have you create assigning an alias to your component:
alias: 'widget.userinfo'

Then use items and call your panels using xtype.

Scott.

Misiu
22 Jun 2012, 10:59 AM
This is maybe a silly question but do I must create alias for every class that I create?
I'm building my application using code in PertKeepr https://github.com/partkeepr/PartKeepr/

I'll try to build basic layout without asp webservices. Just layout and post my code here so You can look it.

Sorry is this is a noob question, but I'm just starting my adventure with Ext JS :)

scottmartin
22 Jun 2012, 11:07 AM
Required, no ... but it allows you to access items using xtype for lazy access.

Scott.

scottmartin
22 Jun 2012, 11:20 AM
See if this helps:




// desired approach
Ext.define({
alias: 'widget.alias'
});

Ext.onReady({
Ext.create({ // inside ready
xtype: 'alias'
})
});

// your approach
Ext.define({
Ext.create({ // outside ready
});
});

Ext.onReady({
Ext.create({
})
});


Scott.

Misiu
25 Jun 2012, 2:40 AM
I've removed all webservices calls and I've attached my basic layout.

What I'm trying to create is layout similar to portal.
On top I have toolbar/menu and in footer statusbar that will show all server request, login name and clock.
In center i would liek to have tab panel.

By default user will see one unclosable panel, using menu he will be able to add new tabs and close them when he wont be needing them anymore.

When I store every piece of layout in one file it works but when I try to do it object oriented everything crashes :s

Here is how my layout looks:
36504

and here is my code 36501

I know that it's probably a silly mistake, but I cant get this working.

P.S. Sorry for my English. Hope that You will understand most of this :)

scottmartin
27 Jun 2012, 6:16 PM
You application is not able to run, as there are missing externals (Holiday, etc).

Please provide a simple stand-alone app that displays your problem and not your entire application.

It is difficult to setup, make changes and filter through an entire application just to find a basic problem.

We typically do not accept entire applications even for paid support subscriptions.

Regards,
Scott.