examples/form/custom-access.html

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