Making the leap

[Roman2012]

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)

        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

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:

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

[mitchellsimoens]

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.

[Roman2012]

Hi,

I've tried doing this after a successful login:

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

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