view release on metacpan or  search on metacpan

share/docs/source/Panel.html  view on Meta::CPAN

</div>

// frame = true (create 9 elements)
<div id="developer-specified-id-goes-here" class="x-panel">
    <div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc">
        <div class="x-panel-header"><span class="x-panel-header-text">Title: (frame:true)</span></div>
    </div></div></div>

    <div class="x-panel-bwrap">
        <div class="x-panel-ml"><div class="x-panel-mr"><div class="x-panel-mc">
            <div class="x-panel-body"><p>html value goes here</p></div>
        </div></div></div>

        <div class="x-panel-bl"><div class="x-panel-br"><div class="x-panel-bc"/>
        </div></div></div>
</div>
     * </code></pre>
     */
<span id='Ext-Panel-cfg-border'>    /**
</span>     * @cfg {Boolean} border
     * True to display the borders of the panel's body element, false to hide them (defaults to true).  By default,
     * the border is a 2px wide inset border, but this can be further altered by setting {@link #bodyBorder} to false.
     */
<span id='Ext-Panel-cfg-bodyBorder'>    /**
</span>     * @cfg {Boolean} bodyBorder
     * True to display an interior border on the body element of the panel, false to hide it (defaults to true).
     * This only applies when {@link #border} == true.  If border == true and bodyBorder == false, the border will display
     * as a 1px wide inset border, giving the entire body element an inset appearance.
     */
<span id='Ext-Panel-cfg-bodyCssClass'>    /**
</span>     * @cfg {String/Object/Function} bodyCssClass
     * Additional css class selector to be applied to the {@link #body} element in the format expected by
     * {@link Ext.Element#addClass} (defaults to null). See {@link #bodyCfg}.
     */
<span id='Ext-Panel-cfg-bodyStyle'>    /**
</span>     * @cfg {String/Object/Function} bodyStyle
     * Custom CSS styles to be applied to the {@link #body} element in the format expected by
     * {@link Ext.Element#applyStyles} (defaults to null). See {@link #bodyCfg}.
     */
<span id='Ext-Panel-cfg-iconCls'>    /**
</span>     * @cfg {String} iconCls
     * The CSS class selector that specifies a background image to be used as the header icon (defaults to '').
     * &lt;p&gt;An example of specifying a custom icon class would be something like:
     * &lt;/p&gt;&lt;pre&gt;&lt;code&gt;
// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// 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; }
&lt;/code&gt;&lt;/pre&gt;
     */
<span id='Ext-Panel-cfg-collapsible'>    /**
</span>     * @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).
     */
<span id='Ext-Panel-cfg-tools'>    /**
</span>     * @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 &lt;code&gt;&lt;b&gt;&lt;/b&gt;tools.&lt;i&gt;&amp;lt;tool-type&amp;gt;&lt;/i&gt;&lt;/code&gt;
     * &lt;p&gt;Each tool config may contain the following properties:
     * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;id&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;&lt;b&gt;Required.&lt;/b&gt; The type
     * of tool to create. By default, this assigns a CSS class of the form &lt;code&gt;x-tool-&lt;i&gt;&amp;lt;tool-type&amp;gt;&lt;/i&gt;&lt;/code&gt; 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:
     * &lt;ul&gt;
     * &lt;div class=&quot;x-tool x-tool-toggle&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; toggle&lt;/code&gt; (Created by default when {@link #collapsible} is &lt;code&gt;true&lt;/code&gt;)&lt;/div&gt...
     * &lt;div class=&quot;x-tool x-tool-close&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; close&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-minimize&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; minimize&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-maximize&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; maximize&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-restore&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; restore&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-gear&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; gear&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-pin&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; pin&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-unpin&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; unpin&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-right&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; right&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-left&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; left&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-up&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; up&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-down&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; down&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-refresh&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; refresh&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-minus&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; minus&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-plus&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; plus&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-help&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; help&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-search&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; search&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-save&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; save&lt;/code&gt;&lt;/div&gt;
     * &lt;div class=&quot;x-tool x-tool-print&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; print&lt;/code&gt;&lt;/div&gt;
     * &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;handler&lt;/b&gt; : Function&lt;div class=&quot;sub-desc&quot;&gt;&lt;b&gt;Required.&lt;/b&gt; The function to
     * call when clicked. Arguments passed are:&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;event&lt;/b&gt; : Ext.EventObject&lt;div class=&quot;sub-desc&quot;&gt;The click event.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;toolEl&lt;/b&gt; : Ext.Element&lt;div class=&quot;sub-desc&quot;&gt;The tool Element.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;panel&lt;/b&gt; : Ext.Panel&lt;div class=&quot;sub-desc&quot;&gt;The host Panel&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;tc&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;The tool configuration object&lt;/div&gt;&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;stopEvent&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;Defaults to true. Specify as false to allow click event to propagate.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;scope&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;The scope in which to call the handler.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;qtip&lt;/b&gt; : String/Object&lt;div class=&quot;sub-desc&quot;&gt;A tip string, or
     * a config argument to {@link Ext.QuickTip#register}&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;hidden&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to initially render hidden.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;on&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;A listener config object specifiying
     * event listeners in the format of an argument to {@link #addListener}&lt;/div&gt;&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * &lt;p&gt;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.&lt;/p&gt;
     * &lt;p&gt;Example usage:&lt;/p&gt;
     * &lt;pre&gt;&lt;code&gt;
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