PDA

View Full Version : Extjs integration with struts



narayana4u
6 Aug 2010, 6:23 AM
hi to all,

i am new to extjs. Please any one help me how to ext js integrate with struts2.0. Please help me it is very importent for me.

Please send a mail to me one example on this. My mail id is [email protected]


Thank you very much....

Condor
6 Aug 2010, 6:30 AM
What's the problem?

Ext applications are usually single-page HTML documents that only exchange data (preferably in JSON format) with the server.

Just get yourself a decent JSON library (json-lib or json-taglib) and generate JSON instead of .jsps.

Elijah
6 Aug 2010, 6:54 AM
If you got an application already in place and your trying to bring ExtJS into the picture you will need to change things around on your classes where your not redirecting to action and form pages but have servlets that handle the requests and responds with as Condor pointed out JSON data as the intent is to have a single-page document on the browser.

k.pavithra
15 Dec 2011, 2:11 AM
ExtJS struts Integration

This document explains ExtJS Integration with the struts application. We assume that the struts application is already in place and start explaining how to make it work for ExtJS.
We take simple example of where we have a form with two text fields and a save button. On Successful submission the struts takes me to success page on failure it takes me to failure page. Now to make this work for ExtJS.

ExtJS Model:

Ext.require([
'Ext.form.*'
]);
Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'field1', type: 'string'},
{name: 'field2', type: 'string'},
]
});

ExtJS Store:

Ext.onReady(function() {
Ext.QuickTips.init();
// create the Data Store
var ds = Ext.create("Ext.data.Store",{
model:'myModel',
reader: new Ext.data.JsonReader([
{name: 'field1', mapping: 'accessRight'},
{name: 'field2', mapping: 'resourceName'},
])
});

ExtJS FormPanel:
var formPanel = Ext.create('Ext.form.Panel', {
xtype: 'form',
frame: true,
url:'/myapp/action/MyAction',
method:'POST',
title: 'My Form Page',
width: 600,
height:400,
bodyPadding: 5,
standardSubmit: true, // Having standardSubmit set to true is important.
//Because ExtJS tries to decode the response as JSON and we get error as struts returns
//response with content type text/html.
fieldDefaults: {
labelAlign: 'left',
labelWidth: 200,
anchor: '100%'
},
items: [
{
xtype: 'textfield',
name: 'field1'
},
{
xtype: 'textfield',
name: 'field2'
}
],
buttons: [
{
text: 'Save',
formBind: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
params: {userAction: 'save'},
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed',action.failureType + ' Failure');
}
}
});
} // if
} // handler
} // Save button
]
});
formPanel.render(document.body);
ds.loadData(record); // record is the script variable having json object read from the // request attribute which is set in the MyAction class of struts.
formPanel.getForm().loadRecord(ds.data.map);
});

JSP Page:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="/myapp/js/extJS/bootstrap.js"></script>
<script type="text/javascript">
var record = <%=request.getAttribute("jsonObject")%>;
</script>
<script type="text/javascript" src="/myapp/js/extJS/myFirstExtJS.js"></script>
</head>
<body>
</body>
</html>

Struts Action:

Like for struts requies JSP form field to have matching name as in ActionForm attribute. We need to create JSONObject having the mapping of name-value pair of these attributes. Important thing is we should make sure the name should match the form field names.

Below is the example for JSON creation for the above given example. We need to have this code called in Action class.

JSONObject obj = new JSONObject();
obj.put("success",true);
obj.put("msg","Sucessfully Submitted");
JSONObject objData = new JSONObject();
objData .put("field1","My First Field"); // field1 is the name used for form field
objData .put("field2","My Second Field"); // field2 is the name used for form field
obj.put("data", objData)
request.setAttribute("jsonObject", obj);

If the submit is successful, then struts does mapping forward to success page otherwise to failure page. In the browser we get the success / failure page displayed. Whichever been returned by the struts.

k.pavithra
15 Dec 2011, 10:03 PM
In case we don't want to have standardSubmit of the request. Then in struts have a global forward set like this:
<global-forwards>
<forward name="json" path="/jsp/struts/common/json.jsp"/>
</global-forwards>

json.jsp
<%
out.print(request.getAttribute("jsonObject"));
out.flush();
%>

In Action class do:
return mapping.findForward(“json”);

priyapratheep
16 May 2012, 7:05 AM
Hi k.pavithra

Thanks for the code.I followed the above code , in my code

url:'/path/strutsaction.do',
method:'POST',
lines i am getting error of 404 /path/strutsaction.do can not fine error


<action attribute="UploadFileFormCsDoc"
name="DynaFormBean"
path="/apse-projectmgmt-portlet/FileUploadAndSaveCsDoc" type="com.bmtap.apse.projectmgmt.action.UploadAndSaveCsDocAction"
scope="request" input="/jsp/view.jsp">

<forward name="success" path="/jsp/project_costingsheet1.jsp" redirect="true"/>
<forward name="failure" path="/jsp/project_costingsheet1.jsp" redirect="true"/>
</action>


public class UploadAndSaveAction extends Action
{ private Logger logger = LogManager.getLogger(UploadAndSaveAction.class);
public ActionForward execute( ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception{


var csDocPanel = new Ext.form.FormPanel({
standardSubmit: true,
frame:true,
title: 'Costing Sheet Documents',
width: 970,
bodyStyle:'padding:5px 5px 0',
defaultType: 'textfield',
method: 'post',
items: [{
id:'sendFileFieldId',
name: 'sendFileField',
labelStyle: 'martin:5px;padding:5px;width:200px',
inputType: 'file',
border: false }],

buttons: [{ text: 'Submit', handler: function(button, event) { csDocPanel.getForm().submit({ action:'/apse-projectmgmt-portlet/FileUploadAndSaveCsDoc.do', method:'POST', failure: function() { Ext.Msg.alert('Error', 'Can not save data.'); } }); } }] });