1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
    bweiler is on a distinguished road

      0  

    Default autoCreateViewport and view transition animation.

    autoCreateViewport and view transition animation.


    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




    Code:
    /**
     * 
     * 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);
        }
    });


    Code:
    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());
    });


    Code:
    /**
     * @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'
                }
            }
        }
    });


    Code:
    /**
     * @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>',
                }
            ]
        }
    });


    Code:
    /**
     * @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',
                }
            ]
        }
    });

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi