view release on metacpan or  search on metacpan

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

     * <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&gt...
     * <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>
     */
<span id='Ext-Panel-cfg-toolTemplate'>    /**
</span>     * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
     * &lt;p&gt;A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
new Ext.Template('&amp;lt;div class=&quot;x-tool x-tool-{id}&quot;&gt;&amp;amp;#160;&amp;lt;/div&gt;')&lt;/code&gt;&lt;/pre&gt;
     * &lt;p&gt;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 &amp;lt;a&gt; tag is used to provide a
     * visual indication when hovering over the tool:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
var win = new Ext.Window({
    tools: [{
        id: 'download',
        href: '/MyPdfDoc.pdf'
    }],
    toolTemplate: new Ext.XTemplate(
        '&amp;lt;tpl if=&quot;id==\'download\'&quot;&gt;',
            '&amp;lt;a class=&quot;x-tool x-tool-pdf&quot; href=&quot;{href}&quot;&gt;&amp;lt;/a&gt;',
        '&amp;lt;/tpl&gt;',
        '&amp;lt;tpl if=&quot;id!=\'download\'&quot;&gt;',
            '&amp;lt;div class=&quot;x-tool x-tool-{id}&quot;&gt;&amp;amp;#160;&amp;lt;/div&gt;',
        '&amp;lt;/tpl&gt;'
    ),
    width:500,
    height:300,
    closeAction:'hide'
});&lt;/code&gt;&lt;/pre&gt;
     * &lt;p&gt;Note that the CSS class 'x-tool-pdf' should have an associated style rule which provides an
     * appropriate background image, something like:&lt;/p&gt;
    &lt;pre&gt;&lt;code&gt;
    a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
    &lt;/code&gt;&lt;/pre&gt;
     */
<span id='Ext-Panel-cfg-hideCollapseTool'>    /**
</span>     * @cfg {Boolean} hideCollapseTool
     * &lt;code&gt;true&lt;/code&gt; to hide the expand/collapse toggle button when &lt;code&gt;{@link #collapsible} == true&lt;/code&gt;,
     * &lt;code&gt;false&lt;/code&gt; to display it (defaults to &lt;code&gt;false&lt;/code&gt;).
     */
<span id='Ext-Panel-cfg-titleCollapse'>    /**
</span>     * @cfg {Boolean} titleCollapse
     * &lt;code&gt;true&lt;/code&gt; to allow expanding and collapsing the panel (when &lt;code&gt;{@link #collapsible} = true&lt;/code&gt;)
     * by clicking anywhere in the header bar, &lt;code&gt;false&lt;/code&gt;) to allow it only by clicking to tool button
     * (defaults to &lt;code&gt;false&lt;/code&gt;)). If this panel is a child item of a border layout also see the
     * {@link Ext.layout.BorderLayout.Region BorderLayout.Region}
     * &lt;code&gt;{@link Ext.layout.BorderLayout.Region#floatable floatable}&lt;/code&gt; config option.
     */

<span id='Ext-Panel-cfg-floating'>    /**
</span>     * @cfg {Mixed} floating
     * &lt;p&gt;This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this
     * configuration property are:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;&lt;code&gt;false&lt;/code&gt;&lt;/b&gt; : &lt;b&gt;Default.&lt;/b&gt;&lt;div class=&quot;sub-desc&quot;&gt;Display the panel inline where it is
     * rendered.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;&lt;code&gt;true&lt;/code&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;Float the panel (absolute position it with automatic
     * shimming and shadow).&lt;ul&gt;
     * &lt;div class=&quot;sub-desc&quot;&gt;Setting floating to true will create an Ext.Layer for this panel and display the
     * panel at negative offsets so that it is hidden.&lt;/div&gt;
     * &lt;div class=&quot;sub-desc&quot;&gt;Since the panel will be absolute positioned, the position must be set explicitly
     * &lt;i&gt;after&lt;/i&gt; render (e.g., &lt;code&gt;myPanel.setPosition(100,100);&lt;/code&gt;).&lt;/div&gt;