garlapatikk
2 Jul 2012, 4:02 AM
Hi ,
I'am new to extjs 4.0 along with struts 1.2 i'am using formpanel along with buttons and also i'am using the grid panel.For the first time gridpanel is loading data.when i submit the button ,instead of displaying data in grid.it displaying
{"employee":[{"empid":"187361","empname":"Robert2"}],"success":"success"}.
Please find the code below.
demo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="ext-debug.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="search_form"></div>
<div id="search_results"></div>
</body>
</html>
demo.js
Ext.onReady(function(){
var dstore = new Ext.data.JsonStore({
// proxy: proxy,
proxy:{
type:'ajax',
url:'http://localhost:8080/JsonEx/getvalues.do?param=submitGrid',
reader:{
type:'json',
root: 'employee'
}
},fields:[{name:'empid',type:'string'},{name:'empname',type:'string'}] ,
autoLoad: true
});
var grid = new Ext.grid.GridPanel({
store: dstore,
columns: [
{id:'empid', header: "Emp Id", width: 60, sortable: true, dataIndex: 'empid'},
{id: 'empname', header: "Emp Name", width: 100, sortable: true, dataIndex: 'empname'}
],
stripeRows: true,
autoExpandColumn: 'data',
height:350,
width: 500,
title:'Demo Data'
});
var search = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
standardSubmit: true,
// The form will submit an AJAX request to this URL when submitted
url: 'http://localhost:8080/JsonEx/getvalues.do?param=submitGrid',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'Search Regular Expression',
name: 'pattern',
allowBlank: false
} ],
// Reset and Submit buttons
buttons: [
{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
},
{
text: 'Submit',
formBind: false, //only enabled once the form is valid
disabled: false,
handler: function() {
var form = this.up('form').getForm();
alert("The form obj is:"+form.isValid());
if (form.isValid()) {
form.submit({
success: function(form, action) {
// Ext.Msg.alert('Success', action.result.msg);
Ext.Msg.alert('Success');
},
failure: function(form, action) {
//Ext.Msg.alert('Failed', action.result.msg);
Ext.Msg.alert('Failed');
}
});
}
}
}]
// renderTo: Ext.getBody()
});
search.render('search_form');
grid.render('search_results');
});
GridLoadDataAction class
public void submitGrid(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
// TODO Auto-generated method stub
GridLoadDataForm grldform=(GridLoadDataForm)form;
String pattern=grldform.getPattern();
System.out.println("The pattern is:"+pattern);
JSONArray json=new JSONArray();
JSONObject JSONobj=new JSONObject();
if(pattern==null){
for(int i=0;i<2;i++){
JSONObject jobj=new JSONObject();
jobj.put("empid",i);
jobj.put("empname","Kiran"+i);
json.add(jobj);
}}else{
JSONObject jobj=new JSONObject();
jobj.put("empid","187361");
jobj.put("empname","Robert2");
json.add(jobj);
}
JSONobj.put("employee", json);
JSONobj.put("success", "success");
PrintWriter out= response.getWriter();
out.write(JSONobj.toString());
//out.println(JSONobj.toString());
System.out.println("The jsonobj is:"+JSONobj.size());
System.out.println(JSONobj.toString());
//return null;
// return mapping.findForward("success");
}
I'am new to extjs 4.0 along with struts 1.2 i'am using formpanel along with buttons and also i'am using the grid panel.For the first time gridpanel is loading data.when i submit the button ,instead of displaying data in grid.it displaying
{"employee":[{"empid":"187361","empname":"Robert2"}],"success":"success"}.
Please find the code below.
demo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="ext-debug.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="search_form"></div>
<div id="search_results"></div>
</body>
</html>
demo.js
Ext.onReady(function(){
var dstore = new Ext.data.JsonStore({
// proxy: proxy,
proxy:{
type:'ajax',
url:'http://localhost:8080/JsonEx/getvalues.do?param=submitGrid',
reader:{
type:'json',
root: 'employee'
}
},fields:[{name:'empid',type:'string'},{name:'empname',type:'string'}] ,
autoLoad: true
});
var grid = new Ext.grid.GridPanel({
store: dstore,
columns: [
{id:'empid', header: "Emp Id", width: 60, sortable: true, dataIndex: 'empid'},
{id: 'empname', header: "Emp Name", width: 100, sortable: true, dataIndex: 'empname'}
],
stripeRows: true,
autoExpandColumn: 'data',
height:350,
width: 500,
title:'Demo Data'
});
var search = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
standardSubmit: true,
// The form will submit an AJAX request to this URL when submitted
url: 'http://localhost:8080/JsonEx/getvalues.do?param=submitGrid',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'Search Regular Expression',
name: 'pattern',
allowBlank: false
} ],
// Reset and Submit buttons
buttons: [
{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
},
{
text: 'Submit',
formBind: false, //only enabled once the form is valid
disabled: false,
handler: function() {
var form = this.up('form').getForm();
alert("The form obj is:"+form.isValid());
if (form.isValid()) {
form.submit({
success: function(form, action) {
// Ext.Msg.alert('Success', action.result.msg);
Ext.Msg.alert('Success');
},
failure: function(form, action) {
//Ext.Msg.alert('Failed', action.result.msg);
Ext.Msg.alert('Failed');
}
});
}
}
}]
// renderTo: Ext.getBody()
});
search.render('search_form');
grid.render('search_results');
});
GridLoadDataAction class
public void submitGrid(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
// TODO Auto-generated method stub
GridLoadDataForm grldform=(GridLoadDataForm)form;
String pattern=grldform.getPattern();
System.out.println("The pattern is:"+pattern);
JSONArray json=new JSONArray();
JSONObject JSONobj=new JSONObject();
if(pattern==null){
for(int i=0;i<2;i++){
JSONObject jobj=new JSONObject();
jobj.put("empid",i);
jobj.put("empname","Kiran"+i);
json.add(jobj);
}}else{
JSONObject jobj=new JSONObject();
jobj.put("empid","187361");
jobj.put("empname","Robert2");
json.add(jobj);
}
JSONobj.put("employee", json);
JSONobj.put("success", "success");
PrintWriter out= response.getWriter();
out.write(JSONobj.toString());
//out.println(JSONobj.toString());
System.out.println("The jsonobj is:"+JSONobj.size());
System.out.println(JSONobj.toString());
//return null;
// return mapping.findForward("success");
}