PDA

View Full Version : [FIXED] Ext.application -> autoCreateViewport : false



tobiu
12 Oct 2011, 12:12 PM
there is always a viewport generated, even with setting the config to false.

TommyMaintz
12 Oct 2011, 1:05 PM
Yes, this is correct. Every ST app has a viewport since setting fullscreen: true on a component just adds it as a card in that Viewport.

autoCreateViewport in the application configuration however automatically loads and instantiates the view in the app/view/Viewport.js file, so if you add fullscreen: true to that one it will automatically be added to the Viewport singleton. This view would usually be a container of some sorts, not really an instance of Ext.viewport.Viewport.

Hope this makes sense, but we should probably mention this in the documentation somewhere.

edspencer
12 Oct 2011, 2:28 PM
Hope this makes sense, but we should probably mention this in the documentation somewhere.

Make it so

jairok
13 Oct 2011, 12:24 AM
Sorry, but I misunderstand.

In app.js, I set


Ext.application({
autoCreateViewport : true,
...


Next, I create view\Viewport.js and add into it :


Ext.define('app.view.Viewport', {
extend : 'Ext.viewport.Default',
id: 'MyViewport',
fullscreen: true
});


So now, How to use it ?
Ext.Viewport is another view right ?
How can I add views to this viewport ?

Can you please explain a little... I'm a little bit lost.. even with samples...
thanks

1chiban
13 Oct 2011, 2:45 AM
I'm having the same problem, getting a blank screen. Here's my code:

Application.js:


Ext.Loader.setConfig({ enabled: true });


Ext.application({
name: 'Cars',
//autoCreateViewport: true,
controllers: ['Car'],
models : ['Car'],
stores : ['Car'],

launch: function(){
Ext.create('Cars.view.Viewport');
}
});


Viewport.js


Ext.define('Cars.view.Viewport', {
extend: 'Ext.viewport.Viewport',
requires: ['Cars.view.CarList'],
layout: 'fit',
fullscreen: true,
initComponent: function() {
this.items = {
xtype: 'panel',
layout: {
type: 'card',
align: 'stretch'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar'
}],
items: [{
xtype: 'carlist',
flex: 1
}]
};
this.callParent();
}
});


Any clue?

olouvignes
13 Oct 2011, 5:14 AM
Something like this should work



Ext.define('Cars.view.Viewport', {


extend: 'Ext.viewport.Viewport',
requires: ['Cars.view.CarList'],

config: {
layout: 'fit',
//fullscreen: true, // seems deprecated in 2.0,
items: [],
}

initialize: function() {

this.add([{
xtype: 'panel',
layout: {
type: 'card',
align: 'stretch'
},
items: [{
dock: 'top',
xtype: 'toolbar'
},
{
xtype: 'carlist',
flex: 1
}]
}]);

Ext.Viewport.add(this); // replaces fullscreen option

this.callParent();
}

});

jairok
13 Oct 2011, 5:23 AM
I will try your example.

But look at the Kitchensink example.
In Main, there is NO viewport, no add method used, only declaration....

olouvignes
13 Oct 2011, 5:26 AM
I guess that KitchenSink does not reflect ST 2.0 best practices.

You should use an App.view.Viewport, same as you should try to follow MVC architecture, even for a simple app.

Take a look at Kiva's codesource & some Ext.JS4 tutos :
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1

jairok
13 Oct 2011, 5:45 AM
Ok , works with the getMainView.create()

Jamie Avins
13 Oct 2011, 7:34 AM
I will try your example.

But look at the Kitchensink example.
In Main, there is NO viewport, no add method used, only declaration....
Indeed, this will get cleaned up after MVC is fully completed.

TommyMaintz
13 Oct 2011, 7:40 AM
The kitchensink does follow best practices. Try the following code



Ext.Loader.setConfig({ enabled: true });

Ext.application({
name: 'Cars',
// THIS WILL LOAD THE VIEW IN app/view/Viewport.js
autoCreateViewport: true,
controllers: ['Car'],
models : ['Car'],
stores : ['Car']
});

// THIS SHOULD BE IN app/view/Viewport.js
Ext.define('Cars.view.Viewport', {
extend: 'Ext.Panel', // NOTE WE DONT EXTEND VIEWPORT
requires: ['Cars.view.CarList'],
// PUT CONFIGURATION IN THE CONFIG OBJECT
config: {
layout: 'fit',
// FULLSCREEN TRUE IS NOT DEPRECATED (DOCS ARE WRONG)
// THIS ADDS IT AS A CHILD ITEM TO THE VIEWPORT SINGLETON IN ST
fullscreen: true,
items: {
xtype: 'panel',
layout: {
type: 'card',
align: 'stretch'
},
items: [{
xtype: 'carlist',
flex: 1
}, {
// NOTE THAT DOCKEDITEMS IS DEPRECATED, JUST PUT IT IN ITEMS
dock: 'top',
xtype: 'toolbar'
}]
}
}
});

basememara
29 Nov 2011, 8:39 AM
How do controllers fit into all this?

This is what I am trying:

~/app.js


Ext.Loader.setConfig({
enabled:true
});


Ext.application({
name: 'MvcTestApp',
autoCreateViewport: true,


controllers: [
'Car'
]
);
~/app/controller/Car.js


Ext.define('MvcTestApp.controller.Car', {
extend: 'Ext.app.Controller',

models: [ 'Car' ],
stores: [ 'Cars' ],
views: [ 'CarsList' ]
});
~/app/view/CarsList.js

Ext.define('MvcTestApp.view.CarsList', {
extend: 'Ext.Panel',
alias: 'widget.carslist',
...
});
Is this the right approach? A complete, best practices example of Touch 2 MVC would be great!