autoCreateViewport and view transition animation.

[bweiler]

I'm having a trouble with the autoCreateViewport and animations. Here's where I am confused.


* Specifying a ref for my-viewport doesn't allow me to use this.getViewport(). Instead, the Ext.Viewport instance is returned. However, Ext.ComponentQuery.query({xtype: 'my-viewport') works fine.


* The code below does not animate view transitions when a contact is selected from the list. Is this supported yet or am I doing something wrong?


I check the forums and it is not yet clear where transitions are supported in ST2 pr2.


Thanks,


Bruce

/**
 * 
 * The application displays a list of contact names.
 * 
 * Notes:
 * * The loader is required to dynamically load classes.
 * * The appFolder property is only needed if a different name is used for the app directory.
 * * Specifying the controller allows the controller to be invoked automatically.
 */
Ext.Loader.setConfig({ 
    enabled: true 
}); 
//Ext.Loader.setPath('Test', 'app');
Ext.application({
    name: 'Test',
    appFolder: 'app',  // Only required if the app folder has a different name
    //models: ['ContactModel'],
    controllers: ['ContactController'],  // Instatiate the controller
    autoCreateViewport: true,  // Viewport.js must exist in the view directory

    launch: function() {
        console.log("Test application launched.", Test);
    }
});

Ext.define('Test.controller.ContactController', {


    extend: 'Ext.app.Controller',

    // Get the device type
    config: {
        profile: Ext.os.deviceType.toLowerCase()
    },

    //models: ['ContactModel'],  // Create the model instances
    stores: ['ContactListData'],  // Create the store instances
    views: ['ContactList', 'Contact'],  // Create the view instances

    // Use refs to simplify controller access to views
    refs: [
        {
            ref: 'contactList',
            selector: 'contactlistview',
            //xtype: 'contactlistview',
            autoCreate: true
        },
        {
            ref: 'contact',
            selector: 'contactview',
            //xtype: 'contactview',
            autoCreate: true
        },
        {
            ref: 'viewport',
            selector: 'viewport',
            xtype: 'my-viewport'
        }
    ],

    init: function() {

        console.log('controller init called');

        // Setup the listeners
        this.control({
            'contactlistview': {
                painted: this.onRender
            },
            'contactlistview list': {
                itemtap: this.onItemTap
            }
        });
    },

    /**
     * Called when the {@link #profile} configuration has changed. The value of this configuration should be either "desktop", 
     * "tablet" or "phone". We then change the layout of the application based on what device it is.
     */
    updateProfile: function(profile) {

        this.viewport = Ext.ComponentQuery.query('my-viewport')[0];
        //this.viewport = this.getViewport();

        console.log("viewport", this.viewport);

        if (profile == "phone") {
            // Add the contact list to the viewport.
            this.viewport.setActiveItem(this.getContactList());
        } else {
            // Add the contact list to the viewport.
            this.viewport.add({xtype: 'contactlistview'});
            this.viewport.setActiveItem(this.getContactList());
        }
    },



    onItemTap: function(view, index, item, event) {

        var name = view.getStore().getAt(index).data;

        console.log('itemtap event', view, index, item, event);

        this.getViewport().add({xtype: 'contactview'});
        this.getContact().setHtml("Hello " + name.firstName + " " + name.lastName);
       this.getViewport().setActiveItem(this.getContact());
});

/**
 * @class Test.view.Viewport
 * @extends Ext.Container
 * 
 * The viewport is the main container for the contact list.
 * 
 * Notes:
 * * The viewport is required
 */
Ext.define('Test.view.Viewport', {
    extend: 'Ext.Container',
    xtype: 'my-viewport',
    
    config: {
        // Fullscreen is required to automatically add the viewport to Ext.Viewport
        fullscreen: true,
        layout: {
            type: 'card',
            animation: {
                type: 'slide',
                direction: 'left'
            }
        }
    }
});

/**
 * @class Test.view.ContactList
 * @extends Ext.Container
 * 
 * The contact list view displays a list of contact names.
 * 
 * Notes:
 * * The class name must match the file location and name.
 * * The xtype property is required and must be the lowercase view class name.
 */
Ext.define('Test.view.ContactList', {
    extend: 'Ext.Container',

    config: {
        layout: 'fit',
        items: [
            {
                xtype: 'toolbar',
                title: 'Contact List',
                docked: 'top',
            },
            {
                xtype: 'list',
                store: 'ContactListData',
                 itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
            }
        ]
    }
});

/**
 * @class Test.view.Contact
 * @extends Ext.Container
 * 
 * The contactview displays the contact name.
 * 
 * Notes:
 * * The class name must match the file location and name.
 * * The xtype property is required and must be the lowercase view class name.
 */
Ext.define('Test.view.Contact', {
    extend: 'Ext.Container',

    config: {
        layout: 'fit',
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Contact',
            },
            {
                xtype: 'panel',
            }
        ]
    }
});

[rdougan]

There are currently issues with how the autoCreateViewport, MVC Viewport and the Ext.Viewport are handled in PR2. If you create your own Viewport in your application, Ext.Viewport still exists, which is incorrect. This will be addressed before GA.