git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/grid/tests/test_grid_layout_borderContainer.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml">
   4         <head>
   5                 <title>Test dojox.Grid Editing</title>
   6                 <style>
   7                         @import "../_grid/tundraGrid.css";
   8                         @import "../../../dojo/resources/dojo.css";
   9                         @import "../../../dijit/themes/tundra/tundra.css";
  10                         @import "../../../dijit/tests/css/dijitTests.css";
  11
  12                         html, body {
  13                                 width: 100%;    /* make the body expand to fill the visible window */\r
  14                                 height: 100%;\r
  15                                 overflow: hidden;       /* erase window level scrollbars */\r
  16                                 padding: 0 0 0 0;\r
  17                                 margin: 0 0 0 0;
  18                         }
  19                 </style>
  20                 <script type="text/javascript" src="../../../dojo/dojo.js"
  21                         djConfig="isDebug:false, parseOnLoad: true"></script>
  22
  23                 <script type="text/javascript">
  24                         dojo.require("dojox.grid.Grid");
  25                         dojo.require("dijit.layout.BorderContainer");
  26                         dojo.require("dijit.layout.ContentPane");
  27                         dojo.require("dojo.parser");
  28                 </script>
  29
  30                 <script type="text/javascript">
  31                         // ==========================================================================
  32                         // Create a data model
  33                         // ==========================================================================
  34                         data = [
  35                                 [ "normal", false, "new", 'But are not followed by two hexadecimal', 29.91, 10, false ],
  36                                 [ "important", false, "new", 'Because a % sign always indicates', 9.33, -5, false ],
  37                                 [ "important", false, "read", 'Signs can be selectively', 19.34, 0, true ],
  38                                 [ "note", false, "read", 'However the reserved characters', 15.63, 0, true ],
  39                                 [ "normal", false, "replied", 'It is therefore necessary', 24.22, 5.50, true ],
  40                                 [ "important", false, "replied", 'To problems of corruption by', 9.12, -3, true ],
  41                                 [ "note", false, "replied", 'Which would simply be awkward in', 12.15, -4, false ]
  42                         ];
  43                         var rows = 10000;
  44                         for(var i=0, l=data.length; i<rows-l; i++){
  45                                 data.push(data[i%l].slice(0));
  46                         }
  47                         model = new dojox.grid.data.Table(null, data);
  48
  49                         // ==========================================================================
  50                         // Grid structure
  51                         // ==========================================================================
  52                         gridLayout = [
  53                                 {
  54                                         type: 'dojox.GridRowView', width: '20px'
  55                                 },
  56                                 {
  57                                         defaultCell: { width: 8, editor: dojox.grid.editors.Input, styles: 'text-align: right;'  },
  58                                         rows: [
  59                                                 [
  60                                                         { name: 'Id', width: 3, get: function(inRowIndex){ return inRowIndex+1;} },
  61                                                         { name: 'Priority', styles: 'text-align: center;', editor: dojox.grid.editors.Select, options: ["normal", "note", "important"]},
  62                                                         { name: 'Mark', width: 3, styles: 'text-align: center;', editor: dojox.grid.editors.Bool },
  63                                                         { name: 'Status', field: 2, styles: 'text-align: center;', editor: dojox.grid.editors.Select, options: [ "new", "read", "replied" ]},
  64                                                         { name: 'Message', styles: '', width: '100%' },
  65                                                         { name: 'Amount'}
  66                                                 ]
  67                                         ]
  68                                 }
  69                         ];
  70                 </script>
  71         </head>
  72         <body class="tundra">
  73 <div dojoType="dijit.layout.BorderContainer"  liveSplitters="false" persist="true"
  74           id="verticalSplitParam" design="headline" style="width: 100%; height: 100%;">
  75
  76   <div dojoType="dijit.layout.ContentPane" id="mybuttons" region="top"
  77             splitter="true"  style="width: 100%; height: 10%;">
  78
  79             <div id="controls">
  80                      <button onclick="grid.refresh()">Refresh</button>
  81                      <button onclick="grid.edit.focusEditor()">Focus Editor</button>
  82                      <button onclick="grid.focus.next()">Next Focus</button>
  83                      <button onclick="addRow()">Add Row</button>
  84                      <button onclick="grid.removeSelectedRows()">Remove</button>
  85                      <button onclick="grid.edit.apply()">Apply</button>
  86                      <button onclick="grid.edit.cancel()">Cancel</button>
  87                      <button onclick="grid.singleClickEdit = !grid.singleClickEdit">Toggle singleClickEdit</button>
  88             </div>
  89   </div>
  90
  91   <div dojoType="dijit.layout.ContentPane" id="gridContainer1" region="center" splitter="true" style="background: red;" >
  92             <div jsId="grid" class="myGrid"             dojoType="dojox.Grid" model="model"     structure="gridLayout"></div>
  93   </div>
  94
  95 </div>
  96
  97 </body>
  98 </html>