Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / form / custom-access.html
1 <html>
2 <head>
3     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
4     <title>Custom Fields</title>
5     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
6     <link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-access.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
15     <script type="text/javascript" src="../ux/SearchField.js"></script>
16     <script type="text/javascript" src="custom-access.js"></script>
17     <link rel="stylesheet" type="text/css" href="combos.css" />
18
19     <style type="text/css">
20     
21         body > p {
22             color: black;
23         }
24         
25         .search-item {
26             border-color: none #1A1A1C #111111 none;
27             border-style: none solid solid none;
28             border-width: 0 0 1px 0;
29             color: #fff;
30             font: normal 14px tahoma, arial, helvetica, sans-serif;
31         }
32         
33         .search-item {
34
35         }
36
37         .search-item h3 a {
38             color: #fff;
39             font: bold 15px tahoma, arial, helvetica, sans-serif;
40             /* text-decoration:none; */
41         }
42         
43         .search-item h3 a:hover {
44             color: #ddd;
45         }
46         
47         .search-item h3 span {
48             color: #fff;
49             margin: 0 0 5px 15px;
50             width: 110px;
51         }
52         
53         .x-small-editor .x-form-text {
54             height: 26px;
55         }
56         .x-small-editor .x-form-field-wrap .x-form-trigger {
57             height: 24px;
58         }
59         
60         .x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
61             font-size: 15px;
62         }
63         
64         #search-results a:hover {
65             text-decoration:underline;
66         }
67         #search-results .search-item {
68             padding:5px;
69         }
70         #search-results p {
71             margin:3px !important;
72         }
73         #search-results {
74             border-bottom:1px solid #ddd;
75             margin: 0 1px;
76             height:600px;
77             overflow:auto;
78         }
79         #search-results .x-toolbar {
80             border:0 none;
81         }
82     </style>
83
84     <!-- Common Styles for the examples -->
85     <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
86 </head>
87 <body>
88 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
89 <p>
90     <b>Custom Form Fields</b><br />
91     Ext provides many types of form fields to build interactive and rich forms. However, it also
92     provides a complete framework for building new types of fields quickly. The search field below
93     is an example.
94 </p>
95 <p>The js is not minified so it is readable. See <a href="custom.js">custom.js</a>.</p>
96
97 <div style="width:600px;" id="search-panel">
98 </div>
99
100 </body>
101 </html>