Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>