PDA

View Full Version : [CLOSED]EditorGridPanel: data cannot load but successfully responded by the server



erosszz
4 Feb 2010, 9:25 PM
most of the code is base from Ext.data.DataWriter Example (http://www.extjs.com/forum/../deploy/dev/examples/writer/writer.html)

the below code successfully called the Ext.data.HttpProxy api read url and confirmed by checking the firebug watch & console.

there is no other error messages.

UserGrid.js


Ext.ns('RosenSantei', 'RosenSantei.user');
/**
* RosenSantei.user.Grid
* A typical EditorGridPanel extension.
*/
RosenSantei.user.Grid = Ext.extend(Ext.grid.EditorGridPanel, {
frame: true,
height: 300,
width: 500,
style: 'margin-top: 10px',

initComponent : function() {

// typical viewConfig
this.viewConfig = {
forceFit: true
};

// relay the Store's CRUD events into this grid so these events can be conveniently listened-to in our application-code.
//this.relayEvents(this.store, ['destroy', 'save', 'update']);
this.relayEvents(this.store, ['save', 'update']);

this.bbar = this.buildBottomToolbar();

// super
RosenSantei.user.Grid.superclass.initComponent.call(this);
},

/**
* buildBottomToolbar
*/
buildBottomToolbar : function() {
return ['<b>@cfg:</b>', '-', {
text: 'autoSave',
enableToggle: true,
//pressed: true,
tooltip: 'When enabled, Store will execute Ajax requests as soon as a Record becomes dirty.',
toggleHandler: function(btn, pressed) {
this.store.autoSave = pressed;
},
scope: this
}, '-', {
text: 'batch',
enableToggle: true,
pressed: true,
tooltip: 'When enabled, Store will batch all records for each type of CRUD verb into a single Ajax request.',
toggleHandler: function(btn, pressed) {
this.store.batch = pressed;
},
scope: this
}, '-', {
text: 'writeAllFields',
enableToggle: true,
tooltip: 'When enabled, Writer will write *all* fields to the server -- not just those that changed.',
toggleHandler: function(btn, pressed) {
store.writer.writeAllFields = pressed;
},
scope: this
}, '-', {
text: 'Save',
iconCls: 'icon-save',
tooltip: 'Save changes',
handler: this.onSave,
scope: this
}, '-'];
},

/**
* onSave
*/
onSave : function(btn, ev) {
this.store.save();
}//,

});

UserGridWriter.js (store.() method called upon grid's afterrender event)


// Create HttpProxy instance. Notice new configuration parameter "api" here instead of load. However, you can still use
// the "url" paramater -- All CRUD requests will be directed to your single url instead.
var proxy = new Ext.data.HttpProxy({
api: {
read : 'userread.htm',
update: 'userupdate.htm'
}
});

// Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, [
{name: 'id'},
{name: 'email', allowBlank: false},
{name: 'first', allowBlank: false},
{name: 'last', allowBlank: false}
]);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: false
});

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
id: 'user',
proxy: proxy,
reader: reader,
writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
autoSave: true // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
});

//// load the store immeditately
//store.load();

// A new generic text field
var textField = new Ext.form.TextField();

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: textField},
{header: "First", width: 50, sortable: true, dataIndex: 'first', editor: textField},
{header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: textField}
];

//create user.Grid instance (@see UserGrid.js)
var userGrid = new RosenSantei.user.Grid({
//renderTo: 'user-grid',
store: store,
columns : userColumns,
loadMask: true
});

userGrid.on('afterrender', function () {
store.load();
});

response text


json = "{" +
"total:8, success:true, message:'message1'" +
" data:{" +
" {id:1, email:'[email protected]', first:'firstname1', last:'lastname1'}," +
" {id:2, email:'[email protected]', first:'firstname2', last:'lastname2'}," +
" {id:3, email:'[email protected]', first:'firstname3', last:'lastname3'}," +
" {id:4, email:'[email protected]', first:'firstname4', last:'lastname4'}," +
" {id:5, email:'[email protected]', first:'firstname5', last:'lastname5'}," +
" {id:6, email:'[email protected]', first:'firstname6', last:'lastname6'}," +
" {id:7, email:'[email protected]', first:'firstname7', last:'lastname7'}," +
" {id:8, email:'[email protected]', first:'firstname8', last:'lastname8'}" +
" }" +
"}";
include order


<script type="text/javascript" src="<%=request.getContextPath() %>/js/extend/UserGrid.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/extend/UserGridWriter.js"></script>

container


.....
layout: 'border',
bodyBorder: false,
defaults: {
collapsible: true,
split: true,
animFloat: false,
autoHide: false,
useSplitTips: true
},
items: [
{
region: 'north',
id: 'kanriUser-north-panel',
title: 'User kanri',
height: 200,
minSize:200,
maxSize:500,
layout:'fit',
tbar: kanriUserMenuBar,
items: [ userGrid ]

}
........

erosszz
4 Feb 2010, 9:45 PM
i'll check my json... it seems to be invalid..

erosszz
4 Feb 2010, 9:51 PM
forgot the quotes and brackets...

correct json string format


json = "{" +
"'total':8, 'success':true, 'message':'message1', " +
" 'data':[" +
" {'id':1, 'email':'[email protected]', 'first':'firstname1', 'last':'lastname1'}," +
" {'id':2, 'email':'[email protected]', 'first':'firstname2', 'last':'lastname2'}," +
" {'id':3, 'email':'[email protected]', 'first':'firstname3', 'last':'lastname3'}," +
" {'id':4, 'email':'[email protected]', 'first':'firstname4', 'last':'lastname4'}," +
" {'id':5, 'email':'[email protected]', 'first':'firstname5', 'last':'lastname5'}," +
" {'id':6, 'email':'[email protected]', 'first':'firstname6', 'last':'lastname6'}," +
" {'id':7, 'email':'[email protected]', 'first':'firstname7', 'last':'lastname7'}," +
" {'id':8, 'email':'[email protected]', 'first':'firstname8', 'last':'lastname8'}" +
" ]" +
"}";



My apologies...