Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / grid / row-editor.html
diff --git a/examples/grid/row-editor.html b/examples/grid/row-editor.html
new file mode 100644 (file)
index 0000000..d28237e
--- /dev/null
@@ -0,0 +1,74 @@
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+    <title>Grid with RowEditor Example</title>
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+    <link rel="stylesheet" type="text/css" href="grid-examples.css" />
+    <!-- Common Styles for the examples -->
+    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
+    <link rel="stylesheet" type="text/css" href="../ux/css/RowEditor.css" />
+       <style type="text/css">
+               .x-grid3 .x-window-ml{
+                       padding-left: 0;        
+               } 
+               .x-grid3 .x-window-mr {
+                       padding-right: 0;
+               } 
+               .x-grid3 .x-window-tl {
+                       padding-left: 0;
+               } 
+               .x-grid3 .x-window-tr {
+                       padding-right: 0;
+               } 
+               .x-grid3 .x-window-tc .x-window-header {
+                       height: 3px;
+                       padding:0;
+                       overflow:hidden;
+               } 
+               .x-grid3 .x-window-mc {
+                       border-width: 0;
+                       background: #cdd9e8;
+               } 
+               .x-grid3 .x-window-bl {
+                       padding-left: 0;
+               } 
+               .x-grid3 .x-window-br {
+                       padding-right: 0;
+               }
+               .x-grid3 .x-panel-btns {
+                       padding:0;
+               }
+               .x-grid3 .x-panel-btns td.x-toolbar-cell {
+                       padding:3px 3px 0;
+               }
+               .x-box-inner {
+                       zoom:1;
+               }
+        .icon-user-add {
+            background-image: url(../shared/icons/fam/user_add.gif) !important;
+        }
+        .icon-user-delete {
+            background-image: url(../shared/icons/fam/user_delete.gif) !important;
+        }        
+    </style>
+    
+    <!-- GC --><!-- LIBS -->
+    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
+    <script type="text/javascript" src="../../ext-all.js"></script>
+    <script type="text/javascript" src="gen-names.js"></script>
+    <script type="text/javascript" src="../ux/RowEditor.js"></script>
+    <script type="text/javascript" src="row-editor.js"></script>
+</head>
+<body>
+    <h1>Row Editor Grid Example</h1>
+    <p>
+        This example shows how to create a grid with inline row based editing using a custom row-editor.
+       The example code <a href="row-editor.js">row-editor.js</a> is not minified, so it's readable.
+       </p> 
+       <p>
+        To use this example, be sure to include the <a href="RowEditor.js">RowEditor.js</a> file.
+       </p> 
+
+    </p>
+</body>
+</html>