1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    39
    Answers
    1
    Vote Rating
    0
    Roman2012 is on a distinguished road

      0  

    Default Unanswered: Making the leap

    Unanswered: Making the leap


    Hi,
    I'm pretty new to the awesome Sencha Touch framework but still can't get some basic things.

    What I'm trying to do is to show a login form, when the user logins get his ID and load his data from the server.

    So, the form part works as needed - the user is able to login, I get his ID and ... I can't make the leap from here.

    What I'd like to do is to load a model from the server and display a DataView of the model, AFTER the user has logged.

    Some help would be much appreciated. Here are parts of my code:
    (I'm posting large parts of my code so that maybe someone will also find it helpful for him)

    Code:
            var LoginForm = Ext.create('Ext.form.Panel', {
                iconCls: 'home',
                title: 'Home',
                standardSubmit: false,
                items: [
                        {
                            xtype: 'fieldset',
                            title: 'Login',
                            id: 'loginform',
                            items: [
                                {
                                    xtype: 'emailfield',
                                    name: 'email',
                                    label: 'Email'
                                },
                                {
                                    xtype: 'passwordfield',
                                    name: 'password',
                                    label: 'Password'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            width: '50%',
                            text: 'Login',
                            ui: 'confirm',
                            handler: function () {
                                var values = LoginForm.getValues();
                                TryLogin(values['email'], values['password']);
                            }
                        }
                ]
            });
            
            
            var SomeDataView = Ext.create('Ext.dataview.DataView',{
                emptyText: 'No Data',
                title: 'My Data',
                iconCls: 'search',
                styleHtmlContent: true,
                store: MyStore,
                itemTpl: [
                    '<div class="myclass">',
                    'hello',
                    '</div>'
                ].join('')
            });
            
            
            var mainPanel = Ext.create('Ext.TabPanel', {
                fullscreen: true,
                tabBarPosition: 'bottom',
                id: 'mainPanel',
                items: [
                    LoginForm,
                    SomeDataView,
                    {
                        xtype: 'toolbar',
                        docked: 'top',
                        title: 'My Mobile Touch'
                    }
                ]
            });
            
            Ext.Viewport.add(mainPanel);
    And my Login function is pretty straightforward

    Code:
    function TryLogin(e, p) {
        var call = ServerAddress + 'login?email=' + e + '&password=' + p;
    
    
        Ext.Viewport.setMasked({
            xtype: 'loadmask',
            message: 'Trying to login'
        });
    
    
        Ext.data.JsonP.request({
            url: call,
            callbackKey: 'callback',
            params: {
                email: e,
                password: p
            },
    
    
            success: function (result) {
                if (result != "-1") {
                    userID = result.uid;
                    Ext.Msg.alert('Login Successful');
                }
                else {
                    Ext.Msg.alert('Email / Password is wrong');
                }
    
    
                Ext.Viewport.setMasked(false);
            },
    
    
            failure: function () {
                console.log('failure');
                Ext.Msg.alert('Please try again.');
                Ext.Viewport.setMasked(false);
            }
        });
    }
    And the model / Store:

    Code:
    var MyStore = Ext.create('Ext.data.Store',{
        autoLoad: false,
        model: 'MyModel',
        sorters: 'Name',
        proxy: {
            type: 'jsonp',
            url: ServerAddress + 'GetUserData?uid=' + userID,
            reader: {
                type: 'json',
                root: ''
            }
        }
    });
    
    
    Ext.regModel('MyModel', {
        fields: ['ID','SomeField']
    });

    Hope it's pretty clear what I'm trying to do.

    Many thanks for the help!
    Roman


  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,756
    Answers
    3462
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    In your success handler of your login server call you can use setActiveItem on Ext.Viewport to add a component and make it visually active. Once the login form has been visually deactivated then you can remove that form.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    39
    Answers
    1
    Vote Rating
    0
    Roman2012 is on a distinguished road

      0  

    Default Didn't work?

    Didn't work?


    Hi,

    I've tried doing this after a successful login:

    Code:
    Ext.Viewport.setActiveItem(1);
    But it didn't work - and the Loading mask was just stuck (so I guess it failed)

    I've also tried this

    Code:
    Ext.Viewport.setActiveItem(
    SomeDataView
    );
    And it gave the same result.

    BTW - If I succeed showing the DataView, will the store load by itself with the given parameters?

    Thanks for the help,Roman


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