1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    1
    copianet is on a distinguished road

      1  

    Default Open view on tap button

    Open view on tap button


    Hi!
    I am a newbe user of Sencha Touch 2.
    I can try to modify "Device Example", in particular I have Notification View with 3 button which open a pop-up. How can I do if I want to open on tap another view?

    In view I have added a button
    Code:
    {                text: 'Find City',
                    id: 'findCity',
                    action: 'find_city'
                },
    in controller I have
    Code:
    findCity: {
                    tap: 'onFindCity'
                }
    
    onFindCity: function() {
    ???? what code to open geolocation view ???
       },
    Thank you a lot!

  2. #2
    Sencha User steffenbrem's Avatar
    Join Date
    Mar 2012
    Posts
    36
    Vote Rating
    2
    steffenbrem is on a distinguished road

      0  

    Default


    To push other views, you need to have a navigation view container. You can define a navigation view like this:

    Code:
    Ext.define('Application.view.Users', {
        extend: 'Ext.navigation.View',
    
        xtype: 'userspage',
    
        config: {        
            items: [
                {
                    xtype: 'userslistpage'
                }
            ]
        }
    });
    What this does is it defines a navigation view with xtype "userspage", we assign a xtype, so we can easily grap a reference to this object. Then we give the navigation view (which has it's own toolbar) a title.

    Then of course, we want to show the user a page when they are viewing this view (:P). We do this by giving the navigation view an item, again, we use a xtype to define the view (Note that we haven't created this view yet, I will create this later on).

    Okay, now what? Well, we go make de view "UsersList". Create a new folder in your view directory called: "users" (this folder relates to the Users.js view file). Now create in this folder a file called: "List.js" (Oh, I forgot to mention, I'm doing this little tutorial following the MVC pattern). Your view file should look something like this:

    Code:
    Ext.define('Application.view.users.List', {
        extend: 'Ext.List',
    
        xtype: 'userslistpage', // Here is our xtype! :)
    
        config: {
            title: 'Userslist,
    
            itemTpl: [
                '{someItem} - {date}'
            ].join(''),
        
            store: 'Users' // Just as an example, im not really gonna create this store, lol...
        }
    });
    Okay! Now, we just got a single page with a list. Noting special... But! It is within a navigation view container. This means, that we can get a reference to this navigation view from our controller and push another view. Hmm, I don't think you understand this yet, so I will explain...

    Let's create our controller first. In this controller the only thing I wanna do is listen for a tap event and then do something (pushing another view).

    Our "Users.js" controller:
    Code:
    Ext.define('Application.controller.Users', {
        extend: 'Ext.app.Controller',
    
        config: {
            refs: {
                userspage: 'userspage' // Lol, easy? We just created a reference to our navigation view, again, we use the xtype of this view file...
            },
            control: {
                'userslistpage': {
                    itemtap: 'showDetails'
                }
            }
        },
    
        showDetails: function( list, index, target, record, e ) {
            this.getUserspage().push({
                xtype: 'usersdetailspage' // Again, we did not create this page yet! But, we will :) with this xtype 
            });
        }
    });
    Now we have our controller setup and we now only have to create the view "users/Details.js" and give it the xtype "usersdetailspage". Let's create it

    Code:
    Ext.define('Application.view.users.Details', {
        extend: 'Ext.Panel',
    
        xtype: 'usersdetailspage',
    
        config: {
            title: 'User details',
            html: 'Your user details here, I don't cover this part, because this tutorial will get too big :P'
        }
    });
    Finally :P We now have our files, but, you have to include those views and controllers etc. in your app.js file. Your app.js should look something like this:

    Code:
    Ext.application({
        name: 'Application',
    
        controllers: ['Users'],
        views: ['Users', 'users.List', 'users.Details'],
    
        launch: function() {
             // Create a viewport or something... Idk..
        }
    });
    Yeah Done.. If you have any question, ask me, I will answer....

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    22
    Vote Rating
    1
    dwayne2700 is on a distinguished road

      0  

    Default


    Let me ask a quick question. I see the process for selecting an item from a list but what if you want to display another view when a button is pressed. I've been able to build the navigation panel and the button is displayed. I can add a function to my controller that will display a note to the console when the button is pressed but I just can not seem to get a view to display.

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar