View Full Version : Need help with RESTful Example

20 Jul 2009, 8:23 AM
Dear Bros,

Need your help with RESTful. This is my first time using RESTful. I use the code provided in example to test first.

// Application instance for showing user-feedback messages.
var App = new Ext.App({});

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
url: linkurl

// 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'
}, [
{name: 'id'},
{name: 'email', allowBlank: false},
{name: 'first', allowBlank: false},
{name: 'last', allowBlank: false}

// The new DataWriter component.
var writer = new Ext.data.JsonWriter();

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
id: 'user',
restful: true, // <-- This Store is RESTful
proxy: proxy,
reader: reader,
writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
listeners: {
write : function(store, action, result, response, rs) {
App.setAlert(response.success, response.message);

// 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: new Ext.form.TextField({})},
{header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
{header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}

// load the store immeditately

Ext.onReady(function() {

// use RowEditor for editing
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'

// Create a typical GridPanel with RowEditor plugin
var userGrid = new Ext.grid.GridPanel({
renderTo: document.body,
iconCls: 'icon-grid',
frame: true,
title: title,
collapsible: true,
autoScroll: true,
store: store,
plugins: [editor],
columns : userColumns,
tbar: [{
text: 'Add',
iconCls: 'silk-add',
handler: onAdd
}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: onDelete
}, '-'],
viewConfig: {
forceFit: true

* onAdd
function onAdd(btn, ev) {
var u = new userGrid.store.recordType({
first : '',
last: '',
email : ''
userGrid.store.insert(0, u);
* onDelete
function onDelete() {
var rec = userGrid.getSelectionModel().getSelected();
if (!rec) {
return false;


For test data reponse, I use php as following:

function departmentrestAction()
echo json_encode(array(
'success' => true,
'message' => "Loaded data",
'total' => 6,
'data' => array(
array("id" => 1, "first" => "Wilma", "last" => "Flintstone", "email" => "[email protected]"),
array("id" => 2, "first" => "Wilma", "last" => "Flintstone", "email" => "[email protected]"),
array("id" => 3, "first" => "Pebbles", "last" => "Flintstone", "email" => "[email protected]"),
array("id" => 4, "first" => "Barney", "last" => "Rubble", "email" => "[email protected]"),
array("id" => 5, "first" => "Betty", "last" => "Rubble", "email" => "[email protected]"),
array("id" => 6, "first" => "BamBam", "last" => "Rubble", "email" => "[email protected]")

I just try to echo the test data directly, not yet test other function like update, delete ...

But I see nothing on the grid, and also no error at all.

Can you help me on this issue? Sorry if I ask stupid question. Really appreciate your help.

Warmest Regards
Phi Long

20 Jul 2009, 8:25 AM
FYI, I am using Zend Framework, hence I use function function departmentrestAction()
and the linkurl is ...../departmentrest.

21 Jul 2009, 3:50 AM
I have figured out that the problem is with the Ext.data.HttpProxy. I am using Zend hence the link will be for example:


and the controller that reponse to that page is


it seems that it does not work that way, but I still dun know why. The two link are in same domain, protocol ... so should not have any problem ...

Please help ....