1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | /** |
---|
8 | * @class Ext.Panel |
---|
9 | * @extends Ext.Container |
---|
10 | * <p>Panel is a container that has specific functionality and structural components that make |
---|
11 | * it the perfect building block for application-oriented user interfaces.</p> |
---|
12 | * <p>Panels are, by virtue of their inheritance from {@link Ext.Container}, capable |
---|
13 | * of being configured with a {@link Ext.Container#layout layout}, and containing child Components.</p> |
---|
14 | * <p>When either specifying child {@link Ext.Component#items items} of a Panel, or dynamically {@link Ext.Container#add adding} Components |
---|
15 | * to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether |
---|
16 | * those child elements need to be sized using one of Ext's built-in <tt><b>{@link Ext.Container#layout layout}</b></tt> schemes. By |
---|
17 | * default, Panels use the {@link Ext.layout.ContainerLayout ContainerLayout} scheme. This simply renders |
---|
18 | * child components, appending them one after the other inside the Container, and <b>does not apply any sizing</b> |
---|
19 | * at all.</p> |
---|
20 | * <p>A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate |
---|
21 | * {@link #header}, {@link #footer} and {@link #body} sections (see {@link #frame} for additional |
---|
22 | * information).</p> |
---|
23 | * <p>Panel also provides built-in {@link #collapsible expandable and collapsible behavior}, along with |
---|
24 | * a variety of {@link #tools prebuilt tool buttons} that can be wired up to provide other customized |
---|
25 | * behavior. Panels can be easily dropped into any {@link Ext.Container Container} or layout, and the |
---|
26 | * layout and rendering pipeline is {@link Ext.Container#add completely managed by the framework}.</p> |
---|
27 | * @constructor |
---|
28 | * @param {Object} config The config object |
---|
29 | * @xtype panel |
---|
30 | */ |
---|
31 | Ext.Panel = Ext.extend(Ext.Container, { |
---|
32 | /** |
---|
33 | * The Panel's header {@link Ext.Element Element}. Read-only. |
---|
34 | * <p>This Element is used to house the {@link #title} and {@link #tools}</p> |
---|
35 | * <br><p><b>Note</b>: see the Note for <tt>{@link Ext.Component#el el} also.</p> |
---|
36 | * @type Ext.Element |
---|
37 | * @property header |
---|
38 | */ |
---|
39 | /** |
---|
40 | * The Panel's body {@link Ext.Element Element} which may be used to contain HTML content. |
---|
41 | * The content may be specified in the {@link #html} config, or it may be loaded using the |
---|
42 | * {@link autoLoad} config, or through the Panel's {@link #getUpdater Updater}. Read-only. |
---|
43 | * <p>If this is used to load visible HTML elements in either way, then |
---|
44 | * the Panel may not be used as a Layout for hosting nested Panels.</p> |
---|
45 | * <p>If this Panel is intended to be used as the host of a Layout (See {@link #layout} |
---|
46 | * then the body Element must not be loaded or changed - it is under the control |
---|
47 | * of the Panel's Layout. |
---|
48 | * <br><p><b>Note</b>: see the Note for <tt>{@link Ext.Component#el el} also.</p> |
---|
49 | * @type Ext.Element |
---|
50 | * @property body |
---|
51 | */ |
---|
52 | /** |
---|
53 | * The Panel's bwrap {@link Ext.Element Element} used to contain other Panel elements |
---|
54 | * (tbar, body, bbar, footer). See {@link #bodyCfg}. Read-only. |
---|
55 | * @type Ext.Element |
---|
56 | * @property bwrap |
---|
57 | */ |
---|
58 | /** |
---|
59 | * True if this panel is collapsed. Read-only. |
---|
60 | * @type Boolean |
---|
61 | * @property collapsed |
---|
62 | */ |
---|
63 | /** |
---|
64 | * @cfg {Object} bodyCfg |
---|
65 | * <p>A {@link Ext.DomHelper DomHelper} element specification object may be specified for any |
---|
66 | * Panel Element.</p> |
---|
67 | * <p>By default, the Default element in the table below will be used for the html markup to |
---|
68 | * create a child element with the commensurate Default class name (<tt>baseCls</tt> will be |
---|
69 | * replaced by <tt>{@link #baseCls}</tt>):</p> |
---|
70 | * <pre> |
---|
71 | * Panel Default Default Custom Additional Additional |
---|
72 | * Element element class element class style |
---|
73 | * ======== ========================== ========= ============== =========== |
---|
74 | * {@link #header} div {@link #baseCls}+'-header' {@link #headerCfg} headerCssClass headerStyle |
---|
75 | * {@link #bwrap} div {@link #baseCls}+'-bwrap' {@link #bwrapCfg} bwrapCssClass bwrapStyle |
---|
76 | * + tbar div {@link #baseCls}+'-tbar' {@link #tbarCfg} tbarCssClass tbarStyle |
---|
77 | * + {@link #body} div {@link #baseCls}+'-body' {@link #bodyCfg} {@link #bodyCssClass} {@link #bodyStyle} |
---|
78 | * + bbar div {@link #baseCls}+'-bbar' {@link #bbarCfg} bbarCssClass bbarStyle |
---|
79 | * + {@link #footer} div {@link #baseCls}+'-footer' {@link #footerCfg} footerCssClass footerStyle |
---|
80 | * </pre> |
---|
81 | * <p>Configuring a Custom element may be used, for example, to force the {@link #body} Element |
---|
82 | * to use a different form of markup than is created by default. An example of this might be |
---|
83 | * to {@link Ext.Element#createChild create a child} Panel containing a custom content, such as |
---|
84 | * a header, or forcing centering of all Panel content by having the body be a <center> |
---|
85 | * element:</p> |
---|
86 | * <pre><code> |
---|
87 | new Ext.Panel({ |
---|
88 | title: 'Message Title', |
---|
89 | renderTo: Ext.getBody(), |
---|
90 | width: 200, height: 130, |
---|
91 | <b>bodyCfg</b>: { |
---|
92 | tag: 'center', |
---|
93 | cls: 'x-panel-body', // Default class not applied if Custom element specified |
---|
94 | html: 'Message' |
---|
95 | }, |
---|
96 | footerCfg: { |
---|
97 | tag: 'h2', |
---|
98 | cls: 'x-panel-footer' // same as the Default class |
---|
99 | html: 'footer html' |
---|
100 | }, |
---|
101 | footerCssClass: 'custom-footer', // additional css class, see {@link Ext.element#addClass addClass} |
---|
102 | footerStyle: 'background-color:red' // see {@link #bodyStyle} |
---|
103 | }); |
---|
104 | * </code></pre> |
---|
105 | * <p>The example above also explicitly creates a <tt>{@link #footer}</tt> with custom markup and |
---|
106 | * styling applied.</p> |
---|
107 | */ |
---|
108 | /** |
---|
109 | * @cfg {Object} headerCfg |
---|
110 | * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure |
---|
111 | * of this Panel's {@link #header} Element. See <tt>{@link #bodyCfg}</tt> also.</p> |
---|
112 | */ |
---|
113 | /** |
---|
114 | * @cfg {Object} bwrapCfg |
---|
115 | * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure |
---|
116 | * of this Panel's {@link #bwrap} Element. See <tt>{@link #bodyCfg}</tt> also.</p> |
---|
117 | */ |
---|
118 | /** |
---|
119 | * @cfg {Object} tbarCfg |
---|
120 | * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure |
---|
121 | * of this Panel's {@link #tbar} Element. See <tt>{@link #bodyCfg}</tt> also.</p> |
---|
122 | */ |
---|
123 | /** |
---|
124 | * @cfg {Object} bbarCfg |
---|
125 | * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure |
---|
126 | * of this Panel's {@link #bbar} Element. See <tt>{@link #bodyCfg}</tt> also.</p> |
---|
127 | */ |
---|
128 | /** |
---|
129 | * @cfg {Object} footerCfg |
---|
130 | * <p>A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure |
---|
131 | * of this Panel's {@link #footer} Element. See <tt>{@link #bodyCfg}</tt> also.</p> |
---|
132 | */ |
---|
133 | /** |
---|
134 | * @cfg {Boolean} closable |
---|
135 | * Panels themselves do not directly support being closed, but some Panel subclasses do (like |
---|
136 | * {@link Ext.Window}) or a Panel Class within an {@link Ext.TabPanel}. Specify <tt>true</tt> |
---|
137 | * to enable closing in such situations. Defaults to <tt>false</tt>. |
---|
138 | */ |
---|
139 | /** |
---|
140 | * The Panel's footer {@link Ext.Element Element}. Read-only. |
---|
141 | * <p>This Element is used to house the Panel's <tt>{@link #buttons}</tt> or <tt>{@link #fbar}</tt>.</p> |
---|
142 | * <br><p><b>Note</b>: see the Note for <tt>{@link Ext.Component#el el} also.</p> |
---|
143 | * @type Ext.Element |
---|
144 | * @property footer |
---|
145 | */ |
---|
146 | /** |
---|
147 | * @cfg {Mixed} applyTo |
---|
148 | * <p>The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in |
---|
149 | * the document that specifies some panel-specific structural markup. When <tt>applyTo</tt> is used, |
---|
150 | * constituent parts of the panel can be specified by CSS class name within the main element, and the panel |
---|
151 | * will automatically create those components from that markup. Any required components not specified in the |
---|
152 | * markup will be autogenerated if necessary.</p> |
---|
153 | * <p>The following class names are supported (baseCls will be replaced by {@link #baseCls}):</p> |
---|
154 | * <ul><li>baseCls + '-header'</li> |
---|
155 | * <li>baseCls + '-header-text'</li> |
---|
156 | * <li>baseCls + '-bwrap'</li> |
---|
157 | * <li>baseCls + '-tbar'</li> |
---|
158 | * <li>baseCls + '-body'</li> |
---|
159 | * <li>baseCls + '-bbar'</li> |
---|
160 | * <li>baseCls + '-footer'</li></ul> |
---|
161 | * <p>Using this config, a call to render() is not required. If applyTo is specified, any value passed for |
---|
162 | * {@link #renderTo} will be ignored and the target element's parent node will automatically be used as the |
---|
163 | * panel's container.</p> |
---|
164 | */ |
---|
165 | /** |
---|
166 | * @cfg {Object/Array} tbar |
---|
167 | * <p>The top toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of |
---|
168 | * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. |
---|
169 | * To access the top toolbar after render, use {@link #getTopToolbar}.</p> |
---|
170 | * <p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not</b> be updated by a load |
---|
171 | * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and |
---|
172 | * so are not scanned to collect form items. However, the values <b>will</b> be submitted because form |
---|
173 | * submission parameters are collected from the DOM tree.</p> |
---|
174 | */ |
---|
175 | /** |
---|
176 | * @cfg {Object/Array} bbar |
---|
177 | * <p>The bottom toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of |
---|
178 | * buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. |
---|
179 | * To access the bottom toolbar after render, use {@link #getBottomToolbar}.</p> |
---|
180 | * <p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not<b> be updated by a load |
---|
181 | * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and |
---|
182 | * so are not scanned to collect form items. However, the values <b>will</b> be submitted because form |
---|
183 | * submission parameters are collected from the DOM tree.</p> |
---|
184 | */ |
---|
185 | /** @cfg {Object/Array} fbar |
---|
186 | * <p>A {@link Ext.Toolbar Toolbar} object, a Toolbar config, or an array of |
---|
187 | * {@link Ext.Button Button}s/{@link Ext.Button Button} configs, describing a {@link Ext.Toolbar Toolbar} to be rendered into this Panel's footer element.</p> |
---|
188 | * <p>After render, the <code>fbar</code> property will be an {@link Ext.Toolbar Toolbar} instance.</p> |
---|
189 | * <p>If <tt>{@link #buttons}</tt> are specified, they will supersede the <tt>fbar</tt> configuration property.</p> |
---|
190 | * The Panel's <tt>{@link #buttonAlign}</tt> configuration affects the layout of these items, for example: |
---|
191 | * <pre><code> |
---|
192 | var w = new Ext.Window({ |
---|
193 | height: 250, |
---|
194 | width: 500, |
---|
195 | bbar: new Ext.Toolbar({ |
---|
196 | items: [{ |
---|
197 | text: 'bbar Left' |
---|
198 | },'->',{ |
---|
199 | text: 'bbar Right' |
---|
200 | }] |
---|
201 | }), |
---|
202 | {@link #buttonAlign}: 'left', // anything but 'center' or 'right' and you can use "-", and "->" |
---|
203 | // to control the alignment of fbar items |
---|
204 | fbar: [{ |
---|
205 | text: 'fbar Left' |
---|
206 | },'->',{ |
---|
207 | text: 'fbar Right' |
---|
208 | }] |
---|
209 | }).show(); |
---|
210 | * </code></pre> |
---|
211 | * <p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not<b> be updated by a load |
---|
212 | * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and |
---|
213 | * so are not scanned to collect form items. However, the values <b>will</b> be submitted because form |
---|
214 | * submission parameters are collected from the DOM tree.</p> |
---|
215 | */ |
---|
216 | /** |
---|
217 | * @cfg {Boolean} header |
---|
218 | * <tt>true</tt> to create the Panel's header element explicitly, <tt>false</tt> to skip creating |
---|
219 | * it. If a <tt>{@link #title}</tt> is set the header will be created automatically, otherwise it will not. |
---|
220 | * If a <tt>{@link #title}</tt> is set but <tt>header</tt> is explicitly set to <tt>false</tt>, the header |
---|
221 | * will not be rendered. |
---|
222 | */ |
---|
223 | /** |
---|
224 | * @cfg {Boolean} footer |
---|
225 | * <tt>true</tt> to create the footer element explicitly, false to skip creating it. The footer |
---|
226 | * will be created automatically if <tt>{@link #buttons}</tt> or a <tt>{@link #fbar}</tt> have |
---|
227 | * been configured. See <tt>{@link #bodyCfg}</tt> for an example. |
---|
228 | */ |
---|
229 | /** |
---|
230 | * @cfg {String} title |
---|
231 | * The title text to be used as innerHTML (html tags are accepted) to display in the panel |
---|
232 | * <tt>{@link #header}</tt> (defaults to ''). When a <tt>title</tt> is specified the |
---|
233 | * <tt>{@link #header}</tt> element will automatically be created and displayed unless |
---|
234 | * {@link #header} is explicitly set to <tt>false</tt>. If you do not want to specify a |
---|
235 | * <tt>title</tt> at config time, but you may want one later, you must either specify a non-empty |
---|
236 | * <tt>title</tt> (a blank space ' ' will do) or <tt>header:true</tt> so that the container |
---|
237 | * element will get created. |
---|
238 | */ |
---|
239 | /** |
---|
240 | * @cfg {Array} buttons |
---|
241 | * <tt>buttons</tt> will be used as <tt>{@link Ext.Container#items items}</tt> for the toolbar in |
---|
242 | * the footer (<tt>{@link #fbar}</tt>). Typically the value of this configuration property will be |
---|
243 | * an array of {@link Ext.Button}s or {@link Ext.Button} configuration objects. |
---|
244 | * If an item is configured with <tt>minWidth</tt> or the Panel is configured with <tt>minButtonWidth</tt>, |
---|
245 | * that width will be applied to the item. |
---|
246 | */ |
---|
247 | /** |
---|
248 | * @cfg {Object/String/Function} autoLoad |
---|
249 | * A valid url spec according to the Updater {@link Ext.Updater#update} method. |
---|
250 | * If autoLoad is not null, the panel will attempt to load its contents |
---|
251 | * immediately upon render.<p> |
---|
252 | * The URL will become the default URL for this panel's {@link #body} element, |
---|
253 | * so it may be {@link Ext.Element#refresh refresh}ed at any time.</p> |
---|
254 | */ |
---|
255 | /** |
---|
256 | * @cfg {Boolean} frame |
---|
257 | * <tt>false</tt> by default to render with plain 1px square borders. <tt>true</tt> to render with |
---|
258 | * 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}). |
---|
259 | * <p>The template generated for each condition is depicted below:</p><pre><code> |
---|
260 | * |
---|
261 | // frame = false |
---|
262 | <div id="developer-specified-id-goes-here" class="x-panel"> |
---|
263 | |
---|
264 | <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:false)</span></div> |
---|
265 | |
---|
266 | <div class="x-panel-bwrap"> |
---|
267 | <div class="x-panel-body"><p>html value goes here</p></div> |
---|
268 | </div> |
---|
269 | </div> |
---|
270 | |
---|
271 | // frame = true (create 9 elements) |
---|
272 | <div id="developer-specified-id-goes-here" class="x-panel"> |
---|
273 | <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc"> |
---|
274 | <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div> |
---|
275 | </div></div></div> |
---|
276 | |
---|
277 | <div class="x-panel-bwrap"> |
---|
278 | <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc"> |
---|
279 | <div class="x-panel-body"><p>html value goes here</p></div> |
---|
280 | </div></div></div> |
---|
281 | |
---|
282 | <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/> |
---|
283 | </div></div></div> |
---|
284 | </div> |
---|
285 | * </code></pre> |
---|
286 | */ |
---|
287 | /** |
---|
288 | * @cfg {Boolean} border |
---|
289 | * True to display the borders of the panel's body element, false to hide them (defaults to true). By default, |
---|
290 | * the border is a 2px wide inset border, but this can be further altered by setting {@link #bodyBorder} to false. |
---|
291 | */ |
---|
292 | /** |
---|
293 | * @cfg {Boolean} bodyBorder |
---|
294 | * True to display an interior border on the body element of the panel, false to hide it (defaults to true). |
---|
295 | * This only applies when {@link #border} == true. If border == true and bodyBorder == false, the border will display |
---|
296 | * as a 1px wide inset border, giving the entire body element an inset appearance. |
---|
297 | */ |
---|
298 | /** |
---|
299 | * @cfg {String/Object/Function} bodyCssClass |
---|
300 | * Additional css class selector to be applied to the {@link #body} element in the format expected by |
---|
301 | * {@link Ext.Element#addClass} (defaults to null). See {@link #bodyCfg}. |
---|
302 | */ |
---|
303 | /** |
---|
304 | * @cfg {String/Object/Function} bodyStyle |
---|
305 | * Custom CSS styles to be applied to the {@link #body} element in the format expected by |
---|
306 | * {@link Ext.Element#applyStyles} (defaults to null). See {@link #bodyCfg}. |
---|
307 | */ |
---|
308 | /** |
---|
309 | * @cfg {String} iconCls |
---|
310 | * The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). |
---|
311 | * <p>An example of specifying a custom icon class would be something like: |
---|
312 | * </p><pre><code> |
---|
313 | // specify the property in the config for the class: |
---|
314 | ... |
---|
315 | iconCls: 'my-icon' |
---|
316 | |
---|
317 | // css class that specifies background image to be used as the icon image: |
---|
318 | .my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; } |
---|
319 | </code></pre> |
---|
320 | */ |
---|
321 | /** |
---|
322 | * @cfg {Boolean} collapsible |
---|
323 | * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into |
---|
324 | * the header tool button area, false to keep the panel statically sized with no button (defaults to false). |
---|
325 | */ |
---|
326 | /** |
---|
327 | * @cfg {Array} tools |
---|
328 | * An array of tool button configs to be added to the header tool area. When rendered, each tool is |
---|
329 | * stored as an {@link Ext.Element Element} referenced by a public property called <tt><b></b>tools.<i><tool-type></i></tt> |
---|
330 | * <p>Each tool config may contain the following properties: |
---|
331 | * <div class="mdetail-params"><ul> |
---|
332 | * <li><b>id</b> : String<div class="sub-desc"><b>Required.</b> The type |
---|
333 | * of tool to create. By default, this assigns a CSS class of the form <tt>x-tool-<i><tool-type></i></tt> to the |
---|
334 | * resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below. |
---|
335 | * The developer may implement custom tools by supplying alternate CSS rules and background images: |
---|
336 | * <ul> |
---|
337 | * <div class="x-tool x-tool-toggle" style="float:left; margin-right:5;"> </div><div><tt> toggle</tt> (Created by default when {@link #collapsible} is <tt>true</tt>)</div> |
---|
338 | * <div class="x-tool x-tool-close" style="float:left; margin-right:5;"> </div><div><tt> close</tt></div> |
---|
339 | * <div class="x-tool x-tool-minimize" style="float:left; margin-right:5;"> </div><div><tt> minimize</tt></div> |
---|
340 | * <div class="x-tool x-tool-maximize" style="float:left; margin-right:5;"> </div><div><tt> maximize</tt></div> |
---|
341 | * <div class="x-tool x-tool-restore" style="float:left; margin-right:5;"> </div><div><tt> restore</tt></div> |
---|
342 | * <div class="x-tool x-tool-gear" style="float:left; margin-right:5;"> </div><div><tt> gear</tt></div> |
---|
343 | * <div class="x-tool x-tool-pin" style="float:left; margin-right:5;"> </div><div><tt> pin</tt></div> |
---|
344 | * <div class="x-tool x-tool-unpin" style="float:left; margin-right:5;"> </div><div><tt> unpin</tt></div> |
---|
345 | * <div class="x-tool x-tool-right" style="float:left; margin-right:5;"> </div><div><tt> right</tt></div> |
---|
346 | * <div class="x-tool x-tool-left" style="float:left; margin-right:5;"> </div><div><tt> left</tt></div> |
---|
347 | * <div class="x-tool x-tool-up" style="float:left; margin-right:5;"> </div><div><tt> up</tt></div> |
---|
348 | * <div class="x-tool x-tool-down" style="float:left; margin-right:5;"> </div><div><tt> down</tt></div> |
---|
349 | * <div class="x-tool x-tool-refresh" style="float:left; margin-right:5;"> </div><div><tt> refresh</tt></div> |
---|
350 | * <div class="x-tool x-tool-minus" style="float:left; margin-right:5;"> </div><div><tt> minus</tt></div> |
---|
351 | * <div class="x-tool x-tool-plus" style="float:left; margin-right:5;"> </div><div><tt> plus</tt></div> |
---|
352 | * <div class="x-tool x-tool-help" style="float:left; margin-right:5;"> </div><div><tt> help</tt></div> |
---|
353 | * <div class="x-tool x-tool-search" style="float:left; margin-right:5;"> </div><div><tt> search</tt></div> |
---|
354 | * <div class="x-tool x-tool-save" style="float:left; margin-right:5;"> </div><div><tt> save</tt></div> |
---|
355 | * <div class="x-tool x-tool-print" style="float:left; margin-right:5;"> </div><div><tt> print</tt></div> |
---|
356 | * </ul></div></li> |
---|
357 | * <li><b>handler</b> : Function<div class="sub-desc"><b>Required.</b> The function to |
---|
358 | * call when clicked. Arguments passed are:<ul> |
---|
359 | * <li><b>event</b> : Ext.EventObject<div class="sub-desc">The click event.</div></li> |
---|
360 | * <li><b>toolEl</b> : Ext.Element<div class="sub-desc">The tool Element.</div></li> |
---|
361 | * <li><b>panel</b> : Ext.Panel<div class="sub-desc">The host Panel</div></li> |
---|
362 | * <li><b>tc</b> : Ext.Panel<div class="sub-desc">The tool configuration object</div></li> |
---|
363 | * </ul></div></li> |
---|
364 | * <li><b>stopEvent</b> : Boolean<div class="sub-desc">Defaults to true. Specify as false to allow click event to propagate.</div></li> |
---|
365 | * <li><b>scope</b> : Object<div class="sub-desc">The scope in which to call the handler.</div></li> |
---|
366 | * <li><b>qtip</b> : String/Object<div class="sub-desc">A tip string, or |
---|
367 | * a config argument to {@link Ext.QuickTip#register}</div></li> |
---|
368 | * <li><b>hidden</b> : Boolean<div class="sub-desc">True to initially render hidden.</div></li> |
---|
369 | * <li><b>on</b> : Object<div class="sub-desc">A listener config object specifiying |
---|
370 | * event listeners in the format of an argument to {@link #addListener}</div></li> |
---|
371 | * </ul></div> |
---|
372 | * <p>Note that, apart from the toggle tool which is provided when a panel is collapsible, these |
---|
373 | * tools only provide the visual button. Any required functionality must be provided by adding |
---|
374 | * handlers that implement the necessary behavior.</p> |
---|
375 | * <p>Example usage:</p> |
---|
376 | * <pre><code> |
---|
377 | tools:[{ |
---|
378 | id:'refresh', |
---|
379 | qtip: 'Refresh form Data', |
---|
380 | // hidden:true, |
---|
381 | handler: function(event, toolEl, panel){ |
---|
382 | // refresh logic |
---|
383 | } |
---|
384 | }, |
---|
385 | { |
---|
386 | id:'help', |
---|
387 | qtip: 'Get Help', |
---|
388 | handler: function(event, toolEl, panel){ |
---|
389 | // whatever |
---|
390 | } |
---|
391 | }] |
---|
392 | </code></pre> |
---|
393 | * <p>For the custom id of <tt>'help'</tt> define two relevant css classes with a link to |
---|
394 | * a 15x15 image:</p> |
---|
395 | * <pre><code> |
---|
396 | .x-tool-help {background-image: url(images/help.png);} |
---|
397 | .x-tool-help-over {background-image: url(images/help_over.png);} |
---|
398 | // if using an image sprite: |
---|
399 | .x-tool-help {background-image: url(images/help.png) no-repeat 0 0;} |
---|
400 | .x-tool-help-over {background-position:-15px 0;} |
---|
401 | </code></pre> |
---|
402 | */ |
---|
403 | /** |
---|
404 | * @cfg {Ext.Template/Ext.XTemplate} toolTemplate |
---|
405 | * <p>A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:</p><pre><code> |
---|
406 | new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')</code></pre> |
---|
407 | * <p>This may may be overridden to provide a custom DOM structure for tools based upon a more |
---|
408 | * complex XTemplate. The template's data is a single tool configuration object (Not the entire Array) |
---|
409 | * as specified in {@link #tools}. In the following example an <a> tag is used to provide a |
---|
410 | * visual indication when hovering over the tool:</p><pre><code> |
---|
411 | var win = new Ext.Window({ |
---|
412 | tools: [{ |
---|
413 | id: 'download', |
---|
414 | href: '/MyPdfDoc.pdf' |
---|
415 | }], |
---|
416 | toolTemplate: new Ext.XTemplate( |
---|
417 | '<tpl if="id==\'download\'">', |
---|
418 | '<a class="x-tool x-tool-pdf" href="{href}"></a>', |
---|
419 | '</tpl>', |
---|
420 | '<tpl if="id!=\'download\'">', |
---|
421 | '<div class="x-tool x-tool-{id}">&#160;</div>', |
---|
422 | '</tpl>' |
---|
423 | ), |
---|
424 | width:500, |
---|
425 | height:300, |
---|
426 | closeAction:'hide' |
---|
427 | });</code></pre> |
---|
428 | * <p>Note that the CSS class "x-tool-pdf" should have an associated style rule which provides an |
---|
429 | * appropriate background image, something like:</p> |
---|
430 | <pre><code> |
---|
431 | a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;} |
---|
432 | </code></pre> |
---|
433 | */ |
---|
434 | /** |
---|
435 | * @cfg {Boolean} hideCollapseTool |
---|
436 | * <tt>true</tt> to hide the expand/collapse toggle button when <code>{@link #collapsible} == true</code>, |
---|
437 | * <tt>false</tt> to display it (defaults to <tt>false</tt>). |
---|
438 | */ |
---|
439 | /** |
---|
440 | * @cfg {Boolean} titleCollapse |
---|
441 | * <tt>true</tt> to allow expanding and collapsing the panel (when <tt>{@link #collapsible} = true</tt>) |
---|
442 | * by clicking anywhere in the header bar, <tt>false</tt>) to allow it only by clicking to tool button |
---|
443 | * (defaults to <tt>false</tt>)). If this panel is a child item of a border layout also see the |
---|
444 | * {@link Ext.layout.BorderLayout.Region BorderLayout.Region} |
---|
445 | * <tt>{@link Ext.layout.BorderLayout.Region#floatable floatable}</tt> config option. |
---|
446 | */ |
---|
447 | /** |
---|
448 | * @cfg {Boolean} autoScroll |
---|
449 | * <tt>true</tt> to use overflow:'auto' on the panel's body element and show scroll bars automatically when |
---|
450 | * necessary, <tt>false</tt> to clip any overflowing content (defaults to <tt>false</tt>). |
---|
451 | */ |
---|
452 | /** |
---|
453 | * @cfg {Mixed} floating |
---|
454 | * <p>This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this |
---|
455 | * configuration property are:</p><div class="mdetail-params"><ul> |
---|
456 | * <li><b><tt>false</tt></b> : <b>Default.</b><div class="sub-desc">Display the panel inline where it is |
---|
457 | * rendered.</div></li> |
---|
458 | * <li><b><tt>true</tt></b> : <div class="sub-desc">Float the panel (absolute position it with automatic |
---|
459 | * shimming and shadow).<ul> |
---|
460 | * <div class="sub-desc">Setting floating to true will create an Ext.Layer for this panel and display the |
---|
461 | * panel at negative offsets so that it is hidden.</div> |
---|
462 | * <div class="sub-desc">Since the panel will be absolute positioned, the position must be set explicitly |
---|
463 | * <i>after</i> render (e.g., <tt>myPanel.setPosition(100,100);</tt>).</div> |
---|
464 | * <div class="sub-desc"><b>Note</b>: when floating a panel you should always assign a fixed width, |
---|
465 | * otherwise it will be auto width and will expand to fill to the right edge of the viewport.</div> |
---|
466 | * </ul></div></li> |
---|
467 | * <li><b><tt>{@link Ext.Layer object}</tt></b> : <div class="sub-desc">The specified object will be used |
---|
468 | * as the configuration object for the {@link Ext.Layer} that will be created.</div></li> |
---|
469 | * </ul></div> |
---|
470 | */ |
---|
471 | /** |
---|
472 | * @cfg {Boolean/String} shadow |
---|
473 | * <tt>true</tt> (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the |
---|
474 | * panel, <tt>false</tt> to display no shadow (defaults to <tt>'sides'</tt>). Note that this option |
---|
475 | * only applies when <tt>{@link #floating} = true</tt>. |
---|
476 | */ |
---|
477 | /** |
---|
478 | * @cfg {Number} shadowOffset |
---|
479 | * The number of pixels to offset the shadow if displayed (defaults to <tt>4</tt>). Note that this |
---|
480 | * option only applies when <tt>{@link #floating} = true</tt>. |
---|
481 | */ |
---|
482 | /** |
---|
483 | * @cfg {Boolean} shim |
---|
484 | * <tt>false</tt> to disable the iframe shim in browsers which need one (defaults to <tt>true</tt>). |
---|
485 | * Note that this option only applies when <tt>{@link #floating} = true</tt>. |
---|
486 | */ |
---|
487 | /** |
---|
488 | * @cfg {String/Object} html |
---|
489 | * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the panel's body |
---|
490 | * content (defaults to ''). The HTML content is added by the Panel's {@link #afterRender} method, |
---|
491 | * and so the document will not contain this HTML at the time the {@link #render} event is fired. |
---|
492 | * This content is inserted into the body <i>before</i> any configured {@link #contentEl} is appended. |
---|
493 | */ |
---|
494 | /** |
---|
495 | * @cfg {String} contentEl |
---|
496 | * <p>Specify the <tt>id</tt> of an existing HTML node to use as the panel's body content |
---|
497 | * (defaults to '').</p><div><ul> |
---|
498 | * <li><b>Description</b> : <ul> |
---|
499 | * <div class="sub-desc">This config option is used to take an existing HTML element and place it in the body |
---|
500 | * of a new panel (it simply moves the specified DOM element into the body element of the Panel |
---|
501 | * <i>when the Panel is rendered</i> to use as the content (it is not going to be the |
---|
502 | * actual panel itself).</div> |
---|
503 | * </ul></li> |
---|
504 | * <li><b>Notes</b> : <ul> |
---|
505 | * <div class="sub-desc">The specified HTML Element is appended to the Panel's {@link #body} Element by the |
---|
506 | * Panel's {@link #afterRender} method <i>after any configured {@link #html HTML} has |
---|
507 | * been inserted</i>, and so the document will not contain this HTML at the time the |
---|
508 | * {@link #render} event is fired.</div> |
---|
509 | * <div class="sub-desc">The specified HTML element used will not participate in any layout scheme that the |
---|
510 | * Panel may use. It's just HTML. Layouts operate on child items.</div> |
---|
511 | * <div class="sub-desc">Add either the <tt>x-hidden</tt> or the <tt>x-hide-display</tt> CSS class to |
---|
512 | * prevent a brief flicker of the content before it is rendered to the panel.</div> |
---|
513 | * </ul></li> |
---|
514 | * </ul></div> |
---|
515 | */ |
---|
516 | /** |
---|
517 | * @cfg {Object/Array} keys |
---|
518 | * A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding} |
---|
519 | * used to assign custom key handling to this panel (defaults to <tt>null</tt>). |
---|
520 | */ |
---|
521 | /** |
---|
522 | * @cfg {Boolean/Object} draggable |
---|
523 | * <p><tt>true</tt> to enable dragging of this Panel (defaults to <tt>false</tt>).</p> |
---|
524 | * <p>For custom drag/drop implementations, an <b>Ext.Panel.DD</b> config could also be passed |
---|
525 | * in this config instead of <tt>true</tt>. Ext.Panel.DD is an internal, undocumented class which |
---|
526 | * moves a proxy Element around in place of the Panel's element, but provides no other behaviour |
---|
527 | * during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be |
---|
528 | * added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.: |
---|
529 | * <pre><code> |
---|
530 | new Ext.Panel({ |
---|
531 | title: 'Drag me', |
---|
532 | x: 100, |
---|
533 | y: 100, |
---|
534 | renderTo: Ext.getBody(), |
---|
535 | floating: true, |
---|
536 | frame: true, |
---|
537 | width: 400, |
---|
538 | height: 200, |
---|
539 | draggable: { |
---|
540 | // Config option of Ext.Panel.DD class. |
---|
541 | // It's a floating Panel, so do not show a placeholder proxy in the original position. |
---|
542 | insertProxy: false, |
---|
543 | |
---|
544 | // Called for each mousemove event while dragging the DD object. |
---|
545 | onDrag : function(e){ |
---|
546 | // Record the x,y position of the drag proxy so that we can |
---|
547 | // position the Panel at end of drag. |
---|
548 | var pel = this.proxy.getEl(); |
---|
549 | this.x = pel.getLeft(true); |
---|
550 | this.y = pel.getTop(true); |
---|
551 | |
---|
552 | // Keep the Shadow aligned if there is one. |
---|
553 | var s = this.panel.getEl().shadow; |
---|
554 | if (s) { |
---|
555 | s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); |
---|
556 | } |
---|
557 | }, |
---|
558 | |
---|
559 | // Called on the mouseup event. |
---|
560 | endDrag : function(e){ |
---|
561 | this.panel.setPosition(this.x, this.y); |
---|
562 | } |
---|
563 | } |
---|
564 | }).show(); |
---|
565 | </code></pre> |
---|
566 | */ |
---|
567 | /** |
---|
568 | * @cfg {String} tabTip |
---|
569 | * A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over |
---|
570 | * the tab of a Ext.Panel which is an item of a {@link Ext.TabPanel}. {@link Ext.QuickTips}.init() |
---|
571 | * must be called in order for the tips to render. |
---|
572 | */ |
---|
573 | /** |
---|
574 | * @cfg {Boolean} disabled |
---|
575 | * Render this panel disabled (default is <tt>false</tt>). An important note when using the disabled |
---|
576 | * config on panels is that IE will often fail to initialize the disabled mask element correectly if |
---|
577 | * the panel's layout has not yet completed by the time the Panel is disabled during the render process. |
---|
578 | * If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize |
---|
579 | * the disabled state: |
---|
580 | * <pre><code> |
---|
581 | new Ext.Panel({ |
---|
582 | ... |
---|
583 | listeners: { |
---|
584 | 'afterlayout': { |
---|
585 | fn: function(p){ |
---|
586 | p.disable(); |
---|
587 | }, |
---|
588 | single: true // important, as many layouts can occur |
---|
589 | } |
---|
590 | } |
---|
591 | }); |
---|
592 | </code></pre> |
---|
593 | */ |
---|
594 | /** |
---|
595 | * @cfg {Boolean} autoHeight |
---|
596 | * <tt>true</tt> to use height:'auto', <tt>false</tt> to use fixed height (defaults to <tt>false</tt>). |
---|
597 | * <b>Note</b>: Setting <tt>autoHeight:true</tt> means that the browser will manage the panel's height |
---|
598 | * based on its contents, and that Ext will not manage it at all. If the panel is within a layout that |
---|
599 | * manages dimensions (<tt>fit</tt>, <tt>border</tt>, etc.) then setting <tt>autoHeight:true</tt> |
---|
600 | * can cause issues with scrolling and will not generally work as expected since the panel will take |
---|
601 | * on the height of its contents rather than the height required by the Ext layout. |
---|
602 | */ |
---|
603 | |
---|
604 | |
---|
605 | /** |
---|
606 | * @cfg {String} baseCls |
---|
607 | * The base CSS class to apply to this panel's element (defaults to <tt>'x-panel'</tt>). |
---|
608 | * <p>Another option available by default is to specify <tt>'x-plain'</tt> which strips all styling |
---|
609 | * except for required attributes for Ext layouts to function (e.g. overflow:hidden). |
---|
610 | * See <tt>{@link #unstyled}</tt> also.</p> |
---|
611 | */ |
---|
612 | baseCls : 'x-panel', |
---|
613 | /** |
---|
614 | * @cfg {String} collapsedCls |
---|
615 | * A CSS class to add to the panel's element after it has been collapsed (defaults to |
---|
616 | * <tt>'x-panel-collapsed'</tt>). |
---|
617 | */ |
---|
618 | collapsedCls : 'x-panel-collapsed', |
---|
619 | /** |
---|
620 | * @cfg {Boolean} maskDisabled |
---|
621 | * <tt>true</tt> to mask the panel when it is {@link #disabled}, <tt>false</tt> to not mask it (defaults |
---|
622 | * to <tt>true</tt>). Either way, the panel will always tell its contained elements to disable themselves |
---|
623 | * when it is disabled, but masking the panel can provide an additional visual cue that the panel is |
---|
624 | * disabled. |
---|
625 | */ |
---|
626 | maskDisabled : true, |
---|
627 | /** |
---|
628 | * @cfg {Boolean} animCollapse |
---|
629 | * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the |
---|
630 | * animation (defaults to <tt>true</tt> if the {@link Ext.Fx} class is available, otherwise <tt>false</tt>). |
---|
631 | */ |
---|
632 | animCollapse : Ext.enableFx, |
---|
633 | /** |
---|
634 | * @cfg {Boolean} headerAsText |
---|
635 | * <tt>true</tt> to display the panel <tt>{@link #title}</tt> in the <tt>{@link #header}</tt>, |
---|
636 | * <tt>false</tt> to hide it (defaults to <tt>true</tt>). |
---|
637 | */ |
---|
638 | headerAsText : true, |
---|
639 | /** |
---|
640 | * @cfg {String} buttonAlign |
---|
641 | * The alignment of any {@link #buttons} added to this panel. Valid values are <tt>'right'</tt>, |
---|
642 | * <tt>'left'</tt> and <tt>'center'</tt> (defaults to <tt>'right'</tt>). |
---|
643 | */ |
---|
644 | buttonAlign : 'right', |
---|
645 | /** |
---|
646 | * @cfg {Boolean} collapsed |
---|
647 | * <tt>true</tt> to render the panel collapsed, <tt>false</tt> to render it expanded (defaults to |
---|
648 | * <tt>false</tt>). |
---|
649 | */ |
---|
650 | collapsed : false, |
---|
651 | /** |
---|
652 | * @cfg {Boolean} collapseFirst |
---|
653 | * <tt>true</tt> to make sure the collapse/expand toggle button always renders first (to the left of) |
---|
654 | * any other tools in the panel's title bar, <tt>false</tt> to render it last (defaults to <tt>true</tt>). |
---|
655 | */ |
---|
656 | collapseFirst : true, |
---|
657 | /** |
---|
658 | * @cfg {Number} minButtonWidth |
---|
659 | * Minimum width in pixels of all {@link #buttons} in this panel (defaults to <tt>75</tt>) |
---|
660 | */ |
---|
661 | minButtonWidth : 75, |
---|
662 | /** |
---|
663 | * @cfg {Boolean} unstyled |
---|
664 | * Overrides the <tt>{@link #baseCls}</tt> setting to <tt>{@link #baseCls} = 'x-plain'</tt> which renders |
---|
665 | * the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden). |
---|
666 | */ |
---|
667 | /** |
---|
668 | * @cfg {String} elements |
---|
669 | * A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be |
---|
670 | * generated automatically based on the items added to the panel at config time, but sometimes it might be useful to |
---|
671 | * make sure a structural element is rendered even if not specified at config time (for example, you may want |
---|
672 | * to add a button or toolbar dynamically after the panel has been rendered). Adding those elements to this |
---|
673 | * list will allocate the required placeholders in the panel when it is rendered. Valid values are<div class="mdetail-params"><ul> |
---|
674 | * <li><tt>header</tt></li> |
---|
675 | * <li><tt>tbar</tt> (top bar)</li> |
---|
676 | * <li><tt>body</tt></li> |
---|
677 | * <li><tt>bbar</tt> (bottom bar)</li> |
---|
678 | * <li><tt>footer</tt></li> |
---|
679 | * </ul></div> |
---|
680 | * Defaults to '<tt>body</tt>'. |
---|
681 | */ |
---|
682 | elements : 'body', |
---|
683 | /** |
---|
684 | * @cfg {Boolean} preventBodyReset |
---|
685 | * Defaults to <tt>false</tt>. When set to <tt>true</tt>, an extra css class <tt>'x-panel-normal'</tt> |
---|
686 | * will be added to the panel's element, effectively applying css styles suggested by the W3C |
---|
687 | * (see http://www.w3.org/TR/CSS21/sample.html) to the Panel's <b>body</b> element (not the header, |
---|
688 | * footer, etc.). |
---|
689 | */ |
---|
690 | preventBodyReset : false, |
---|
691 | |
---|
692 | // protected - these could be used to customize the behavior of the window, |
---|
693 | // but changing them would not be useful without further mofifications and |
---|
694 | // could lead to unexpected or undesirable results. |
---|
695 | toolTarget : 'header', |
---|
696 | collapseEl : 'bwrap', |
---|
697 | slideAnchor : 't', |
---|
698 | disabledClass : '', |
---|
699 | |
---|
700 | // private, notify box this class will handle heights |
---|
701 | deferHeight : true, |
---|
702 | // private |
---|
703 | expandDefaults: { |
---|
704 | duration : 0.25 |
---|
705 | }, |
---|
706 | // private |
---|
707 | collapseDefaults : { |
---|
708 | duration : 0.25 |
---|
709 | }, |
---|
710 | |
---|
711 | // private |
---|
712 | initComponent : function(){ |
---|
713 | Ext.Panel.superclass.initComponent.call(this); |
---|
714 | |
---|
715 | this.addEvents( |
---|
716 | /** |
---|
717 | * @event bodyresize |
---|
718 | * Fires after the Panel has been resized. |
---|
719 | * @param {Ext.Panel} p the Panel which has been resized. |
---|
720 | * @param {Number} width The Panel's new width. |
---|
721 | * @param {Number} height The Panel's new height. |
---|
722 | */ |
---|
723 | 'bodyresize', |
---|
724 | /** |
---|
725 | * @event titlechange |
---|
726 | * Fires after the Panel title has been {@link #title set} or {@link #setTitle changed}. |
---|
727 | * @param {Ext.Panel} p the Panel which has had its title changed. |
---|
728 | * @param {String} The new title. |
---|
729 | */ |
---|
730 | 'titlechange', |
---|
731 | /** |
---|
732 | * @event iconchange |
---|
733 | * Fires after the Panel icon class has been {@link #iconCls set} or {@link #setIconClass changed}. |
---|
734 | * @param {Ext.Panel} p the Panel which has had its {@link #iconCls icon class} changed. |
---|
735 | * @param {String} The new icon class. |
---|
736 | * @param {String} The old icon class. |
---|
737 | */ |
---|
738 | 'iconchange', |
---|
739 | /** |
---|
740 | * @event collapse |
---|
741 | * Fires after the Panel has been collapsed. |
---|
742 | * @param {Ext.Panel} p the Panel that has been collapsed. |
---|
743 | */ |
---|
744 | 'collapse', |
---|
745 | /** |
---|
746 | * @event expand |
---|
747 | * Fires after the Panel has been expanded. |
---|
748 | * @param {Ext.Panel} p The Panel that has been expanded. |
---|
749 | */ |
---|
750 | 'expand', |
---|
751 | /** |
---|
752 | * @event beforecollapse |
---|
753 | * Fires before the Panel is collapsed. A handler can return false to cancel the collapse. |
---|
754 | * @param {Ext.Panel} p the Panel being collapsed. |
---|
755 | * @param {Boolean} animate True if the collapse is animated, else false. |
---|
756 | */ |
---|
757 | 'beforecollapse', |
---|
758 | /** |
---|
759 | * @event beforeexpand |
---|
760 | * Fires before the Panel is expanded. A handler can return false to cancel the expand. |
---|
761 | * @param {Ext.Panel} p The Panel being expanded. |
---|
762 | * @param {Boolean} animate True if the expand is animated, else false. |
---|
763 | */ |
---|
764 | 'beforeexpand', |
---|
765 | /** |
---|
766 | * @event beforeclose |
---|
767 | * Fires before the Panel is closed. Note that Panels do not directly support being closed, but some |
---|
768 | * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. This event only |
---|
769 | * applies to such subclasses. |
---|
770 | * A handler can return false to cancel the close. |
---|
771 | * @param {Ext.Panel} p The Panel being closed. |
---|
772 | */ |
---|
773 | 'beforeclose', |
---|
774 | /** |
---|
775 | * @event close |
---|
776 | * Fires after the Panel is closed. Note that Panels do not directly support being closed, but some |
---|
777 | * Panel subclasses do (like {@link Ext.Window}) or a Panel within a Ext.TabPanel. |
---|
778 | * @param {Ext.Panel} p The Panel that has been closed. |
---|
779 | */ |
---|
780 | 'close', |
---|
781 | /** |
---|
782 | * @event activate |
---|
783 | * Fires after the Panel has been visually activated. |
---|
784 | * Note that Panels do not directly support being activated, but some Panel subclasses |
---|
785 | * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the |
---|
786 | * activate and deactivate events under the control of the TabPanel. |
---|
787 | * @param {Ext.Panel} p The Panel that has been activated. |
---|
788 | */ |
---|
789 | 'activate', |
---|
790 | /** |
---|
791 | * @event deactivate |
---|
792 | * Fires after the Panel has been visually deactivated. |
---|
793 | * Note that Panels do not directly support being deactivated, but some Panel subclasses |
---|
794 | * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the |
---|
795 | * activate and deactivate events under the control of the TabPanel. |
---|
796 | * @param {Ext.Panel} p The Panel that has been deactivated. |
---|
797 | */ |
---|
798 | 'deactivate' |
---|
799 | ); |
---|
800 | |
---|
801 | if(this.unstyled){ |
---|
802 | this.baseCls = 'x-plain'; |
---|
803 | } |
---|
804 | |
---|
805 | // shortcuts |
---|
806 | if(this.tbar){ |
---|
807 | this.elements += ',tbar'; |
---|
808 | if(Ext.isObject(this.tbar)){ |
---|
809 | this.topToolbar = this.tbar; |
---|
810 | } |
---|
811 | delete this.tbar; |
---|
812 | } |
---|
813 | if(this.bbar){ |
---|
814 | this.elements += ',bbar'; |
---|
815 | if(Ext.isObject(this.bbar)){ |
---|
816 | this.bottomToolbar = this.bbar; |
---|
817 | } |
---|
818 | delete this.bbar; |
---|
819 | } |
---|
820 | |
---|
821 | if(this.header === true){ |
---|
822 | this.elements += ',header'; |
---|
823 | delete this.header; |
---|
824 | }else if(this.headerCfg || (this.title && this.header !== false)){ |
---|
825 | this.elements += ',header'; |
---|
826 | } |
---|
827 | |
---|
828 | if(this.footerCfg || this.footer === true){ |
---|
829 | this.elements += ',footer'; |
---|
830 | delete this.footer; |
---|
831 | } |
---|
832 | |
---|
833 | if(this.buttons){ |
---|
834 | this.elements += ',footer'; |
---|
835 | var btns = this.buttons; |
---|
836 | /** |
---|
837 | * This Panel's Array of buttons as created from the <tt>{@link #buttons}</tt> |
---|
838 | * config property. Read only. |
---|
839 | * @type Array |
---|
840 | * @property buttons |
---|
841 | */ |
---|
842 | this.buttons = []; |
---|
843 | for(var i = 0, len = btns.length; i < len; i++) { |
---|
844 | if(btns[i].render){ // button instance |
---|
845 | this.buttons.push(btns[i]); |
---|
846 | }else if(btns[i].xtype){ |
---|
847 | this.buttons.push(Ext.create(btns[i], 'button')); |
---|
848 | }else{ |
---|
849 | this.addButton(btns[i]); |
---|
850 | } |
---|
851 | } |
---|
852 | } |
---|
853 | if(this.fbar){ |
---|
854 | this.elements += ',footer'; |
---|
855 | } |
---|
856 | if(this.autoLoad){ |
---|
857 | this.on('render', this.doAutoLoad, this, {delay:10}); |
---|
858 | } |
---|
859 | }, |
---|
860 | |
---|
861 | // private |
---|
862 | createElement : function(name, pnode){ |
---|
863 | if(this[name]){ |
---|
864 | pnode.appendChild(this[name].dom); |
---|
865 | return; |
---|
866 | } |
---|
867 | |
---|
868 | if(name === 'bwrap' || this.elements.indexOf(name) != -1){ |
---|
869 | if(this[name+'Cfg']){ |
---|
870 | this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']); |
---|
871 | }else{ |
---|
872 | var el = document.createElement('div'); |
---|
873 | el.className = this[name+'Cls']; |
---|
874 | this[name] = Ext.get(pnode.appendChild(el)); |
---|
875 | } |
---|
876 | if(this[name+'CssClass']){ |
---|
877 | this[name].addClass(this[name+'CssClass']); |
---|
878 | } |
---|
879 | if(this[name+'Style']){ |
---|
880 | this[name].applyStyles(this[name+'Style']); |
---|
881 | } |
---|
882 | } |
---|
883 | }, |
---|
884 | |
---|
885 | // private |
---|
886 | onRender : function(ct, position){ |
---|
887 | Ext.Panel.superclass.onRender.call(this, ct, position); |
---|
888 | this.createClasses(); |
---|
889 | |
---|
890 | var el = this.el, |
---|
891 | d = el.dom, |
---|
892 | bw; |
---|
893 | el.addClass(this.baseCls); |
---|
894 | if(d.firstChild){ // existing markup |
---|
895 | this.header = el.down('.'+this.headerCls); |
---|
896 | this.bwrap = el.down('.'+this.bwrapCls); |
---|
897 | var cp = this.bwrap ? this.bwrap : el; |
---|
898 | this.tbar = cp.down('.'+this.tbarCls); |
---|
899 | this.body = cp.down('.'+this.bodyCls); |
---|
900 | this.bbar = cp.down('.'+this.bbarCls); |
---|
901 | this.footer = cp.down('.'+this.footerCls); |
---|
902 | this.fromMarkup = true; |
---|
903 | } |
---|
904 | if (this.preventBodyReset === true) { |
---|
905 | el.addClass('x-panel-reset'); |
---|
906 | } |
---|
907 | if(this.cls){ |
---|
908 | el.addClass(this.cls); |
---|
909 | } |
---|
910 | |
---|
911 | if(this.buttons){ |
---|
912 | this.elements += ',footer'; |
---|
913 | } |
---|
914 | |
---|
915 | // This block allows for maximum flexibility and performance when using existing markup |
---|
916 | |
---|
917 | // framing requires special markup |
---|
918 | if(this.frame){ |
---|
919 | el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls)); |
---|
920 | |
---|
921 | this.createElement('header', d.firstChild.firstChild.firstChild); |
---|
922 | this.createElement('bwrap', d); |
---|
923 | |
---|
924 | // append the mid and bottom frame to the bwrap |
---|
925 | bw = this.bwrap.dom; |
---|
926 | var ml = d.childNodes[1], bl = d.childNodes[2]; |
---|
927 | bw.appendChild(ml); |
---|
928 | bw.appendChild(bl); |
---|
929 | |
---|
930 | var mc = bw.firstChild.firstChild.firstChild; |
---|
931 | this.createElement('tbar', mc); |
---|
932 | this.createElement('body', mc); |
---|
933 | this.createElement('bbar', mc); |
---|
934 | this.createElement('footer', bw.lastChild.firstChild.firstChild); |
---|
935 | |
---|
936 | if(!this.footer){ |
---|
937 | this.bwrap.dom.lastChild.className += ' x-panel-nofooter'; |
---|
938 | } |
---|
939 | }else{ |
---|
940 | this.createElement('header', d); |
---|
941 | this.createElement('bwrap', d); |
---|
942 | |
---|
943 | // append the mid and bottom frame to the bwrap |
---|
944 | bw = this.bwrap.dom; |
---|
945 | this.createElement('tbar', bw); |
---|
946 | this.createElement('body', bw); |
---|
947 | this.createElement('bbar', bw); |
---|
948 | this.createElement('footer', bw); |
---|
949 | |
---|
950 | if(!this.header){ |
---|
951 | this.body.addClass(this.bodyCls + '-noheader'); |
---|
952 | if(this.tbar){ |
---|
953 | this.tbar.addClass(this.tbarCls + '-noheader'); |
---|
954 | } |
---|
955 | } |
---|
956 | } |
---|
957 | |
---|
958 | if(this.padding !== undefined) { |
---|
959 | this.body.setStyle('padding', this.body.addUnits(this.padding)); |
---|
960 | } |
---|
961 | |
---|
962 | if(this.border === false){ |
---|
963 | this.el.addClass(this.baseCls + '-noborder'); |
---|
964 | this.body.addClass(this.bodyCls + '-noborder'); |
---|
965 | if(this.header){ |
---|
966 | this.header.addClass(this.headerCls + '-noborder'); |
---|
967 | } |
---|
968 | if(this.footer){ |
---|
969 | this.footer.addClass(this.footerCls + '-noborder'); |
---|
970 | } |
---|
971 | if(this.tbar){ |
---|
972 | this.tbar.addClass(this.tbarCls + '-noborder'); |
---|
973 | } |
---|
974 | if(this.bbar){ |
---|
975 | this.bbar.addClass(this.bbarCls + '-noborder'); |
---|
976 | } |
---|
977 | } |
---|
978 | |
---|
979 | if(this.bodyBorder === false){ |
---|
980 | this.body.addClass(this.bodyCls + '-noborder'); |
---|
981 | } |
---|
982 | |
---|
983 | this.bwrap.enableDisplayMode('block'); |
---|
984 | |
---|
985 | if(this.header){ |
---|
986 | this.header.unselectable(); |
---|
987 | |
---|
988 | // for tools, we need to wrap any existing header markup |
---|
989 | if(this.headerAsText){ |
---|
990 | this.header.dom.innerHTML = |
---|
991 | '<span class="' + this.headerTextCls + '">'+this.header.dom.innerHTML+'</span>'; |
---|
992 | |
---|
993 | if(this.iconCls){ |
---|
994 | this.setIconClass(this.iconCls); |
---|
995 | } |
---|
996 | } |
---|
997 | } |
---|
998 | |
---|
999 | if(this.floating){ |
---|
1000 | this.makeFloating(this.floating); |
---|
1001 | } |
---|
1002 | |
---|
1003 | if(this.collapsible){ |
---|
1004 | this.tools = this.tools ? this.tools.slice(0) : []; |
---|
1005 | if(!this.hideCollapseTool){ |
---|
1006 | this.tools[this.collapseFirst?'unshift':'push']({ |
---|
1007 | id: 'toggle', |
---|
1008 | handler : this.toggleCollapse, |
---|
1009 | scope: this |
---|
1010 | }); |
---|
1011 | } |
---|
1012 | if(this.titleCollapse && this.header){ |
---|
1013 | this.mon(this.header, 'click', this.toggleCollapse, this); |
---|
1014 | this.header.setStyle('cursor', 'pointer'); |
---|
1015 | } |
---|
1016 | } |
---|
1017 | if(this.tools){ |
---|
1018 | var ts = this.tools; |
---|
1019 | this.tools = {}; |
---|
1020 | this.addTool.apply(this, ts); |
---|
1021 | }else{ |
---|
1022 | this.tools = {}; |
---|
1023 | } |
---|
1024 | |
---|
1025 | if(this.buttons && this.buttons.length > 0){ |
---|
1026 | this.fbar = new Ext.Toolbar({ |
---|
1027 | items: this.buttons, |
---|
1028 | toolbarCls: 'x-panel-fbar' |
---|
1029 | }); |
---|
1030 | } |
---|
1031 | this.toolbars = []; |
---|
1032 | if(this.fbar){ |
---|
1033 | this.fbar = Ext.create(this.fbar, 'toolbar'); |
---|
1034 | this.fbar.enableOverflow = false; |
---|
1035 | if(this.fbar.items){ |
---|
1036 | this.fbar.items.each(function(c){ |
---|
1037 | c.minWidth = c.minWidth || this.minButtonWidth; |
---|
1038 | }, this); |
---|
1039 | } |
---|
1040 | this.fbar.toolbarCls = 'x-panel-fbar'; |
---|
1041 | |
---|
1042 | var bct = this.footer.createChild({cls: 'x-panel-btns x-panel-btns-'+this.buttonAlign}); |
---|
1043 | this.fbar.ownerCt = this; |
---|
1044 | this.fbar.render(bct); |
---|
1045 | bct.createChild({cls:'x-clear'}); |
---|
1046 | this.toolbars.push(this.fbar); |
---|
1047 | } |
---|
1048 | |
---|
1049 | if(this.tbar && this.topToolbar){ |
---|
1050 | if(Ext.isArray(this.topToolbar)){ |
---|
1051 | this.topToolbar = new Ext.Toolbar(this.topToolbar); |
---|
1052 | }else if(!this.topToolbar.events){ |
---|
1053 | this.topToolbar = Ext.create(this.topToolbar, 'toolbar'); |
---|
1054 | } |
---|
1055 | this.topToolbar.ownerCt = this; |
---|
1056 | this.topToolbar.render(this.tbar); |
---|
1057 | this.toolbars.push(this.topToolbar); |
---|
1058 | } |
---|
1059 | if(this.bbar && this.bottomToolbar){ |
---|
1060 | if(Ext.isArray(this.bottomToolbar)){ |
---|
1061 | this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar); |
---|
1062 | }else if(!this.bottomToolbar.events){ |
---|
1063 | this.bottomToolbar = Ext.create(this.bottomToolbar, 'toolbar'); |
---|
1064 | } |
---|
1065 | this.bottomToolbar.ownerCt = this; |
---|
1066 | this.bottomToolbar.render(this.bbar); |
---|
1067 | this.toolbars.push(this.bottomToolbar); |
---|
1068 | } |
---|
1069 | Ext.each(this.toolbars, function(tb){ |
---|
1070 | tb.on({ |
---|
1071 | scope: this, |
---|
1072 | afterlayout: this.syncHeight, |
---|
1073 | remove: this.syncHeight |
---|
1074 | }); |
---|
1075 | }, this); |
---|
1076 | }, |
---|
1077 | |
---|
1078 | /** |
---|
1079 | * Sets the CSS class that provides the icon image for this panel. This method will replace any existing |
---|
1080 | * icon class if one has already been set and fire the {@link #iconchange} event after completion. |
---|
1081 | * @param {String} cls The new CSS class name |
---|
1082 | */ |
---|
1083 | setIconClass : function(cls){ |
---|
1084 | var old = this.iconCls; |
---|
1085 | this.iconCls = cls; |
---|
1086 | if(this.rendered && this.header){ |
---|
1087 | if(this.frame){ |
---|
1088 | this.header.addClass('x-panel-icon'); |
---|
1089 | this.header.replaceClass(old, this.iconCls); |
---|
1090 | }else{ |
---|
1091 | var hd = this.header.dom; |
---|
1092 | var img = hd.firstChild && String(hd.firstChild.tagName).toLowerCase() == 'img' ? hd.firstChild : null; |
---|
1093 | if(img){ |
---|
1094 | Ext.fly(img).replaceClass(old, this.iconCls); |
---|
1095 | }else{ |
---|
1096 | Ext.DomHelper.insertBefore(hd.firstChild, { |
---|
1097 | tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls |
---|
1098 | }); |
---|
1099 | } |
---|
1100 | } |
---|
1101 | } |
---|
1102 | this.fireEvent('iconchange', this, cls, old); |
---|
1103 | }, |
---|
1104 | |
---|
1105 | // private |
---|
1106 | makeFloating : function(cfg){ |
---|
1107 | this.floating = true; |
---|
1108 | this.el = new Ext.Layer( |
---|
1109 | Ext.isObject(cfg) ? cfg : { |
---|
1110 | shadow: this.shadow !== undefined ? this.shadow : 'sides', |
---|
1111 | shadowOffset: this.shadowOffset, |
---|
1112 | constrain:false, |
---|
1113 | shim: this.shim === false ? false : undefined |
---|
1114 | }, this.el |
---|
1115 | ); |
---|
1116 | }, |
---|
1117 | |
---|
1118 | /** |
---|
1119 | * Returns the {@link Ext.Toolbar toolbar} from the top (<tt>{@link #tbar}</tt>) section of the panel. |
---|
1120 | * @return {Ext.Toolbar} The toolbar |
---|
1121 | */ |
---|
1122 | getTopToolbar : function(){ |
---|
1123 | return this.topToolbar; |
---|
1124 | }, |
---|
1125 | |
---|
1126 | /** |
---|
1127 | * Returns the {@link Ext.Toolbar toolbar} from the bottom (<tt>{@link #bbar}</tt>) section of the panel. |
---|
1128 | * @return {Ext.Toolbar} The toolbar |
---|
1129 | */ |
---|
1130 | getBottomToolbar : function(){ |
---|
1131 | return this.bottomToolbar; |
---|
1132 | }, |
---|
1133 | |
---|
1134 | /** |
---|
1135 | * Adds a button to this panel. Note that this method must be called prior to rendering. The preferred |
---|
1136 | * approach is to add buttons via the {@link #buttons} config. |
---|
1137 | * @param {String/Object} config A valid {@link Ext.Button} config. A string will become the text for a default |
---|
1138 | * button config, an object will be treated as a button config object. |
---|
1139 | * @param {Function} handler The function to be called on button {@link Ext.Button#click} |
---|
1140 | * @param {Object} scope The scope to use for the button handler function |
---|
1141 | * @return {Ext.Button} The button that was added |
---|
1142 | */ |
---|
1143 | addButton : function(config, handler, scope){ |
---|
1144 | var bc = { |
---|
1145 | handler: handler, |
---|
1146 | scope: scope, |
---|
1147 | minWidth: this.minButtonWidth, |
---|
1148 | hideParent:true |
---|
1149 | }; |
---|
1150 | if(typeof config == "string"){ |
---|
1151 | bc.text = config; |
---|
1152 | }else{ |
---|
1153 | Ext.apply(bc, config); |
---|
1154 | } |
---|
1155 | var btn = new Ext.Button(bc); |
---|
1156 | if(!this.buttons){ |
---|
1157 | this.buttons = []; |
---|
1158 | } |
---|
1159 | this.buttons.push(btn); |
---|
1160 | return btn; |
---|
1161 | }, |
---|
1162 | |
---|
1163 | // private |
---|
1164 | addTool : function(){ |
---|
1165 | if(!this[this.toolTarget]) { // no where to render tools! |
---|
1166 | return; |
---|
1167 | } |
---|
1168 | if(!this.toolTemplate){ |
---|
1169 | // initialize the global tool template on first use |
---|
1170 | var tt = new Ext.Template( |
---|
1171 | '<div class="x-tool x-tool-{id}"> </div>' |
---|
1172 | ); |
---|
1173 | tt.disableFormats = true; |
---|
1174 | tt.compile(); |
---|
1175 | Ext.Panel.prototype.toolTemplate = tt; |
---|
1176 | } |
---|
1177 | for(var i = 0, a = arguments, len = a.length; i < len; i++) { |
---|
1178 | var tc = a[i]; |
---|
1179 | if(!this.tools[tc.id]){ |
---|
1180 | var overCls = 'x-tool-'+tc.id+'-over'; |
---|
1181 | var t = this.toolTemplate.insertFirst((tc.align !== 'left') ? this[this.toolTarget] : this[this.toolTarget].child('span'), tc, true); |
---|
1182 | this.tools[tc.id] = t; |
---|
1183 | t.enableDisplayMode('block'); |
---|
1184 | this.mon(t, 'click', this.createToolHandler(t, tc, overCls, this)); |
---|
1185 | if(tc.on){ |
---|
1186 | this.mon(t, tc.on); |
---|
1187 | } |
---|
1188 | if(tc.hidden){ |
---|
1189 | t.hide(); |
---|
1190 | } |
---|
1191 | if(tc.qtip){ |
---|
1192 | if(Ext.isObject(tc.qtip)){ |
---|
1193 | Ext.QuickTips.register(Ext.apply({ |
---|
1194 | target: t.id |
---|
1195 | }, tc.qtip)); |
---|
1196 | } else { |
---|
1197 | t.dom.qtip = tc.qtip; |
---|
1198 | } |
---|
1199 | } |
---|
1200 | t.addClassOnOver(overCls); |
---|
1201 | } |
---|
1202 | } |
---|
1203 | }, |
---|
1204 | |
---|
1205 | onLayout : function(){ |
---|
1206 | if(this.toolbars.length > 0){ |
---|
1207 | this.duringLayout = true; |
---|
1208 | Ext.each(this.toolbars, function(tb){ |
---|
1209 | tb.doLayout(); |
---|
1210 | }); |
---|
1211 | delete this.duringLayout; |
---|
1212 | this.syncHeight(); |
---|
1213 | } |
---|
1214 | }, |
---|
1215 | |
---|
1216 | syncHeight : function(){ |
---|
1217 | if(!(this.autoHeight || this.duringLayout)){ |
---|
1218 | var last = this.lastSize; |
---|
1219 | if(last && !Ext.isEmpty(last.height)){ |
---|
1220 | var old = last.height, h = this.el.getHeight(); |
---|
1221 | if(old != 'auto' && old != h){ |
---|
1222 | var bd = this.body, bdh = bd.getHeight(); |
---|
1223 | h = Math.max(bdh + old - h, 0); |
---|
1224 | if(bdh > 0 && bdh != h){ |
---|
1225 | bd.setHeight(h); |
---|
1226 | if(Ext.isIE && h <= 0){ |
---|
1227 | return; |
---|
1228 | } |
---|
1229 | var sz = bd.getSize(); |
---|
1230 | this.fireEvent('bodyresize', sz.width, sz.height); |
---|
1231 | } |
---|
1232 | } |
---|
1233 | } |
---|
1234 | } |
---|
1235 | }, |
---|
1236 | |
---|
1237 | // private |
---|
1238 | onShow : function(){ |
---|
1239 | if(this.floating){ |
---|
1240 | return this.el.show(); |
---|
1241 | } |
---|
1242 | Ext.Panel.superclass.onShow.call(this); |
---|
1243 | }, |
---|
1244 | |
---|
1245 | // private |
---|
1246 | onHide : function(){ |
---|
1247 | if(this.floating){ |
---|
1248 | return this.el.hide(); |
---|
1249 | } |
---|
1250 | Ext.Panel.superclass.onHide.call(this); |
---|
1251 | }, |
---|
1252 | |
---|
1253 | // private |
---|
1254 | createToolHandler : function(t, tc, overCls, panel){ |
---|
1255 | return function(e){ |
---|
1256 | t.removeClass(overCls); |
---|
1257 | if(tc.stopEvent !== false){ |
---|
1258 | e.stopEvent(); |
---|
1259 | } |
---|
1260 | if(tc.handler){ |
---|
1261 | tc.handler.call(tc.scope || t, e, t, panel, tc); |
---|
1262 | } |
---|
1263 | }; |
---|
1264 | }, |
---|
1265 | |
---|
1266 | // private |
---|
1267 | afterRender : function(){ |
---|
1268 | if(this.floating && !this.hidden){ |
---|
1269 | this.el.show(); |
---|
1270 | } |
---|
1271 | if(this.title){ |
---|
1272 | this.setTitle(this.title); |
---|
1273 | } |
---|
1274 | this.setAutoScroll(); |
---|
1275 | if(this.html){ |
---|
1276 | this.body.update(Ext.isObject(this.html) ? |
---|
1277 | Ext.DomHelper.markup(this.html) : |
---|
1278 | this.html); |
---|
1279 | delete this.html; |
---|
1280 | } |
---|
1281 | if(this.contentEl){ |
---|
1282 | var ce = Ext.getDom(this.contentEl); |
---|
1283 | Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); |
---|
1284 | this.body.dom.appendChild(ce); |
---|
1285 | } |
---|
1286 | if(this.collapsed){ |
---|
1287 | this.collapsed = false; |
---|
1288 | this.collapse(false); |
---|
1289 | } |
---|
1290 | Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last |
---|
1291 | this.initEvents(); |
---|
1292 | }, |
---|
1293 | |
---|
1294 | // private |
---|
1295 | setAutoScroll : function(){ |
---|
1296 | if(this.rendered && this.autoScroll){ |
---|
1297 | var el = this.body || this.el; |
---|
1298 | if(el){ |
---|
1299 | el.setOverflow('auto'); |
---|
1300 | } |
---|
1301 | } |
---|
1302 | }, |
---|
1303 | |
---|
1304 | // private |
---|
1305 | getKeyMap : function(){ |
---|
1306 | if(!this.keyMap){ |
---|
1307 | this.keyMap = new Ext.KeyMap(this.el, this.keys); |
---|
1308 | } |
---|
1309 | return this.keyMap; |
---|
1310 | }, |
---|
1311 | |
---|
1312 | // private |
---|
1313 | initEvents : function(){ |
---|
1314 | if(this.keys){ |
---|
1315 | this.getKeyMap(); |
---|
1316 | } |
---|
1317 | if(this.draggable){ |
---|
1318 | this.initDraggable(); |
---|
1319 | } |
---|
1320 | }, |
---|
1321 | |
---|
1322 | // private |
---|
1323 | initDraggable : function(){ |
---|
1324 | /** |
---|
1325 | * <p>If this Panel is configured {@link #draggable}, this property will contain |
---|
1326 | * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.</p> |
---|
1327 | * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} |
---|
1328 | * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}. |
---|
1329 | * @type Ext.dd.DragSource. |
---|
1330 | * @property dd |
---|
1331 | */ |
---|
1332 | this.dd = new Ext.Panel.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable); |
---|
1333 | }, |
---|
1334 | |
---|
1335 | // private |
---|
1336 | beforeEffect : function(){ |
---|
1337 | if(this.floating){ |
---|
1338 | this.el.beforeAction(); |
---|
1339 | } |
---|
1340 | this.el.addClass('x-panel-animated'); |
---|
1341 | }, |
---|
1342 | |
---|
1343 | // private |
---|
1344 | afterEffect : function(){ |
---|
1345 | this.syncShadow(); |
---|
1346 | this.el.removeClass('x-panel-animated'); |
---|
1347 | }, |
---|
1348 | |
---|
1349 | // private - wraps up an animation param with internal callbacks |
---|
1350 | createEffect : function(a, cb, scope){ |
---|
1351 | var o = { |
---|
1352 | scope:scope, |
---|
1353 | block:true |
---|
1354 | }; |
---|
1355 | if(a === true){ |
---|
1356 | o.callback = cb; |
---|
1357 | return o; |
---|
1358 | }else if(!a.callback){ |
---|
1359 | o.callback = cb; |
---|
1360 | }else { // wrap it up |
---|
1361 | o.callback = function(){ |
---|
1362 | cb.call(scope); |
---|
1363 | Ext.callback(a.callback, a.scope); |
---|
1364 | }; |
---|
1365 | } |
---|
1366 | return Ext.applyIf(o, a); |
---|
1367 | }, |
---|
1368 | |
---|
1369 | /** |
---|
1370 | * Collapses the panel body so that it becomes hidden. Fires the {@link #beforecollapse} event which will |
---|
1371 | * cancel the collapse action if it returns false. |
---|
1372 | * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the |
---|
1373 | * {@link #animCollapse} panel config) |
---|
1374 | * @return {Ext.Panel} this |
---|
1375 | */ |
---|
1376 | collapse : function(animate){ |
---|
1377 | if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){ |
---|
1378 | return; |
---|
1379 | } |
---|
1380 | var doAnim = animate === true || (animate !== false && this.animCollapse); |
---|
1381 | this.beforeEffect(); |
---|
1382 | this.onCollapse(doAnim, animate); |
---|
1383 | return this; |
---|
1384 | }, |
---|
1385 | |
---|
1386 | // private |
---|
1387 | onCollapse : function(doAnim, animArg){ |
---|
1388 | if(doAnim){ |
---|
1389 | this[this.collapseEl].slideOut(this.slideAnchor, |
---|
1390 | Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this), |
---|
1391 | this.collapseDefaults)); |
---|
1392 | }else{ |
---|
1393 | this[this.collapseEl].hide(); |
---|
1394 | this.afterCollapse(); |
---|
1395 | } |
---|
1396 | }, |
---|
1397 | |
---|
1398 | // private |
---|
1399 | afterCollapse : function(){ |
---|
1400 | this.collapsed = true; |
---|
1401 | this.el.addClass(this.collapsedCls); |
---|
1402 | this.afterEffect(); |
---|
1403 | this.fireEvent('collapse', this); |
---|
1404 | }, |
---|
1405 | |
---|
1406 | /** |
---|
1407 | * Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will |
---|
1408 | * cancel the expand action if it returns false. |
---|
1409 | * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the |
---|
1410 | * {@link #animCollapse} panel config) |
---|
1411 | * @return {Ext.Panel} this |
---|
1412 | */ |
---|
1413 | expand : function(animate){ |
---|
1414 | if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){ |
---|
1415 | return; |
---|
1416 | } |
---|
1417 | var doAnim = animate === true || (animate !== false && this.animCollapse); |
---|
1418 | this.el.removeClass(this.collapsedCls); |
---|
1419 | this.beforeEffect(); |
---|
1420 | this.onExpand(doAnim, animate); |
---|
1421 | return this; |
---|
1422 | }, |
---|
1423 | |
---|
1424 | // private |
---|
1425 | onExpand : function(doAnim, animArg){ |
---|
1426 | if(doAnim){ |
---|
1427 | this[this.collapseEl].slideIn(this.slideAnchor, |
---|
1428 | Ext.apply(this.createEffect(animArg||true, this.afterExpand, this), |
---|
1429 | this.expandDefaults)); |
---|
1430 | }else{ |
---|
1431 | this[this.collapseEl].show(); |
---|
1432 | this.afterExpand(); |
---|
1433 | } |
---|
1434 | }, |
---|
1435 | |
---|
1436 | // private |
---|
1437 | afterExpand : function(){ |
---|
1438 | this.collapsed = false; |
---|
1439 | this.afterEffect(); |
---|
1440 | if(this.deferLayout !== undefined){ |
---|
1441 | this.doLayout(true); |
---|
1442 | } |
---|
1443 | this.fireEvent('expand', this); |
---|
1444 | }, |
---|
1445 | |
---|
1446 | /** |
---|
1447 | * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel. |
---|
1448 | * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the |
---|
1449 | * {@link #animCollapse} panel config) |
---|
1450 | * @return {Ext.Panel} this |
---|
1451 | */ |
---|
1452 | toggleCollapse : function(animate){ |
---|
1453 | this[this.collapsed ? 'expand' : 'collapse'](animate); |
---|
1454 | return this; |
---|
1455 | }, |
---|
1456 | |
---|
1457 | // private |
---|
1458 | onDisable : function(){ |
---|
1459 | if(this.rendered && this.maskDisabled){ |
---|
1460 | this.el.mask(); |
---|
1461 | } |
---|
1462 | Ext.Panel.superclass.onDisable.call(this); |
---|
1463 | }, |
---|
1464 | |
---|
1465 | // private |
---|
1466 | onEnable : function(){ |
---|
1467 | if(this.rendered && this.maskDisabled){ |
---|
1468 | this.el.unmask(); |
---|
1469 | } |
---|
1470 | Ext.Panel.superclass.onEnable.call(this); |
---|
1471 | }, |
---|
1472 | |
---|
1473 | // private |
---|
1474 | onResize : function(w, h){ |
---|
1475 | if(w !== undefined || h !== undefined){ |
---|
1476 | if(!this.collapsed){ |
---|
1477 | if(typeof w == 'number'){ |
---|
1478 | w = this.adjustBodyWidth(w - this.getFrameWidth()); |
---|
1479 | if(this.tbar){ |
---|
1480 | this.tbar.setWidth(w); |
---|
1481 | if(this.topToolbar){ |
---|
1482 | this.topToolbar.setSize(w); |
---|
1483 | } |
---|
1484 | } |
---|
1485 | if(this.bbar){ |
---|
1486 | this.bbar.setWidth(w); |
---|
1487 | if(this.bottomToolbar){ |
---|
1488 | this.bottomToolbar.setSize(w); |
---|
1489 | } |
---|
1490 | } |
---|
1491 | if(this.fbar){ |
---|
1492 | var f = this.fbar, |
---|
1493 | fWidth = 1, |
---|
1494 | strict = Ext.isStrict; |
---|
1495 | if(this.buttonAlign == 'left'){ |
---|
1496 | fWidth = w - f.container.getFrameWidth('lr'); |
---|
1497 | }else{ |
---|
1498 | //center/right alignment off in webkit |
---|
1499 | if(Ext.isIE || Ext.isWebKit){ |
---|
1500 | //center alignment ok on webkit. |
---|
1501 | //right broken in both, center on IE |
---|
1502 | if(!(this.buttonAlign == 'center' && Ext.isWebKit) && (!strict || (!Ext.isIE8 && strict))){ |
---|
1503 | (function(){ |
---|
1504 | f.setWidth(f.getEl().child('.x-toolbar-ct').getWidth()); |
---|
1505 | }).defer(1); |
---|
1506 | }else{ |
---|
1507 | fWidth = 'auto'; |
---|
1508 | } |
---|
1509 | }else{ |
---|
1510 | fWidth = 'auto'; |
---|
1511 | } |
---|
1512 | } |
---|
1513 | f.setWidth(fWidth); |
---|
1514 | } |
---|
1515 | this.body.setWidth(w); |
---|
1516 | }else if(w == 'auto'){ |
---|
1517 | this.body.setWidth(w); |
---|
1518 | } |
---|
1519 | |
---|
1520 | if(typeof h == 'number'){ |
---|
1521 | h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight())); |
---|
1522 | this.body.setHeight(h); |
---|
1523 | }else if(h == 'auto'){ |
---|
1524 | this.body.setHeight(h); |
---|
1525 | } |
---|
1526 | |
---|
1527 | if(this.disabled && this.el._mask){ |
---|
1528 | this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight()); |
---|
1529 | } |
---|
1530 | }else{ |
---|
1531 | this.queuedBodySize = {width: w, height: h}; |
---|
1532 | if(!this.queuedExpand && this.allowQueuedExpand !== false){ |
---|
1533 | this.queuedExpand = true; |
---|
1534 | this.on('expand', function(){ |
---|
1535 | delete this.queuedExpand; |
---|
1536 | this.onResize(this.queuedBodySize.width, this.queuedBodySize.height); |
---|
1537 | this.doLayout(); |
---|
1538 | }, this, {single:true}); |
---|
1539 | } |
---|
1540 | } |
---|
1541 | this.fireEvent('bodyresize', this, w, h); |
---|
1542 | } |
---|
1543 | this.syncShadow(); |
---|
1544 | }, |
---|
1545 | |
---|
1546 | // private |
---|
1547 | adjustBodyHeight : function(h){ |
---|
1548 | return h; |
---|
1549 | }, |
---|
1550 | |
---|
1551 | // private |
---|
1552 | adjustBodyWidth : function(w){ |
---|
1553 | return w; |
---|
1554 | }, |
---|
1555 | |
---|
1556 | // private |
---|
1557 | onPosition : function(){ |
---|
1558 | this.syncShadow(); |
---|
1559 | }, |
---|
1560 | |
---|
1561 | /** |
---|
1562 | * Returns the width in pixels of the framing elements of this panel (not including the body width). To |
---|
1563 | * retrieve the body width see {@link #getInnerWidth}. |
---|
1564 | * @return {Number} The frame width |
---|
1565 | */ |
---|
1566 | getFrameWidth : function(){ |
---|
1567 | var w = this.el.getFrameWidth('lr')+this.bwrap.getFrameWidth('lr'); |
---|
1568 | |
---|
1569 | if(this.frame){ |
---|
1570 | var l = this.bwrap.dom.firstChild; |
---|
1571 | w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r')); |
---|
1572 | var mc = this.bwrap.dom.firstChild.firstChild.firstChild; |
---|
1573 | w += Ext.fly(mc).getFrameWidth('lr'); |
---|
1574 | } |
---|
1575 | return w; |
---|
1576 | }, |
---|
1577 | |
---|
1578 | /** |
---|
1579 | * Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and |
---|
1580 | * header and footer elements, but not including the body height). To retrieve the body height see {@link #getInnerHeight}. |
---|
1581 | * @return {Number} The frame height |
---|
1582 | */ |
---|
1583 | getFrameHeight : function(){ |
---|
1584 | var h = this.el.getFrameWidth('tb')+this.bwrap.getFrameWidth('tb'); |
---|
1585 | h += (this.tbar ? this.tbar.getHeight() : 0) + |
---|
1586 | (this.bbar ? this.bbar.getHeight() : 0); |
---|
1587 | |
---|
1588 | if(this.frame){ |
---|
1589 | var hd = this.el.dom.firstChild; |
---|
1590 | var ft = this.bwrap.dom.lastChild; |
---|
1591 | h += (hd.offsetHeight + ft.offsetHeight); |
---|
1592 | var mc = this.bwrap.dom.firstChild.firstChild.firstChild; |
---|
1593 | h += Ext.fly(mc).getFrameWidth('tb'); |
---|
1594 | }else{ |
---|
1595 | h += (this.header ? this.header.getHeight() : 0) + |
---|
1596 | (this.footer ? this.footer.getHeight() : 0); |
---|
1597 | } |
---|
1598 | return h; |
---|
1599 | }, |
---|
1600 | |
---|
1601 | /** |
---|
1602 | * Returns the width in pixels of the body element (not including the width of any framing elements). |
---|
1603 | * For the frame width see {@link #getFrameWidth}. |
---|
1604 | * @return {Number} The body width |
---|
1605 | */ |
---|
1606 | getInnerWidth : function(){ |
---|
1607 | return this.getSize().width - this.getFrameWidth(); |
---|
1608 | }, |
---|
1609 | |
---|
1610 | /** |
---|
1611 | * Returns the height in pixels of the body element (not including the height of any framing elements). |
---|
1612 | * For the frame height see {@link #getFrameHeight}. |
---|
1613 | * @return {Number} The body height |
---|
1614 | */ |
---|
1615 | getInnerHeight : function(){ |
---|
1616 | return this.getSize().height - this.getFrameHeight(); |
---|
1617 | }, |
---|
1618 | |
---|
1619 | // private |
---|
1620 | syncShadow : function(){ |
---|
1621 | if(this.floating){ |
---|
1622 | this.el.sync(true); |
---|
1623 | } |
---|
1624 | }, |
---|
1625 | |
---|
1626 | // private |
---|
1627 | getLayoutTarget : function(){ |
---|
1628 | return this.body; |
---|
1629 | }, |
---|
1630 | |
---|
1631 | /** |
---|
1632 | * <p>Sets the title text for the panel and optionally the {@link #iconCls icon class}.</p> |
---|
1633 | * <p>In order to be able to set the title, a header element must have been created |
---|
1634 | * for the Panel. This is triggered either by configuring the Panel with a non-blank <tt>{@link #title}</tt>, |
---|
1635 | * or configuring it with <tt><b>{@link #header}: true</b></tt>.</p> |
---|
1636 | * @param {String} title The title text to set |
---|
1637 | * @param {String} iconCls (optional) {@link #iconCls iconCls} A user-defined CSS class that provides the icon image for this panel |
---|
1638 | */ |
---|
1639 | setTitle : function(title, iconCls){ |
---|
1640 | this.title = title; |
---|
1641 | if(this.header && this.headerAsText){ |
---|
1642 | this.header.child('span').update(title); |
---|
1643 | } |
---|
1644 | if(iconCls){ |
---|
1645 | this.setIconClass(iconCls); |
---|
1646 | } |
---|
1647 | this.fireEvent('titlechange', this, title); |
---|
1648 | return this; |
---|
1649 | }, |
---|
1650 | |
---|
1651 | /** |
---|
1652 | * Get the {@link Ext.Updater} for this panel. Enables you to perform Ajax updates of this panel's body. |
---|
1653 | * @return {Ext.Updater} The Updater |
---|
1654 | */ |
---|
1655 | getUpdater : function(){ |
---|
1656 | return this.body.getUpdater(); |
---|
1657 | }, |
---|
1658 | |
---|
1659 | /** |
---|
1660 | * Loads this content panel immediately with content returned from an XHR call. |
---|
1661 | * @param {Object/String/Function} config A config object containing any of the following options: |
---|
1662 | <pre><code> |
---|
1663 | panel.load({ |
---|
1664 | url: "your-url.php", |
---|
1665 | params: {param1: "foo", param2: "bar"}, // or a URL encoded string |
---|
1666 | callback: yourFunction, |
---|
1667 | scope: yourObject, // optional scope for the callback |
---|
1668 | discardUrl: false, |
---|
1669 | nocache: false, |
---|
1670 | text: "Loading...", |
---|
1671 | timeout: 30, |
---|
1672 | scripts: false |
---|
1673 | }); |
---|
1674 | </code></pre> |
---|
1675 | * The only required property is url. The optional properties nocache, text and scripts |
---|
1676 | * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their |
---|
1677 | * associated property on this panel Updater instance. |
---|
1678 | * @return {Ext.Panel} this |
---|
1679 | */ |
---|
1680 | load : function(){ |
---|
1681 | var um = this.body.getUpdater(); |
---|
1682 | um.update.apply(um, arguments); |
---|
1683 | return this; |
---|
1684 | }, |
---|
1685 | |
---|
1686 | // private |
---|
1687 | beforeDestroy : function(){ |
---|
1688 | if(this.header){ |
---|
1689 | this.header.removeAllListeners(); |
---|
1690 | if(this.headerAsText){ |
---|
1691 | Ext.Element.uncache(this.header.child('span')); |
---|
1692 | } |
---|
1693 | } |
---|
1694 | Ext.Element.uncache( |
---|
1695 | this.header, |
---|
1696 | this.tbar, |
---|
1697 | this.bbar, |
---|
1698 | this.footer, |
---|
1699 | this.body, |
---|
1700 | this.bwrap |
---|
1701 | ); |
---|
1702 | if(this.tools){ |
---|
1703 | for(var k in this.tools){ |
---|
1704 | Ext.destroy(this.tools[k]); |
---|
1705 | } |
---|
1706 | } |
---|
1707 | if(this.buttons){ |
---|
1708 | for(var b in this.buttons){ |
---|
1709 | Ext.destroy(this.buttons[b]); |
---|
1710 | } |
---|
1711 | } |
---|
1712 | Ext.destroy(this.toolbars); |
---|
1713 | Ext.Panel.superclass.beforeDestroy.call(this); |
---|
1714 | }, |
---|
1715 | |
---|
1716 | // private |
---|
1717 | createClasses : function(){ |
---|
1718 | this.headerCls = this.baseCls + '-header'; |
---|
1719 | this.headerTextCls = this.baseCls + '-header-text'; |
---|
1720 | this.bwrapCls = this.baseCls + '-bwrap'; |
---|
1721 | this.tbarCls = this.baseCls + '-tbar'; |
---|
1722 | this.bodyCls = this.baseCls + '-body'; |
---|
1723 | this.bbarCls = this.baseCls + '-bbar'; |
---|
1724 | this.footerCls = this.baseCls + '-footer'; |
---|
1725 | }, |
---|
1726 | |
---|
1727 | // private |
---|
1728 | createGhost : function(cls, useShim, appendTo){ |
---|
1729 | var el = document.createElement('div'); |
---|
1730 | el.className = 'x-panel-ghost ' + (cls ? cls : ''); |
---|
1731 | if(this.header){ |
---|
1732 | el.appendChild(this.el.dom.firstChild.cloneNode(true)); |
---|
1733 | } |
---|
1734 | Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.bwrap.getHeight()); |
---|
1735 | el.style.width = this.el.dom.offsetWidth + 'px';; |
---|
1736 | if(!appendTo){ |
---|
1737 | this.container.dom.appendChild(el); |
---|
1738 | }else{ |
---|
1739 | Ext.getDom(appendTo).appendChild(el); |
---|
1740 | } |
---|
1741 | if(useShim !== false && this.el.useShim !== false){ |
---|
1742 | var layer = new Ext.Layer({shadow:false, useDisplay:true, constrain:false}, el); |
---|
1743 | layer.show(); |
---|
1744 | return layer; |
---|
1745 | }else{ |
---|
1746 | return new Ext.Element(el); |
---|
1747 | } |
---|
1748 | }, |
---|
1749 | |
---|
1750 | // private |
---|
1751 | doAutoLoad : function(){ |
---|
1752 | var u = this.body.getUpdater(); |
---|
1753 | if(this.renderer){ |
---|
1754 | u.setRenderer(this.renderer); |
---|
1755 | } |
---|
1756 | u.update(Ext.isObject(this.autoLoad) ? this.autoLoad : {url: this.autoLoad}); |
---|
1757 | }, |
---|
1758 | |
---|
1759 | /** |
---|
1760 | * Retrieve a tool by id. |
---|
1761 | * @param {String} id |
---|
1762 | * @return {Object} tool |
---|
1763 | */ |
---|
1764 | getTool : function(id) { |
---|
1765 | return this.tools[id]; |
---|
1766 | } |
---|
1767 | |
---|
1768 | /** |
---|
1769 | * @cfg {String} autoEl @hide |
---|
1770 | */ |
---|
1771 | }); |
---|
1772 | Ext.reg('panel', Ext.Panel); |
---|