PDA

View Full Version : Pls Help! JsonStore



squalo
24 Aug 2011, 12:42 AM
After three days without any success, I beg for some help here:

I got a valid (jsonlint.com) , simple JSON file on the server:


{
"total":"134",
"data":[{
"id":"1",
"word":"xyz",
"wort1":"xyz",
"wort2":"sample",
"wort3":"",
"wort4":""
},
{
"id":"2",
"word":"xyz2",
"wort1":"xyz2",
"wort2":"sample2",
"wort3":"sample2",
"wort4":"sample2"
},
....


and I want to load this file into a simple grid, based on an EXTJS example file (restful.js)
But I always got an read-exception thrown by the DataProxy. Firebug and the FF-BugConsole shows me no errors. What the heck I'm doing wrong?
Appreciating any hints.



/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/
// Application instance for showing user-feedback messages.
var App = new Ext.App({});

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
url: 'engl_hints.json'
});


// 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
fields: [
{name: 'id', mapping: 'id', allowBlank: false, type: 'int'},
{name: 'word', mapping: 'word', allowBlank: false},
{name: 'wort1', mapping: 'wort1', allowBlank: false},
{name: 'wort2', mapping: 'wort2', allowBlank: true},
{name: 'wort3', mapping: 'wort3', allowBlank: true},
{name: 'wort4', mapping: 'wort4', allowBlank: true}]
});

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

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.JsonStore({
autoDestroy: true,
autoLoad: true,
storeId: 'vocabs',
restful: true, // <-- This Store is RESTful
proxy: proxy,
reader: reader,
writer: writer // <-- plug a DataWriter into the store just as you would a Reader
});

////
// ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
// upon Ext.data.DataProxy class. This is handy for centralizing user-feedback messaging into one place rather than
// attaching listenrs to EACH Store.
//
// Listen to all DataProxy beforewrite events
//
Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
App.setAlert(App.STATUS_NOTICE, "Before " + action);
});

////
// all write events
//
Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
App.setAlert(true, action + ':' + res.message);
});

////
// all exception events
//
Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
App.setAlert(false, "Something bad happend while executing " + action);
});

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns = [
{header: "ID", width: 20, sortable: false, dataIndex: 'id'},
{header: "word", width: 80, sortable: true, dataIndex: 'word', editor: new Ext.form.TextField({})},
{header: "Wort1", width: 50, sortable: false, dataIndex: 'wort1', editor: new Ext.form.TextField({})},
{header: "Wort2", width: 50, sortable: false, dataIndex: 'wort2', editor: new Ext.form.TextField({})},
{header: "Wort3", width: 50, sortable: false, dataIndex: 'wort3', editor: new Ext.form.TextField({})},
{header: "Wort4", width: 50, sortable: false, dataIndex: 'wort4', editor: new Ext.form.TextField({})}
];


Ext.onReady(function() {
Ext.QuickTips.init();

// 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: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Vocables',
height: 300,
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({
id: '',
word : '',
wort1: '',
wort2: '',
wort3: '',
wort4: ''
});
editor.stopEditing();
userGrid.store.insert(0, u);
editor.startEditing(0);
}
/**
* onDelete
*/
function onDelete() {
var rec = userGrid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
userGrid.store.remove(rec);
}

});