1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | // Application instance for showing user-feedback messages. |
---|
8 | var App = new Ext.App({}); |
---|
9 | |
---|
10 | // Create a standard HttpProxy instance. |
---|
11 | var proxy = new Ext.data.HttpProxy({ |
---|
12 | url: 'app.php/users' |
---|
13 | }); |
---|
14 | |
---|
15 | // Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response |
---|
16 | var reader = new Ext.data.JsonReader({ |
---|
17 | totalProperty: 'total', |
---|
18 | successProperty: 'success', |
---|
19 | idProperty: 'id', |
---|
20 | root: 'data' |
---|
21 | }, [ |
---|
22 | {name: 'id'}, |
---|
23 | {name: 'email', allowBlank: false}, |
---|
24 | {name: 'first', allowBlank: false}, |
---|
25 | {name: 'last', allowBlank: false} |
---|
26 | ]); |
---|
27 | |
---|
28 | // The new DataWriter component. |
---|
29 | var writer = new Ext.data.JsonWriter(); |
---|
30 | |
---|
31 | // Typical Store collecting the Proxy, Reader and Writer together. |
---|
32 | var store = new Ext.data.Store({ |
---|
33 | id: 'user', |
---|
34 | restful: true, // <-- This Store is RESTful |
---|
35 | proxy: proxy, |
---|
36 | reader: reader, |
---|
37 | writer: writer, // <-- plug a DataWriter into the store just as you would a Reader |
---|
38 | listeners: { |
---|
39 | write : function(store, action, result, response, rs) { |
---|
40 | App.setAlert(response.success, response.message); |
---|
41 | } |
---|
42 | } |
---|
43 | }); |
---|
44 | |
---|
45 | // Let's pretend we rendered our grid-columns with meta-data from our ORM framework. |
---|
46 | var userColumns = [ |
---|
47 | {header: "ID", width: 40, sortable: true, dataIndex: 'id'}, |
---|
48 | {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})}, |
---|
49 | {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})}, |
---|
50 | {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})} |
---|
51 | ]; |
---|
52 | |
---|
53 | // load the store immeditately |
---|
54 | store.load(); |
---|
55 | |
---|
56 | Ext.onReady(function() { |
---|
57 | Ext.QuickTips.init(); |
---|
58 | |
---|
59 | // use RowEditor for editing |
---|
60 | var editor = new Ext.ux.grid.RowEditor({ |
---|
61 | saveText: 'Update' |
---|
62 | }); |
---|
63 | |
---|
64 | // Create a typical GridPanel with RowEditor plugin |
---|
65 | var userGrid = new Ext.grid.GridPanel({ |
---|
66 | renderTo: 'user-grid', |
---|
67 | iconCls: 'icon-grid', |
---|
68 | frame: true, |
---|
69 | title: 'Users', |
---|
70 | autoScroll: true, |
---|
71 | height: 300, |
---|
72 | store: store, |
---|
73 | plugins: [editor], |
---|
74 | columns : userColumns, |
---|
75 | tbar: [{ |
---|
76 | text: 'Add', |
---|
77 | iconCls: 'silk-add', |
---|
78 | handler: onAdd |
---|
79 | }, '-', { |
---|
80 | text: 'Delete', |
---|
81 | iconCls: 'silk-delete', |
---|
82 | handler: onDelete |
---|
83 | }, '-'], |
---|
84 | viewConfig: { |
---|
85 | forceFit: true |
---|
86 | } |
---|
87 | }); |
---|
88 | |
---|
89 | /** |
---|
90 | * onAdd |
---|
91 | */ |
---|
92 | function onAdd(btn, ev) { |
---|
93 | var u = new userGrid.store.recordType({ |
---|
94 | first : '', |
---|
95 | last: '', |
---|
96 | email : '' |
---|
97 | }); |
---|
98 | editor.stopEditing(); |
---|
99 | userGrid.store.insert(0, u); |
---|
100 | editor.startEditing(0); |
---|
101 | } |
---|
102 | /** |
---|
103 | * onDelete |
---|
104 | */ |
---|
105 | function onDelete() { |
---|
106 | var rec = userGrid.getSelectionModel().getSelected(); |
---|
107 | if (!rec) { |
---|
108 | return false; |
---|
109 | } |
---|
110 | userGrid.store.remove(rec); |
---|
111 | } |
---|
112 | |
---|
113 | }); |
---|