projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | Ext.define('Writer.Form', {\r |
| 2 | extend: 'Ext.form.Panel',\r | |
| 3 | alias: 'widget.writerform',\r | |
| 4 | \r | |
| 5 | requires: ['Ext.form.field.Text'],\r | |
| 6 | \r | |
| 7 | initComponent: function(){\r | |
| 8 | Ext.apply(this, {\r | |
| 9 | activeRecord: null,\r | |
| 10 | iconCls: 'icon-user',\r | |
| 11 | frame: true,\r | |
| 12 | title: 'User -- All fields are required',\r | |
| 13 | defaultType: 'textfield',\r | |
| 14 | bodyPadding: 5,\r | |
| 15 | fieldDefaults: {\r | |
| 16 | anchor: '100%',\r | |
| 17 | labelAlign: 'right'\r | |
| 18 | },\r | |
| 19 | items: [{\r | |
| 20 | fieldLabel: 'Email',\r | |
| 21 | name: 'email',\r | |
| 22 | allowBlank: false,\r | |
| 23 | vtype: 'email'\r | |
| 24 | }, {\r | |
| 25 | fieldLabel: 'First',\r | |
| 26 | name: 'first',\r | |
| 27 | allowBlank: false\r | |
| 28 | }, {\r | |
| 29 | fieldLabel: 'Last',\r | |
| 30 | name: 'last',\r | |
| 31 | allowBlank: false\r | |
| 32 | }],\r | |
| 33 | dockedItems: [{\r | |
| 34 | xtype: 'toolbar',\r | |
| 35 | dock: 'bottom',\r | |
| 36 | ui: 'footer',\r | |
| 37 | items: ['->', {\r | |
| 38 | iconCls: 'icon-save',\r | |
| 39 | itemId: 'save',\r | |
| 40 | text: 'Save',\r | |
| 41 | disabled: true,\r | |
| 42 | scope: this,\r | |
| 43 | handler: this.onSave\r | |
| 44 | }, {\r | |
| 45 | iconCls: 'icon-user-add',\r | |
| 46 | text: 'Create',\r | |
| 47 | scope: this,\r | |
| 48 | handler: this.onCreate\r | |
| 49 | }, {\r | |
| 50 | iconCls: 'icon-reset',\r | |
| 51 | text: 'Reset',\r | |
| 52 | scope: this,\r | |
| 53 | handler: this.onReset\r | |
| 54 | }]\r | |
| 55 | }]\r | |
| 56 | });\r | |
| 57 | this.callParent();\r | |
| 58 | },\r | |
| 59 | \r | |
| 60 | setActiveRecord: function(record){\r | |
| 61 | this.activeRecord = record;\r | |
| 62 | if (record) {\r | |
| 63 | this.down('#save').enable();\r | |
| 64 | this.getForm().loadRecord(record);\r | |
| 65 | } else {\r | |
| 66 | this.down('#save').disable();\r | |
| 67 | this.getForm().reset();\r | |
| 68 | }\r | |
| 69 | },\r | |
| 70 | \r | |
| 71 | onSave: function(){\r | |
| 72 | var active = this.activeRecord,\r | |
| 73 | form = this.getForm();\r | |
| 74 | \r | |
| 75 | if (!active) {\r | |
| 76 | return;\r | |
| 77 | }\r | |
| 78 | if (form.isValid()) {\r | |
| 79 | form.updateRecord(active);\r | |
| 80 | this.onReset();\r | |
| 81 | }\r | |
| 82 | },\r | |
| 83 | \r | |
| 84 | onCreate: function(){\r | |
| 85 | var form = this.getForm();\r | |
| 86 | \r | |
| 87 | if (form.isValid()) {\r | |
| 88 | this.fireEvent('create', this, form.getValues());\r | |
| 89 | form.reset();\r | |
| 90 | }\r | |
| 91 | \r | |
| 92 | },\r | |
| 93 | \r | |
| 94 | onReset: function(){\r | |
| 95 | this.setActiveRecord(null);\r | |
| 96 | this.getForm().reset();\r | |
| 97 | }\r | |
| 98 | });\r | |
| 99 | \r | |
| 100 | Ext.define('Writer.Grid', {\r | |
| 101 | extend: 'Ext.grid.Panel',\r | |
| 102 | alias: 'widget.writergrid',\r | |
| 103 | \r | |
| 104 | requires: [\r | |
| 105 | 'Ext.grid.plugin.CellEditing',\r | |
| 106 | 'Ext.form.field.Text',\r | |
| 107 | 'Ext.toolbar.TextItem'\r | |
| 108 | ],\r | |
| 109 | \r | |
| 110 | initComponent: function(){\r | |
| 111 | \r | |
| 112 | this.editing = Ext.create('Ext.grid.plugin.CellEditing');\r | |
| 113 | \r | |
| 114 | Ext.apply(this, {\r | |
| 115 | iconCls: 'icon-grid',\r | |
| 116 | frame: true,\r | |
| 117 | plugins: [this.editing],\r | |
| 118 | dockedItems: [{\r | |
| 119 | xtype: 'toolbar',\r | |
| 120 | items: [{\r | |
| 121 | iconCls: 'icon-add',\r | |
| 122 | text: 'Add',\r | |
| 123 | scope: this,\r | |
| 124 | handler: this.onAddClick\r | |
| 125 | }, {\r | |
| 126 | iconCls: 'icon-delete',\r | |
| 127 | text: 'Delete',\r | |
| 128 | disabled: true,\r | |
| 129 | itemId: 'delete',\r | |
| 130 | scope: this,\r | |
| 131 | handler: this.onDeleteClick\r | |
| 132 | }]\r | |
| 133 | }, {\r | |
| 134 | weight: 2,\r | |
| 135 | xtype: 'toolbar',\r | |
| 136 | dock: 'bottom',\r | |
| 137 | items: [{\r | |
| 138 | xtype: 'tbtext',\r | |
| 139 | text: '<b>@cfg</b>'\r | |
| 140 | }, '|', {\r | |
| 141 | text: 'autoSync',\r | |
| 142 | enableToggle: true,\r | |
| 143 | pressed: true,\r | |
| 144 | tooltip: 'When enabled, Store will execute Ajax requests as soon as a Record becomes dirty.',\r | |
| 145 | scope: this,\r | |
| 146 | toggleHandler: function(btn, pressed){\r | |
| 147 | this.store.autoSync = pressed;\r | |
| 148 | }\r | |
| 149 | }, {\r | |
| 150 | text: 'batch',\r | |
| 151 | enableToggle: true,\r | |
| 152 | pressed: true,\r | |
| 153 | tooltip: 'When enabled, Store will batch all records for each type of CRUD verb into a single Ajax request.',\r | |
| 154 | scope: this,\r | |
| 155 | toggleHandler: function(btn, pressed){\r | |
| 156 | this.store.getProxy().batchActions = pressed;\r | |
| 157 | }\r | |
| 158 | }, {\r | |
| 159 | text: 'writeAllFields',\r | |
| 160 | enableToggle: true,\r | |
| 161 | pressed: false,\r | |
| 162 | tooltip: 'When enabled, Writer will write *all* fields to the server -- not just those that changed.',\r | |
| 163 | scope: this,\r | |
| 164 | toggleHandler: function(btn, pressed){\r | |
| 165 | this.store.getProxy().getWriter().writeAllFields = pressed;\r | |
| 166 | }\r | |
| 167 | }]\r | |
| 168 | }, {\r | |
| 169 | weight: 1,\r | |
| 170 | xtype: 'toolbar',\r | |
| 171 | dock: 'bottom',\r | |
| 172 | ui: 'footer',\r | |
| 173 | items: ['->', {\r | |
| 174 | iconCls: 'icon-save',\r | |
| 175 | text: 'Sync',\r | |
| 176 | scope: this,\r | |
| 177 | handler: this.onSync\r | |
| 178 | }]\r | |
| 179 | }],\r | |
| 180 | columns: [{\r | |
| 181 | text: 'ID',\r | |
| 182 | width: 40,\r | |
| 183 | sortable: true,\r | |
| 184 | resizable: false,\r | |
| 185 | draggable: false,\r | |
| 186 | hideable: false,\r | |
| 187 | menuDisabled: true,\r | |
| 188 | dataIndex: 'id',\r | |
| 189 | renderer: function(value){\r | |
| 190 | return Ext.isNumber(value) ? value : ' ';\r | |
| 191 | }\r | |
| 192 | }, {\r | |
| 193 | header: 'Email',\r | |
| 194 | flex: 1,\r | |
| 195 | sortable: true,\r | |
| 196 | dataIndex: 'email',\r | |
| 197 | field: {\r | |
| 198 | type: 'textfield'\r | |
| 199 | }\r | |
| 200 | }, {\r | |
| 201 | header: 'First',\r | |
| 202 | width: 100,\r | |
| 203 | sortable: true,\r | |
| 204 | dataIndex: 'first',\r | |
| 205 | field: {\r | |
| 206 | type: 'textfield'\r | |
| 207 | }\r | |
| 208 | }, {\r | |
| 209 | header: 'Last',\r | |
| 210 | width: 100,\r | |
| 211 | sortable: true,\r | |
| 212 | dataIndex: 'last',\r | |
| 213 | field: {\r | |
| 214 | type: 'textfield'\r | |
| 215 | }\r | |
| 216 | }]\r | |
| 217 | });\r | |
| 218 | this.callParent();\r | |
| 219 | this.getSelectionModel().on('selectionchange', this.onSelectChange, this);\r | |
| 220 | },\r | |
| 221 | \r | |
| 222 | onSelectChange: function(selModel, selections){\r | |
| 223 | this.down('#delete').setDisabled(selections.length === 0);\r | |
| 224 | },\r | |
| 225 | \r | |
| 226 | onSync: function(){\r | |
| 227 | this.store.sync();\r | |
| 228 | },\r | |
| 229 | \r | |
| 230 | onDeleteClick: function(){\r | |
| 231 | var selection = this.getView().getSelectionModel().getSelection()[0];\r | |
| 232 | if (selection) {\r | |
| 233 | this.store.remove(selection);\r | |
| 234 | }\r | |
| 235 | },\r | |
| 236 | \r | |
| 237 | onAddClick: function(){\r | |
| 238 | var rec = new Writer.Person({\r | |
| 239 | first: '',\r | |
| 240 | last: '',\r | |
| 241 | email: ''\r | |
| 242 | }), edit = this.editing;\r | |
| 243 | \r | |
| 244 | edit.cancelEdit();\r | |
| 245 | this.store.insert(0, rec);\r | |
| 246 | edit.startEditByPosition({\r | |
| 247 | row: 0,\r | |
| 248 | column: 1\r | |
| 249 | });\r | |
| 250 | }\r | |
| 251 | });\r | |
| 252 | \r | |
| 253 | Ext.define('Writer.Person', {\r | |
| 254 | extend: 'Ext.data.Model',\r | |
| 255 | fields: [{\r | |
| 256 | name: 'id',\r | |
| 257 | type: 'int',\r | |
| 258 | useNull: true\r | |
| 259 | }, 'email', 'first', 'last'],\r | |
| 260 | validators: {\r | |
| 261 | email: {\r | |
| 262 | type: 'length',\r | |
| 263 | min: 1\r | |
| 264 | },\r | |
| 265 | first: {\r | |
| 266 | type: 'length',\r | |
| 267 | min: 1\r | |
| 268 | },\r | |
| 269 | last: {\r | |
| 270 | type: 'length',\r | |
| 271 | min: 1\r | |
| 272 | }\r | |
| 273 | }\r | |
| 274 | });\r | |
| 275 | \r | |
| 276 | Ext.require([\r | |
| 277 | 'Ext.data.*',\r | |
| 278 | 'Ext.tip.QuickTipManager',\r | |
| 279 | 'Ext.window.MessageBox'\r | |
| 280 | ]);\r | |
| 281 | \r | |
| 282 | Ext.onReady(function(){\r | |
| 283 | Ext.tip.QuickTipManager.init();\r | |
| 284 | \r | |
| 285 | Ext.create('Ext.button.Button', {\r | |
| 286 | margin: '0 0 20 20',\r | |
| 287 | text: 'Reset sample database back to initial state',\r | |
| 288 | renderTo: document.body,\r | |
| 289 | tooltip: 'The sample database is stored in the session, including any changes you make. Click this button to reset the sample database to the initial state',\r | |
| 290 | handler: function(){\r | |
| 291 | Ext.getBody().mask('Resetting...');\r | |
| 292 | Ext.Ajax.request({\r | |
| 293 | url: 'app.php/example/reset',\r | |
| 294 | callback: function(options, success, response) {\r | |
| 295 | Ext.getBody().unmask();\r | |
| 296 | \r | |
| 297 | var didReset = true,\r | |
| 298 | o;\r | |
| 299 | \r | |
| 300 | if (success) {\r | |
| 301 | try {\r | |
| 302 | o = Ext.decode(response.responseText);\r | |
| 303 | didReset = o.success === true;\r | |
| 304 | } catch (e) {\r | |
| 305 | didReset = false;\r | |
| 306 | }\r | |
| 307 | } else {\r | |
| 308 | didReset = false;\r | |
| 309 | }\r | |
| 310 | \r | |
| 311 | if (didReset) {\r | |
| 312 | store.load();\r | |
| 313 | main.down('#form').setActiveRecord(null);\r | |
| 314 | Ext.example.msg('Reset', 'Reset successful');\r | |
| 315 | } else {\r | |
| 316 | Ext.MessageBox.alert('Error', 'Unable to reset example database');\r | |
| 317 | }\r | |
| 318 | \r | |
| 319 | }\r | |
| 320 | });\r | |
| 321 | }\r | |
| 322 | });\r | |
| 323 | \r | |
| 324 | var store = Ext.create('Ext.data.Store', {\r | |
| 325 | model: 'Writer.Person',\r | |
| 326 | autoLoad: true,\r | |
| 327 | autoSync: true,\r | |
| 328 | proxy: {\r | |
| 329 | type: 'jsonp', \r | |
| 330 | api: {\r | |
| 331 | read: 'app.php/users/view',\r | |
| 332 | create: 'app.php/users/create',\r | |
| 333 | update: 'app.php/users/update',\r | |
| 334 | destroy: 'app.php/users/destroy'\r | |
| 335 | },\r | |
| 336 | reader: {\r | |
| 337 | type: 'json',\r | |
| 338 | successProperty: 'success',\r | |
| 339 | rootProperty: 'data',\r | |
| 340 | messageProperty: 'message'\r | |
| 341 | },\r | |
| 342 | writer: {\r | |
| 343 | type: 'json',\r | |
| 344 | encode: true,\r | |
| 345 | writeAllFields: false,\r | |
| 346 | rootProperty: 'data'\r | |
| 347 | },\r | |
| 348 | listeners: {\r | |
| 349 | exception: function(proxy, response, operation){\r | |
| 350 | Ext.MessageBox.show({\r | |
| 351 | title: 'REMOTE EXCEPTION',\r | |
| 352 | msg: operation.getError(),\r | |
| 353 | icon: Ext.MessageBox.ERROR,\r | |
| 354 | buttons: Ext.Msg.OK\r | |
| 355 | });\r | |
| 356 | }\r | |
| 357 | }\r | |
| 358 | },\r | |
| 359 | listeners: {\r | |
| 360 | write: function(proxy, operation){\r | |
| 361 | if (operation.action === 'destroy') {\r | |
| 362 | main.child('#form').setActiveRecord(null);\r | |
| 363 | }\r | |
| 364 | Ext.example.msg(operation.action, operation.getResultSet().message);\r | |
| 365 | }\r | |
| 366 | }\r | |
| 367 | });\r | |
| 368 | \r | |
| 369 | var main = Ext.create('Ext.container.Container', {\r | |
| 370 | padding: '0 0 0 20',\r | |
| 371 | width: 500,\r | |
| 372 | height: Ext.themeName === 'neptune' ? 700 : 650,\r | |
| 373 | renderTo: document.body,\r | |
| 374 | layout: {\r | |
| 375 | type: 'vbox',\r | |
| 376 | align: 'stretch'\r | |
| 377 | },\r | |
| 378 | items: [{\r | |
| 379 | itemId: 'form',\r | |
| 380 | xtype: 'writerform',\r | |
| 381 | manageHeight: false,\r | |
| 382 | margin: '0 0 10 0',\r | |
| 383 | listeners: {\r | |
| 384 | create: function(form, data){\r | |
| 385 | store.insert(0, data);\r | |
| 386 | }\r | |
| 387 | }\r | |
| 388 | }, {\r | |
| 389 | itemId: 'grid',\r | |
| 390 | xtype: 'writergrid',\r | |
| 391 | title: 'User List',\r | |
| 392 | flex: 1,\r | |
| 393 | store: store,\r | |
| 394 | listeners: {\r | |
| 395 | selectionchange: function(selModel, selected) {\r | |
| 396 | main.child('#form').setActiveRecord(selected[0] || null);\r | |
| 397 | }\r | |
| 398 | }\r | |
| 399 | }]\r | |
| 400 | });\r | |
| 401 | });\r |