examples/writer/writer.html

   1 <html>
   2 <head>
   3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   4 <title>Grid with DataWriter Example</title>
   5
   6 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   7
   8     <!-- GC -->
   9      <!-- LIBS -->
  10      <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  11      <!-- ENDLIBS -->
  12
  13     <script type="text/javascript" src="../../ext-all.js"></script>
  14     <script type="text/javascript" src="../shared/extjs/App.js"></script>
  15     <script type="text/javascript" src="writer.js"></script>
  16     <script type="text/javascript" src="UserForm.js"></script>
  17     <script type="text/javascript" src="UserGrid.js"></script>
  18
  19     <!-- Common Styles for the examples -->
  20     <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
  21     <link rel="stylesheet" type="text/css" href="../shared/icons/silk.css" />
  22 </head>
  23 <body>
  24 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  25 <h1>Ext.data.DataWriter Example</h1>
  26 <p>This example shows how to implement a Writer for your Store.  A Writer-enabled Store frees you from having to manually compose Ajax requests
  27 to perform CRUD actions on a Store.</p>
  28 <p>Note that the js is not minified so it is readable. See <a href="writer.js">writer.js</a>, <a href="UserForm.js">UserForm.js</a> and
  29 <a href="UserGrid.js">UserGrid.js</a>.</p>
  30
  31 <p>The HttpProxy plugged into the store in this example uses the new <em>api</em> configuration instead of an <em>url</em>.
  32 A simple MVC-like php backend has been created for this example which simulates a database by storing records in $_SESSION.  See the file /remote/app/controllers/users.php.  You may have to configure
  33 your web-server to allow scripts to be executed in the /examples directory.</p>
  34
  35 <code><pre>
  36 var proxy = new Ext.data.HttpProxy({
  37     api: {
  38         read    : 'app.php/users/read',
  39         create  : 'app.php/users/create',
  40         update  : 'app.php/users/update',
  41         destroy : 'app.php/users/destroy'
  42     }
  43 });
  44 </pre></code>
  45
  46 <p>Take note of the requests being generated in Firebug as you interact with the Grid and Form.</p>
  47
  48 <p>An <b>Error has been simulated</b> on the server-side:  Attempting to update a record having ODD-numbered id will generate this errror.
  49 Responses from the update action will have successProperty === false along with a message.  This error can be handled by
  50 listening to the <b>"exception"</b> event upon your Store.</p>
  51
  52 <code><pre>
  53 exception : function(proxy, type, action, options, res, arg) {
  54     if (type === 'remote') {
  55         Ext.Msg.show({
  56             title: 'REMOTE EXCEPTION',
  57             msg: res.message,
  58             icon: Ext.MessageBox.ERROR
  59         });
  60     }
  61 }
  62 </pre></code>
  63 <p><b>Note: This new "exception" event supercedes the old loadexception event which is now deprecated.</b></p>
  64
  65 <div class="container" style="width:500px">
  66     <div id="user-form"></div>
  67     <div id="user-grid"></div>
  68 </div>
  69
  70 </body>
  71 </html>