Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / 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>