/ext-4.1.0_b3/examples/writer/writer.js

https://bitbucket.org/srogerf/javascript · JavaScript · 393 lines · 364 code · 29 blank · 0 comment · 14 complexity · d1219942e6d1cd7dd7f04a9bc5c7946b MD5 · raw file

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