PDA

View Full Version : Not loading data in gridpanel when submitting the form



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");
}

scottmartin
2 Jul 2012, 3:04 PM
So your grid is displaying the JSON string? I am not sure if I read this correct.
The following display the data in the grid based on your json.

If this is not what you are referring to, please provide the exact details and perhaps a screen.



Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'empid',
type: 'string'
}, {
name: 'empname',
type: 'string'
}]
});

Ext.onReady(function() {

var user = Ext.create('Ext.data.Store', {
storeId: 'user',
model: 'User',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'employee'
}
}
});

Ext.create('Ext.grid.Panel', {
store: user,
id: 'user',
title: 'Users',
columns: [{
header: 'ID',
dataIndex: 'empid'
}, {
header: 'Name',
dataIndex: 'empname'
}],
height: 300,
width: 400,
renderTo: Ext.getBody()
});

});


Regards,
Scott.