150 lines
4.4 KiB
JavaScript
150 lines
4.4 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
|
|
Contact: http://www.sencha.com/contact
|
|
|
|
GNU General Public License Usage
|
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
|
packaging of this file.
|
|
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
|
at http://www.sencha.com/contact.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
// Application instance for showing user-feedback messages.
|
|
var App = new Ext.App({});
|
|
|
|
// Create a standard HttpProxy instance.
|
|
var proxy = new Ext.data.HttpProxy({
|
|
url: 'app.php/users'
|
|
});
|
|
|
|
// 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: false // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
|
|
});
|
|
|
|
// 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
|
|
});
|
|
|
|
// load the store immeditately
|
|
store.load();
|
|
|
|
////
|
|
// ***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: 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({})}
|
|
];
|
|
|
|
|
|
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: 'Users',
|
|
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({
|
|
first : '',
|
|
last: '',
|
|
email : ''
|
|
});
|
|
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);
|
|
}
|
|
|
|
});
|