ExtJS4 to ST2

[nofx]

Hi, i'm trying to port the ExtJS mvc tutorial to Sencha Touch 2. But i'm having some problems. I'm following this tutorial:

docs.sencha.com/ext-js/4-0/#/guide/application_architecture/

Somewhere in the beginning it says i have to create my app.js file and add the following code in it:

Ext.application({
    name: 'TT',

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Main',
                    html : 'Blaat'
                }
            ]
        });
    }
}); 

But it then complains with the following error:


So i added this to the top of the code:

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

But now it says the following:

XMLHttpRequest cannot load file:///projects/xcode4/Sencha2/www/container/Viewport.js?_dc=1318495537750. Cross origin requests are only supported for HTTP.

Uncaught TypeError: object is not a function

So it looks like it's trying to create Viewport.js somewhere in "www/container/Viewport.js" But obviously that doesn't exist and should not exist. Anyone any idea how to fix this error?

[nofx]

Just another thing, i also tried to change 'Ext.container.Viewport' to 'Ext.Viewport', but that didn't worked either.

I also tried to lookup Viewport in the documentation. But when i try to open it just shows me a spinner. It never really shows the documentation about Viewport... Perhaps it's missing?

http://dev.sencha.com/deploy/touch/docs/


- edit -
Looked it up using the search function from this page:
http://docs.sencha.com/touch/2-0/#!/...wport.Viewport

So it had to be 'Ext.viewport.Viewport'. But now it renders a blank page (no errors)... I guess i should see atleaat a panel with some html text on it right?

[nofx]

Changed layout: 'fit' to fullscreen and now it seems to be working

[mitchellsimoens]

You should not use Ext.Viewport directly in ST2. If you have a Viewport.js (and class name of app.view.Viewport) file in the app/view/ folder then the app will automatically create that Viewport.js class.

The Viewport class in ST2 will always be there and if you specify something with fullscreen as true, it will be added as an item to the Viewport singleton.

[mitchellsimoens]

This is one of the things that will be clarified

[Jurian Baas]

You should not use Ext.Viewport directly in ST2. If you have a Viewport.js (and class name of app.view.Viewport) file in the app/view/ folder then the app will automatically create that Viewport.js class.

The Viewport class in ST2 will always be there and if you specify something with fullscreen as true, it will be added as an item to the Viewport singleton.

Apologies for necroing a thread a month old but would it be possible to clarify your post Mitchell? I have a file named Viewport.js in the app/view directory, but I keep getting a blank screen. I checked the documentation on viewports in ST2 but I couldn't find anything useful.

Is it possible to show us some simple example of how the app/view/Viewport.js file might look like?

Ext.define('App4Cards.view.Viewport', {
    extend : 'Ext.viewport.Viewport',
    layout : 'fullscreen',


    initComponent : function() {
        console.log('Viewport:initComponent');
        this.items = [ {
            xtype : 'tabpanel',
            fullscreen : true,
            tabBarPosition : 'bottom',
            items : [ {
                title : 'Home',
                iconCls : 'home',
                html : 'Home Screen'
            }, {
                title : 'Contact',
                iconCls : 'user',
                html : 'Contact Screen'
            } ]
        } ],


        this.callParent();
    }
});

Thanks,

Jurian.

[mitchellsimoens]

This is one of the confusing things of Sencha Touch 2 I will admit but you don't extend Ext.viewport.Viewport. Ext.viewport.Viewport is a singleton that will always be created and almost everything gets added to it. You need to extend Ext.Panel or Ext.Container for your app's Viewport class and put fullscreen to true on that. Any class with fullscreen will be added to that global Ext.viewport.Viewport instance.

[elishnevsky]

In the docs for Sencha Touch 2 the fullscreen config is marked as deprecated and it says that Ext.Viewport.add() should be used instead - http://docs.sencha.com/touch/2-0/#!/...-cfg-fullscren

So is it okay to rely on Ext.Viewport as the main container for the app and manipulate with items in it, i.e. add and remove components when necessary?