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>