-// css class that specifies background image to be used as the icon image:
-.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
-</code></pre>
- */
- <div id="cfg-Ext.Panel-collapsible"></div>/**
- * @cfg {Boolean} collapsible
- * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into
- * the header tool button area, false to keep the panel statically sized with no button (defaults to false).
- */
- <div id="cfg-Ext.Panel-tools"></div>/**
- * @cfg {Array} tools
- * An array of tool button configs to be added to the header tool area. When rendered, each tool is
- * stored as an {@link Ext.Element Element} referenced by a public property called <code><b></b>tools.<i><tool-type></i></code>
- * <p>Each tool config may contain the following properties:
- * <div class="mdetail-params"><ul>
- * <li><b>id</b> : String<div class="sub-desc"><b>Required.</b> The type
- * of tool to create. By default, this assigns a CSS class of the form <code>x-tool-<i><tool-type></i></code> to the
- * resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below.
- * The developer may implement custom tools by supplying alternate CSS rules and background images:
- * <ul>
- * <div class="x-tool x-tool-toggle" style="float:left; margin-right:5;"> </div><div><code> toggle</code> (Created by default when {@link #collapsible} is <code>true</code>)</div>
- * <div class="x-tool x-tool-close" style="float:left; margin-right:5;"> </div><div><code> close</code></div>
- * <div class="x-tool x-tool-minimize" style="float:left; margin-right:5;"> </div><div><code> minimize</code></div>
- * <div class="x-tool x-tool-maximize" style="float:left; margin-right:5;"> </div><div><code> maximize</code></div>
- * <div class="x-tool x-tool-restore" style="float:left; margin-right:5;"> </div><div><code> restore</code></div>
- * <div class="x-tool x-tool-gear" style="float:left; margin-right:5;"> </div><div><code> gear</code></div>
- * <div class="x-tool x-tool-pin" style="float:left; margin-right:5;"> </div><div><code> pin</code></div>
- * <div class="x-tool x-tool-unpin" style="float:left; margin-right:5;"> </div><div><code> unpin</code></div>
- * <div class="x-tool x-tool-right" style="float:left; margin-right:5;"> </div><div><code> right</code></div>
- * <div class="x-tool x-tool-left" style="float:left; margin-right:5;"> </div><div><code> left</code></div>
- * <div class="x-tool x-tool-up" style="float:left; margin-right:5;"> </div><div><code> up</code></div>
- * <div class="x-tool x-tool-down" style="float:left; margin-right:5;"> </div><div><code> down</code></div>
- * <div class="x-tool x-tool-refresh" style="float:left; margin-right:5;"> </div><div><code> refresh</code></div>
- * <div class="x-tool x-tool-minus" style="float:left; margin-right:5;"> </div><div><code> minus</code></div>
- * <div class="x-tool x-tool-plus" style="float:left; margin-right:5;"> </div><div><code> plus</code></div>
- * <div class="x-tool x-tool-help" style="float:left; margin-right:5;"> </div><div><code> help</code></div>
- * <div class="x-tool x-tool-search" style="float:left; margin-right:5;"> </div><div><code> search</code></div>
- * <div class="x-tool x-tool-save" style="float:left; margin-right:5;"> </div><div><code> save</code></div>
- * <div class="x-tool x-tool-print" style="float:left; margin-right:5;"> </div><div><code> print</code></div>
- * </ul></div></li>
- * <li><b>handler</b> : Function<div class="sub-desc"><b>Required.</b> The function to
- * call when clicked. Arguments passed are:<ul>
- * <li><b>event</b> : Ext.EventObject<div class="sub-desc">The click event.</div></li>
- * <li><b>toolEl</b> : Ext.Element<div class="sub-desc">The tool Element.</div></li>
- * <li><b>panel</b> : Ext.Panel<div class="sub-desc">The host Panel</div></li>
- * <li><b>tc</b> : Object<div class="sub-desc">The tool configuration object</div></li>
- * </ul></div></li>
- * <li><b>stopEvent</b> : Boolean<div class="sub-desc">Defaults to true. Specify as false to allow click event to propagate.</div></li>
- * <li><b>scope</b> : Object<div class="sub-desc">The scope in which to call the handler.</div></li>
- * <li><b>qtip</b> : String/Object<div class="sub-desc">A tip string, or
- * a config argument to {@link Ext.QuickTip#register}</div></li>
- * <li><b>hidden</b> : Boolean<div class="sub-desc">True to initially render hidden.</div></li>
- * <li><b>on</b> : Object<div class="sub-desc">A listener config object specifiying
- * event listeners in the format of an argument to {@link #addListener}</div></li>
- * </ul></div>
- * <p>Note that, apart from the toggle tool which is provided when a panel is collapsible, these
- * tools only provide the visual button. Any required functionality must be provided by adding
- * handlers that implement the necessary behavior.</p>
- * <p>Example usage:</p>
- * <pre><code>
-tools:[{
- id:'refresh',
- qtip: 'Refresh form Data',
- // hidden:true,
- handler: function(event, toolEl, panel){
- // refresh logic
- }
-},
-{
- id:'help',
- qtip: 'Get Help',
- handler: function(event, toolEl, panel){
- // whatever
- }
-}]
-</code></pre>
- * <p>For the custom id of <code>'help'</code> define two relevant css classes with a link to
- * a 15x15 image:</p>
- * <pre><code>
-.x-tool-help {background-image: url(images/help.png);}
-.x-tool-help-over {background-image: url(images/help_over.png);}
-// if using an image sprite:
-.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
-.x-tool-help-over {background-position:-15px 0;}
-</code></pre>
- */
- <div id="cfg-Ext.Panel-toolTemplate"></div>/**
- * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
- * <p>A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:</p><pre><code>
-new Ext.Template('<div class="x-tool x-tool-{id}">&#160;</div>')</code></pre>
- * <p>This may may be overridden to provide a custom DOM structure for tools based upon a more
- * complex XTemplate. The template's data is a single tool configuration object (Not the entire Array)
- * as specified in {@link #tools}. In the following example an <a> tag is used to provide a
- * visual indication when hovering over the tool:</p><pre><code>
-var win = new Ext.Window({
- tools: [{
- id: 'download',
- href: '/MyPdfDoc.pdf'
- }],
- toolTemplate: new Ext.XTemplate(
- '<tpl if="id==\'download\'">',
- '<a class="x-tool x-tool-pdf" href="{href}"></a>',
- '</tpl>',
- '<tpl if="id!=\'download\'">',
- '<div class="x-tool x-tool-{id}">&#160;</div>',
- '</tpl>'
- ),
- width:500,
- height:300,
- closeAction:'hide'
-});</code></pre>
- * <p>Note that the CSS class 'x-tool-pdf' should have an associated style rule which provides an
- * appropriate background image, something like:</p>
- <pre><code>
- a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
- </code></pre>
- */
- <div id="cfg-Ext.Panel-hideCollapseTool"></div>/**
- * @cfg {Boolean} hideCollapseTool
- * <code>true</code> to hide the expand/collapse toggle button when <code>{@link #collapsible} == true</code>,
- * <code>false</code> to display it (defaults to <code>false</code>).
- */
- <div id="cfg-Ext.Panel-titleCollapse"></div>/**
- * @cfg {Boolean} titleCollapse
- * <code>true</code> to allow expanding and collapsing the panel (when <code>{@link #collapsible} = true</code>)
- * by clicking anywhere in the header bar, <code>false</code>) to allow it only by clicking to tool button
- * (defaults to <code>false</code>)). If this panel is a child item of a border layout also see the
- * {@link Ext.layout.BorderLayout.Region BorderLayout.Region}
- * <code>{@link Ext.layout.BorderLayout.Region#floatable floatable}</code> config option.
- */
-
- <div id="cfg-Ext.Panel-floating"></div>/**
- * @cfg {Mixed} floating
- * <p>This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this
- * configuration property are:</p><div class="mdetail-params"><ul>
- * <li><b><code>false</code></b> : <b>Default.</b><div class="sub-desc">Display the panel inline where it is
- * rendered.</div></li>
- * <li><b><code>true</code></b> : <div class="sub-desc">Float the panel (absolute position it with automatic
- * shimming and shadow).<ul>
- * <div class="sub-desc">Setting floating to true will create an Ext.Layer for this panel and display the
- * panel at negative offsets so that it is hidden.</div>
- * <div class="sub-desc">Since the panel will be absolute positioned, the position must be set explicitly
- * <i>after</i> render (e.g., <code>myPanel.setPosition(100,100);</code>).</div>
- * <div class="sub-desc"><b>Note</b>: when floating a panel you should always assign a fixed width,
- * otherwise it will be auto width and will expand to fill to the right edge of the viewport.</div>
- * </ul></div></li>
- * <li><b><code>{@link Ext.Layer object}</code></b> : <div class="sub-desc">The specified object will be used
- * as the configuration object for the {@link Ext.Layer} that will be created.</div></li>
- * </ul></div>
- */
- <div id="cfg-Ext.Panel-shadow"></div>/**
- * @cfg {Boolean/String} shadow
- * <code>true</code> (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the
- * panel, <code>false</code> to display no shadow (defaults to <code>'sides'</code>). Note that this option
- * only applies when <code>{@link #floating} = true</code>.
- */
- <div id="cfg-Ext.Panel-shadowOffset"></div>/**
- * @cfg {Number} shadowOffset
- * The number of pixels to offset the shadow if displayed (defaults to <code>4</code>). Note that this
- * option only applies when <code>{@link #floating} = true</code>.
- */
- <div id="cfg-Ext.Panel-shim"></div>/**
- * @cfg {Boolean} shim
- * <code>false</code> to disable the iframe shim in browsers which need one (defaults to <code>true</code>).
- * Note that this option only applies when <code>{@link #floating} = true</code>.
- */
- <div id="cfg-Ext.Panel-keys"></div>/**
- * @cfg {Object/Array} keys
- * A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding}
- * used to assign custom key handling to this panel (defaults to <code>null</code>).
- */
- <div id="cfg-Ext.Panel-draggable"></div>/**
- * @cfg {Boolean/Object} draggable
- * <p><code>true</code> to enable dragging of this Panel (defaults to <code>false</code>).</p>
- * <p>For custom drag/drop implementations, an <b>Ext.Panel.DD</b> config could also be passed
- * in this config instead of <code>true</code>. Ext.Panel.DD is an internal, undocumented class which
- * moves a proxy Element around in place of the Panel's element, but provides no other behaviour
- * during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be
- * added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.:
- * <pre><code>
-new Ext.Panel({
- title: 'Drag me',
- x: 100,
- y: 100,
- renderTo: Ext.getBody(),
- floating: true,
- frame: true,
- width: 400,
- height: 200,
- draggable: {
-// Config option of Ext.Panel.DD class.
-// It's a floating Panel, so do not show a placeholder proxy in the original position.
- insertProxy: false,
-
-// Called for each mousemove event while dragging the DD object.
- onDrag : function(e){
-// Record the x,y position of the drag proxy so that we can
-// position the Panel at end of drag.
- var pel = this.proxy.getEl();
- this.x = pel.getLeft(true);
- this.y = pel.getTop(true);
-
-// Keep the Shadow aligned if there is one.
- var s = this.panel.getEl().shadow;
- if (s) {
- s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
- }
- },
-
-// Called on the mouseup event.
- endDrag : function(e){
- this.panel.setPosition(this.x, this.y);
- }
- }
-}).show();
-</code></pre>
- */
- <div id="cfg-Ext.Panel-disabled"></div>/**
- * @cfg {Boolean} disabled
- * Render this panel disabled (default is <code>false</code>). An important note when using the disabled
- * config on panels is that IE will often fail to initialize the disabled mask element correectly if
- * the panel's layout has not yet completed by the time the Panel is disabled during the render process.
- * If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize
- * the disabled state:
- * <pre><code>
-new Ext.Panel({
- ...
- listeners: {
- 'afterlayout': {
- fn: function(p){
- p.disable();
- },
- single: true // important, as many layouts can occur
- }
- }
-});
-</code></pre>
- */
- <div id="cfg-Ext.Panel-autoHeight"></div>/**
- * @cfg {Boolean} autoHeight
- * <code>true</code> to use height:'auto', <code>false</code> to use fixed height (defaults to <code>false</code>).
- * <b>Note</b>: Setting <code>autoHeight: true</code> means that the browser will manage the panel's height
- * based on its contents, and that Ext will not manage it at all. If the panel is within a layout that
- * manages dimensions (<code>fit</code>, <code>border</code>, etc.) then setting <code>autoHeight: true</code>
- * can cause issues with scrolling and will not generally work as expected since the panel will take
- * on the height of its contents rather than the height required by the Ext layout.
- */
-
-
- <div id="cfg-Ext.Panel-baseCls"></div>/**
- * @cfg {String} baseCls
- * The base CSS class to apply to this panel's element (defaults to <code>'x-panel'</code>).
- * <p>Another option available by default is to specify <code>'x-plain'</code> which strips all styling
- * except for required attributes for Ext layouts to function (e.g. overflow:hidden).
- * See <code>{@link #unstyled}</code> also.</p>
- */
- baseCls : 'x-panel',
- <div id="cfg-Ext.Panel-collapsedCls"></div>/**
- * @cfg {String} collapsedCls
- * A CSS class to add to the panel's element after it has been collapsed (defaults to
- * <code>'x-panel-collapsed'</code>).
- */
- collapsedCls : 'x-panel-collapsed',
- <div id="cfg-Ext.Panel-maskDisabled"></div>/**
- * @cfg {Boolean} maskDisabled
- * <code>true</code> to mask the panel when it is {@link #disabled}, <code>false</code> to not mask it (defaults
- * to <code>true</code>). Either way, the panel will always tell its contained elements to disable themselves
- * when it is disabled, but masking the panel can provide an additional visual cue that the panel is
- * disabled.
- */
- maskDisabled : true,
- <div id="cfg-Ext.Panel-animCollapse"></div>/**
- * @cfg {Boolean} animCollapse
- * <code>true</code> to animate the transition when the panel is collapsed, <code>false</code> to skip the
- * animation (defaults to <code>true</code> if the {@link Ext.Fx} class is available, otherwise <code>false</code>).
- */
- animCollapse : Ext.enableFx,
- <div id="cfg-Ext.Panel-headerAsText"></div>/**
- * @cfg {Boolean} headerAsText
- * <code>true</code> to display the panel <code>{@link #title}</code> in the <code>{@link #header}</code>,
- * <code>false</code> to hide it (defaults to <code>true</code>).
- */
- headerAsText : true,
- <div id="cfg-Ext.Panel-buttonAlign"></div>/**
- * @cfg {String} buttonAlign
- * The alignment of any {@link #buttons} added to this panel. Valid values are <code>'right'</code>,
- * <code>'left'</code> and <code>'center'</code> (defaults to <code>'right'</code>).
- */
- buttonAlign : 'right',
- <div id="cfg-Ext.Panel-collapsed"></div>/**
- * @cfg {Boolean} collapsed
- * <code>true</code> to render the panel collapsed, <code>false</code> to render it expanded (defaults to
- * <code>false</code>).
- */
- collapsed : false,
- <div id="cfg-Ext.Panel-collapseFirst"></div>/**
- * @cfg {Boolean} collapseFirst
- * <code>true</code> to make sure the collapse/expand toggle button always renders first (to the left of)
- * any other tools in the panel's title bar, <code>false</code> to render it last (defaults to <code>true</code>).
- */
- collapseFirst : true,
- <div id="cfg-Ext.Panel-minButtonWidth"></div>/**
- * @cfg {Number} minButtonWidth
- * Minimum width in pixels of all {@link #buttons} in this panel (defaults to <code>75</code>)