1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>BubblePanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/bubble.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="BubblePanel.js"></script>
<script type="text/javascript" src="bubble-panel.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">
body {
background-color: #4E79B2 !important;
}
#bubble-markup em {
font-style: italic
}
</style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<div id="bubble-markup" class="x-hidden">
<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>
<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>
<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>
</div>
<div id="bubbleCt" style="padding-top: 5px;"></div>
<div id="panelCt" style="padding-top: 5px;"></div>
</body>
</html>
|
