PDA

View Full Version : How to pass values from one view of ext js to another view of extjs?



anandhi
13 Feb 2013, 8:22 PM
How to pass values from one view of ext js to another view of extjs?

Hi,i want to know to pass values of form from one view to another view where the same values user enter in first view.

This my html code,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8" />
<title>Ext.form.Basic Example</title>
<link rel="stylesheet" href="ext-all.css"/>
<link rel="stylesheet" href="ext-standard.css"/>
<script src="ext-all-debug.js"></script>

<script src="app.js"></script>

</head>
<body>

</body>
</html>

app.js


Ext.onReady(function () {
Ext.create('Ext.Button', {
id:'button',
bodyPadding: 10,
pack:'center',
align:'center',
text: 'Register',


listeners: {
click: function () {
var paneltab = Ext.create('app2');
Ext.getCmp('button').destroy();

Ext.Viewport.add(paneltab);
} // click
}, // listeners
renderTo: Ext.getBody()
}); // create()
}); // onReady()

this is app2.

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

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


// Any configuration items here will be automatically passed along to
// the Ext.form.Basic instance when it gets created.
// The form will submit an AJAX request to this URL when submitted
url:'application',
method:'POST',

defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
id:'first',

allowBlank: false
}, {
fieldLabel: 'Password',
name: '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(form.responseText);
console.log(action.result.action1);
Ext.Msg.alert('Success' , action.result.action1,
function(btn,text)
{
//Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
//Ext.app2.remove(Ext.app2.getActiveItem(), true);
if (btn=='ok')
{


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


}
}
);


},






/*Ext.create('Ext.container.Viewport', {

items: [
{
xtype: 'screenb'
}
]
});*/
/* Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'User Form',
height: 100,
width: 515,
defaults: {
xtype: 'textfield',
labelAlign: 'top',
padding: 10
},
layout: {
type: 'hbox'
},
items: [{
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}]
});*/



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

});

from this i am calling server application.java

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html");

// Actual logic goes here.
PrintWriter out = response.getWriter();
String action=request.getParameter("first");
String action1=request.getParameter("pass");
String action2=request.getParameter("email");




if(action.equalsIgnoreCase("tcs")&&(action1.equalsIgnoreCase("company"))&&(action2.equalsIgnoreCase("[email protected]")))
{
System.out.println("hello"+"\t"+action+"\t"+action1);
response.getWriter().println("{success:true,action1:'Welcome to Tata consultancy services' }");

}



else{
System.out.println(action);
System.out.println(action1);
response.getWriter().println("{falied:true, value:'error,Login Failed'}");}




}

}

after server response it will call app3.js




Ext.define('app3', {
extend: 'Ext.form.Panel',
title: 'Login',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'User Name',
allowBlank: false, // requires a non-empty value

}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Password',
inputType: 'password',

// requires value to be a valid email address format
}]

});

i want to know how to pass values of firstname and password from app2.js to app3.js

scottmartin
14 Feb 2013, 10:25 AM
Perhaps a singleton class that can be used to set/get variables?



// Utils.js
Ext.define('MYAPP.Utils', {
singleton : true,

// var, functions

});

// app.js
requires: [
'MYAPP.Utils'
],



You can set/get as needed in your actions.

Scott.

anandhi
14 Feb 2013, 6:45 PM
Thank you.but i cant understand how to set/get variables.

scottmartin
15 Feb 2013, 5:11 AM
You just access the value as:



MYAPP.Utils.myValue // assign inside of utils


Scott.

vasanth.kvj
15 Feb 2013, 8:40 AM
Check this: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Class-cfg-config and http://docs.sencha.com/ext-js/4-1/#!/guide/class_system





Ext.define('SmartPhone', {
config: {
hasTouchScreen: false,
operatingSystem: 'Other',
price: 500
},
constructor: function (cfg) {
this.initConfig(cfg);
}
});
var iPhone = new SmartPhone({
hasTouchScreen: true,
operatingSystem: 'iOS'
});
iPhone.getPrice(); // 500; iPhone.getOperatingSystem(); // 'iOS' iPhone.getHasTouchScreen(); // true;






var myWindow = Ext.create('My.own.Window', {
title: 'Hello World',
bottomBar: {
height: 60
}
});
alert(myWindow.getTitle());
myWindow.setTitle('Something New');
myWindow.setBottomBar({
height: 100
});

scottmartin
15 Feb 2013, 8:52 AM
Another advantage of using config is your setters/getters are already created for you:
http://www.sencha.com/learn/sencha-class-system

Scott.

anandhi
17 Feb 2013, 8:33 PM
i want to know how pass values to next page what user enters.i tried using class its not working for me.it s working for same view .i need to pass values from one view to another

vasanth.kvj
17 Feb 2013, 9:06 PM
Next Page or Next View? Can you provide the sample code which you tried?

anandhi
17 Feb 2013, 9:32 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8" />
<title>Ext.form.Basic Example</title>
<link rel="stylesheet" href="ext-all.css"/>
<link rel="stylesheet" href="ext-standard.css"/>
<script src="ext-all-debug.js"></script>

<script src="app.js"></script>

</head>
<body>

</body>
</html>

app.js


Ext.onReady(function () {
Ext.create('Ext.Button', {
id:'button',
bodyPadding: 10,
pack:'center',
align:'center',
text: 'Register',


listeners: {
click: function () {
var paneltab = Ext.create('app2');
Ext.getCmp('button').destroy();

Ext.Viewport.add(paneltab);
} // click
}, // listeners
renderTo: Ext.getBody()
}); // create()
}); // onReady()

this is app2.

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

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


// Any configuration items here will be automatically passed along to
// the Ext.form.Basic instance when it gets created.
// The form will submit an AJAX request to this URL when submitted
url:'application',
method:'POST',

defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
id:'first',

allowBlank: false
}, {
fieldLabel: 'Password',
name: '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(form.responseText);
console.log(action.result.action1);
Ext.Msg.alert('Success' , action.result.action1,
function(btn,text)
{
//Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
//Ext.app2.remove(Ext.app2.getActiveItem(), true);
if (btn=='ok')
{


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


}
}
);


},






/*Ext.create('Ext.container.Viewport', {

items: [
{
xtype: 'screenb'
}
]
});*/
/* Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'User Form',
height: 100,
width: 515,
defaults: {
xtype: 'textfield',
labelAlign: 'top',
padding: 10
},
layout: {
type: 'hbox'
},
items: [{
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}]
});*/



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

});

from this i am calling server application.java

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html");

// Actual logic goes here.
PrintWriter out = response.getWriter();
String action=request.getParameter("first");
String action1=request.getParameter("pass");
String action2=request.getParameter("email");




if(action.equalsIgnoreCase("tcs")&&(action1.equalsIgnoreCase("company"))&&(action2.equalsIgnoreCase("[email protected]")))
{
System.out.println("hello"+"\t"+action+"\t"+action1);
response.getWriter().println("{success:true,action1:'Welcome to Tata consultancy services' }");

}



else{
System.out.println(action);
System.out.println(action1);
response.getWriter().println("{falied:true, value:'error,Login Failed'}");}




}

}

after server response it will call app3.js




Ext.define('app3', {
extend: 'Ext.form.Panel',
title: 'Login',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'User Name',
allowBlank: false, // requires a non-empty value

}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Password',
inputType: 'password',

// requires value to be a valid email address format
}]

});

i want to know how to pass values of firstname and password from app2.js to app3.js

anandhi
17 Feb 2013, 9:33 PM
i have already posted the sample code which i tried...
i want to pass values to next view only

vasanth.kvj
17 Feb 2013, 10:03 PM
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
17 Feb 2013, 10:29 PM
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
17 Feb 2013, 10:38 PM
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
17 Feb 2013, 10:44 PM
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
17 Feb 2013, 10:48 PM
sorry for troubling u.i now only started learning extjs so i couldnt catch u .thank u for ur help

vasanth.kvj
17 Feb 2013, 10:53 PM
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
17 Feb 2013, 11:01 PM
In the next view i didnt get username