form.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Grids</title>
  5. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
  6. <!-- GC -->
  7. <script type="text/javascript" src="../../ext-all.js"></script>
  8. </head>
  9. <body>
  10. <script type="text/javascript" charset="utf-8">
  11. Ext.require('Ext.data.proxy.LocalStorage');
  12. Ext.onReady(function() {
  13. Ext.define('User', {
  14. extend: 'Ext.data.Model',
  15. fields: ['id', 'first', 'last', 'start', 'bio'],
  16. proxy: {
  17. type: 'localstorage',
  18. id: 'form'
  19. }
  20. });
  21. var record;
  22. var form = Ext.create('Ext.form.Panel', {
  23. height: 400,
  24. width: 600,
  25. bodyPadding: 10,
  26. renderTo: Ext.getBody(),
  27. title: 'Edit User',
  28. defaults: {
  29. anchor: "-20"
  30. },
  31. items: [
  32. {
  33. xtype: 'textfield',
  34. name: 'first',
  35. fieldLabel: 'First Name'
  36. },
  37. {
  38. xtype: 'textfield',
  39. name: 'last',
  40. fieldLabel: 'Last Name'
  41. },
  42. {
  43. xtype: 'datefield',
  44. name: 'startDate',
  45. fieldLabel: 'Start Date'
  46. },
  47. {
  48. xtype: 'htmleditor',
  49. name: 'bio',
  50. fieldLabel: 'Bio',
  51. labelAlign: 'top',
  52. anchor: '-20 -80' //THIS IS UTTERLY UTTERLY WRONG. IT SHOULD BE -20, NOT -80
  53. }
  54. ],
  55. buttons: [
  56. {
  57. text: 'Submit',
  58. handler: function() {
  59. if (!record) {
  60. record = new User({id: 1});
  61. }
  62. record.set(form.getValues());
  63. record.save();
  64. }
  65. }
  66. ]
  67. });
  68. var store = Ext.create('Ext.data.Store', {
  69. autoLoad: true,
  70. model: 'User',
  71. listeners: {
  72. load: function() {
  73. //FIXME: THIS APPEARS TO BE BEING CALLED TWICE BUT SHOULD ONLY HAVE BEEN CALLED ONCE
  74. record = this.first();
  75. if (record) {
  76. form.loadRecord(record);
  77. }
  78. }
  79. }
  80. });
  81. store.load();
  82. });
  83. </script>
  84. </body>
  85. </html>