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
    35,704
    Answers
    3356
    Vote Rating
    750
    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

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