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("anu@gmail.com")))
{
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?

Code:

// 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:

Code:

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/#!...ass-cfg-config and http://docs.sencha.com/ext-js/4-1/#!/guide/class_system

Code:


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;

Code:

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("anu@gmail.com")))
{
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

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

Thread Tools

Search Thread

Display

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

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

Use Config to get and Set your values.

Use Config to get and Set your values.

Next page or next view?

Next page or next view?

Tags for this Thread