examples/panel/bubble-panel.html

   1 <html>
   2 <head>
   3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   4 <title>BubblePanel</title>
   5 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   6 <link rel="stylesheet" type="text/css" href="css/bubble.css" />
   7     <!-- GC -->
   8         <!-- LIBS -->
   9         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  10         <!-- ENDLIBS -->
  11
  12     <script type="text/javascript" src="../../ext-all.js"></script>
  13
  14     <script type="text/javascript" src="BubblePanel.js"></script>
  15     <script type="text/javascript" src="bubble-panel.js"></script>
  16
  17     <!-- Common Styles for the examples -->
  18     <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
  19
  20     <style type="text/css">
  21         body {
  22             background-color: #4E79B2 !important;
  23         }
  24         #bubble-markup em {
  25                 font-style: italic
  26         }
  27     </style>
  28 </head>
  29 <body>
  30 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  31
  32 <div id="bubble-markup" class="x-hidden">
  33 <p>This is a custom panel subclass to achieve a different look and feel while not changing the default appearance of an Ext.Panel. </p>
  34
  35 <p>The js is not minified so it is readable. See <a href="BubblePanel.js">BubblePanel.js</a> and <a href="bubble-panel.js">bubble-panel.js</a>.</p>
  36
  37 <p>The majority of the work is actually done in <a href="css/bubble.css">bubble.css</a>. Ext.ux.BubblePanel defines a custom baseCls ('x-bubble') which will generate unique CSS classes for the markup in a Panel such as <em>'x-bubble-tl'</em>, <em>'x-bubble-tr'</em> and <em>'x-bubble-tc'</em>.</p>
  38
  39 </div>
  40
  41 <div id="bubbleCt" style="padding-top: 5px;"></div>
  42 <div id="panelCt" style="padding-top: 5px;"></div>
  43
  44 </body>
  45 </html>