examples/grid/row-editor.html

   1 <html>
   2 <head>
   3     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   4     <title>Grid with RowEditor Example</title>
   5     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   6     <link rel="stylesheet" type="text/css" href="grid-examples.css" />
   7     <!-- Common Styles for the examples -->
   8     <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
   9     <link rel="stylesheet" type="text/css" href="../ux/css/RowEditor.css" />
  10         <style type="text/css">
  11                 .x-grid3 .x-window-ml{
  12                         padding-left: 0;
  13                 }
  14                 .x-grid3 .x-window-mr {
  15                         padding-right: 0;
  16                 }
  17                 .x-grid3 .x-window-tl {
  18                         padding-left: 0;
  19                 }
  20                 .x-grid3 .x-window-tr {
  21                         padding-right: 0;
  22                 }
  23                 .x-grid3 .x-window-tc .x-window-header {
  24                         height: 3px;
  25                         padding:0;
  26                         overflow:hidden;
  27                 }
  28                 .x-grid3 .x-window-mc {
  29                         border-width: 0;
  30                         background: #cdd9e8;
  31                 }
  32                 .x-grid3 .x-window-bl {
  33                         padding-left: 0;
  34                 }
  35                 .x-grid3 .x-window-br {
  36                         padding-right: 0;
  37                 }
  38                 .x-grid3 .x-panel-btns {
  39                         padding:0;
  40                 }
  41                 .x-grid3 .x-panel-btns td.x-toolbar-cell {
  42                         padding:3px 3px 0;
  43                 }
  44                 .x-box-inner {
  45                         zoom:1;
  46                 }
  47         .icon-user-add {
  48             background-image: url(../shared/icons/fam/user_add.gif) !important;
  49         }
  50         .icon-user-delete {
  51             background-image: url(../shared/icons/fam/user_delete.gif) !important;
  52         }
  53     </style>
  54
  55     <!-- GC --><!-- LIBS -->
  56     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  57     <script type="text/javascript" src="../../ext-all.js"></script>
  58     <script type="text/javascript" src="gen-names.js"></script>
  59     <script type="text/javascript" src="../ux/RowEditor.js"></script>
  60     <script type="text/javascript" src="row-editor.js"></script>
  61 </head>
  62 <body>
  63     <h1>Row Editor Grid Example</h1>
  64     <p>
  65         This example shows how to create a grid with inline row based editing using a custom row-editor.
  66         The example code <a href="row-editor.js">row-editor.js</a> is not minified, so it's readable.
  67         </p>
  68         <p>
  69         To use this example, be sure to include the <a href="../ux/RowEditor.js">RowEditor.js</a> file.
  70         </p>
  71
  72     </p>
  73 </body>
  74 </html>