PDA

View Full Version : Main view not rendered



jeanluca
2 Feb 2012, 9:01 AM
Hello


I have this simple app which initially should render MyNs.view.Main
Something like:




Ext.application({
....
views: ['Main'],
....
launch: function() {
Ext.create('MyNs.view.Main') ;
// or
// Ext.Viewport.add(Ext.create('MyNs.view.Main')) ; // ??
}
....
}) ;

I don't get errors (I'm using Beta2 debug) but I get a white screen. When I copy the code from Main in there like

launch: function() {
var panel = Ext.create('Ext.Panel', {
layout: 'card',
items: [
{
html: "First Item"
},
{
html: "Second Item"
}
]
});
Ext.Viewport.add(Ext.create(panel)) ;
}
it works. Finally, here is the code inside MyNs.view.Main

Ext.define('Owa.view.Main', {
extend : 'Ext.Panel',
alias : 'widget.MainView',
fullscreen: true,
layout: 'card',


items: [
{
html: "First Item"
},
{
html: "Second Item"
}
]


});



Any suggestions what might be the problem ?

cheers
Luca

mitchellsimoens
2 Feb 2012, 11:50 AM
Ext.create('MyNs.view.Main');

Would work if fullscreen was set to true. I'm sure if you do this it will simply work.


Ext.create('MyNs.view.Main', {
fullscreen : true
});

jeanluca
2 Feb 2012, 1:56 PM
Now I get a grey background (not white anymore :)

I think something else is still wrong (but still no errors)

Here is my launch code

launch: function() {

// first panel creation
var panel = Ext.create('MyNs.view.Main', {
fullscreen: true
}) ;

// second panel creation
panel = Ext.create('Ext.Panel', {
layout: 'card',
fullscreen: true,
items: [
{
html: "First Item"
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
]
}) ;
Ext.Viewport.add(panel);
}
As you can see I set 'panel' twice. The first panel creation seems to break the app, because in this setting I get a grey background only. When I remove the first panel creation it works.
I must do something wrong, any suggestions ?

mitchellsimoens
2 Feb 2012, 1:58 PM
var panel = Ext.create('MyNs.view.Main', {
fullscreen: true
}) ;

// second panel creation
panel = Ext.create('Ext.Panel', {
layout: 'card',
fullscreen: true,
items: [
{
html: "First Item"
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
]
}) ;
Ext.Viewport.add(panel);

What that is doing is the first panel is created and automatically added to the Ext.Viewport as the first card. The second panel also has fullscreen to true so it is automatically added to the Ext.Viewport but the first one is still the active item. You don't need to do Ext.Viewport.add if the component has fullscreen to true, it's already added to Ext.Viewport.

jeanluca
2 Feb 2012, 11:13 PM
ok, so does that mean that the viewport's layout is by default 'card' ?

Furthermore, inside the MyNs.view.Main I moved the 'layout' and 'items' inside 'config' and it worked!!

Thanks!!

UPDATE: I think I've red in the docs that it defaults to 'card', but I cannot use it a such:


launch: function() {
Ext.create('MyNs.view.Main', {
fullscreen: true
}) ;
this.viewport.add(
Ext.create('MyNs.view.Secundo', {
fullscreen: true
})
) ;
this.viewport.setActiveItem(2) ; // still Main is shown
}
I must misuse the viewport here, right ?

UpDate2: hmmm, add(...) gives an error too!