custom-form.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Custom Form Fields</title>
  6. <!-- ExtJS -->
  7. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  8. <style type="text/css">
  9. #search-results a {
  10. color: #385F95;
  11. font:bold 11px tahoma, arial, helvetica, sans-serif;
  12. text-decoration:none;
  13. }
  14. #search-results a:hover {
  15. text-decoration:underline;
  16. }
  17. #search-results p {
  18. margin:3px !important;
  19. }
  20. .search-item {
  21. font:normal 11px tahoma, arial, helvetica, sans-serif;
  22. padding:3px 10px 3px 10px;
  23. border:1px solid #fff;
  24. border-bottom:1px solid #eeeeee;
  25. white-space:normal;
  26. color:#555;
  27. }
  28. .search-item h3 {
  29. display:block;
  30. font:inherit;
  31. font-weight:bold;
  32. color:#222;
  33. }
  34. .search-item h3 span {
  35. float: right;
  36. font-weight:normal;
  37. margin:0 0 5px 5px;
  38. width:100px;
  39. display:block;
  40. clear:none;
  41. }
  42. .x-form-clear-trigger {
  43. background-image: url(../../resources/themes/images/default/form/clear-trigger.gif);
  44. }
  45. .x-form-search-trigger {
  46. background-image: url(../../resources/themes/images/default/form/search-trigger.gif);
  47. }
  48. </style>
  49. <script type="text/javascript" src="../../ext-all.js"></script>
  50. <!-- Shared -->
  51. <link rel="stylesheet" type="text/css" href="../shared/example.css" />
  52. <!-- GC -->
  53. <!-- Example -->
  54. <script type="text/javascript" src="custom-form.js"></script>
  55. </head>
  56. <body>
  57. <p>
  58. <b>Custom Form Fields</b><br />
  59. Ext provides many types of form fields to build interactive and rich forms. However, it also
  60. provides a complete framework for building new types of fields quickly. The search field below
  61. is an example.
  62. </p>
  63. <p>The js is not minified so it is readable. See <a href="custom-form.js">custom-form.js</a>.</p>
  64. <div id="search-panel">
  65. </div>
  66. </body>
  67. </html>