How to pass values from one view of ext js to another view of extjs?

[vasanth.kvj]

In your controller, after server validation - valid user or not

function doLogin(){
    var name = Ext.get('username').getValue();
    var pass = Ext.get('pass').getValue();
    
    var myHomePage = Ext.create('LoginSucess', {
        username: name
        password: pass
    });
    // destroy the login page
    Ext.getCmp('loginpage').destroy();
    //Render your home page
    myHomePage.renderTo(Ext.getBody());    
}

Ext.define('LoginSucess', {
    username: '',
    password: '',
     initComponent: function () {
         Ext.apply(this, {
             items:[{
                 xtype: 'container',
                 html: 'Logged in as User ' + this.username
             }]
         });
     }    
});

[anandhi]

Its going to the Login sucess view bt the user name what i am giving its not displaying.
i am having doubt

Ext.define('LoginSucess', { username: '',//what i have to give here.. password: '',

[vasanth.kvj]

While defining any view (i.e Ext.define) with custom attributes, no need to pass any value but while creating the view you need to pass, which will override the default value..

in your case username is ' ' by default and while creating LoginSuccess in doLogin() - Controller, you need to pass username (XXXX) and password.(YYYY)

init component surely knows this.username - XXXX and password as YYYY .

[anandhi]

xt.define('app2', {
extend: 'Ext.form.Panel',

title: 'Registration Form',
id:'loginform',
renderTo: Ext.getBody(),
bodyPadding: 20,
width: 350,


url:'application',
method:'POST',

defaultType: 'textfield',
items: [{

fieldLabel: 'First Name',
name: 'first',
id:'first',

allowBlank: false
}, {
fieldLabel: 'Password',
name: 'pass',
id:'pass',
inputType: 'password',
allowBlank: false
},

{
fieldLabel: 'Email',
name: 'email',
vtype:'email',
allowBlank: false,

}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate',
allowBlank: false
},{
xtype: 'numberfield',
name: 'numberfield1',
fieldLabel: 'age',
value: 5,
minValue: 1,
maxValue: 100
},
{
xtype: 'textareafield',
name: 'textarea1',
fieldLabel: 'Location',

}
],

buttons: [{
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
},{
text: 'Login',

handler: function () {
// The getForm() method returns the Ext.form.Basic instance:
var form = this.up('form').getForm();
if (form.isValid()) {
// Submit the Ajax request and handle the response
form.submit({

success: function (form, action) {

response = Ext.decode(action.responseText);

var name = Ext.get('first').getValue();
var pass = Ext.get('pass').getValue();

/* var paneltab = Ext.create('app3');
Ext.getCmp('loginform').destroy();
Ext.Viewport.add(paneltab);*/

var myHomePage = Ext.create('app3', {
username: name,
password: pass
});
// destroy the login page
Ext.getCmp('loginform').destroy();
//Render your home page
myHomePage.renderTo(Ext.getBody());

},










failure: function (form, action) {
Ext.Msg.alert('Failed', action.result.value);
}
});
}
}
}]

});

//app3.js

Ext.define('app3', {
extend: 'Ext.form.Panel',
title: 'Login',
username: '',
password: '',
initComponent: function () {
Ext.apply(this, {
items:[{
xtype: 'container',
html: 'Logged in as User ' + this.username
}]
});
}
});

is this correct i have pass values from app2 to app3

[anandhi]

sorry for troubling u.i now only started learning extjs so i couldnt catch u .thank u for ur help

[vasanth.kvj]

Thats ok... What you did so far is correct.

Now can you debug your code with firebug in two places..

1. handler function of your button - success()
2. Check init() of 'app3'

In both cases you should able to see the values while passing to new view and inside new view's init ()

[anandhi]

In the next view i didnt get username