ext.grid.gridpanel.html.svn-base

来自「PHP 知识管理系统（基于树结构的知识管理系统）, 英文原版的PHP源码。」· SVN-BASE 代码 · 共 881 行 · 第 1/5 页

        <div class="body-wrap">
        <div class="top-tools">
            <a class="inner-link" href="#Ext.grid.GridPanel-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
            <a class="inner-link" href="#Ext.grid.GridPanel-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
            <a class="inner-link" href="#Ext.grid.GridPanel-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
                            <a class="inner-link" href="#Ext.grid.GridPanel-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
                        <a class="bookmark" href="../docs/?class=Ext.grid.GridPanel"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
        </div>
                <div class="inheritance res-block">
<pre class="res-block-inner"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a>
  <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Component" ext:member="" href="output/Ext.Component.html">Component</a>
    <img src="resources/elbow-end.gif"/><a ext:cls="Ext.BoxComponent" ext:member="" href="output/Ext.BoxComponent.html">BoxComponent</a>
      <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Container" ext:member="" href="output/Ext.Container.html">Container</a>
        <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Panel" ext:member="" href="output/Ext.Panel.html">Panel</a>
          <img src="resources/elbow-end.gif"/>GridPanel</pre></div>
                <h1>Class Ext.grid.GridPanel</h1>
        <table cellspacing="0">
            <tr><td class="label">Package:</td><td class="hd-info">Ext.grid</td></tr>
            <tr><td class="label">Defined In:</td><td class="hd-info">GridPanel.js</td></tr>
            <tr><td class="label">Class:</td><td class="hd-info">GridPanel</td></tr>
                        <tr><td class="label">Subclasses:</td><td class="hd-info"><a ext:cls="Ext.grid.EditorGridPanel" href="output/Ext.grid.EditorGridPanel.html">EditorGridPanel</a></td></tr>
                                    <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.Panel" ext:member="" href="output/Ext.Panel.html">Panel</a></td></tr>
                    </table>
        <div class="description">
            This class represents the primary interface of a component based grid control.
<br><br>Usage:
<pre><code>var grid = <b>new</b> Ext.grid.GridPanel({
    store: <b>new</b> Ext.data.Store({
        reader: reader,
        data: xg.dummyData
    }),
    columns: [
        {id:<em>'company'</em>, header: <em>"Company"</em>, width: 200, sortable: true, dataIndex: <em>'company'</em>},
        {header: <em>"Price"</em>, width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: <em>'price'</em>},
        {header: <em>"Change"</em>, width: 120, sortable: true, dataIndex: <em>'change'</em>},
        {header: <em>"% Change"</em>, width: 120, sortable: true, dataIndex: <em>'pctChange'</em>},
        {header: <em>"Last Updated"</em>, width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer(<em>'m/d/Y'</em>), dataIndex: <em>'lastChange'</em>}
    ],
    viewConfig: {
        forceFit: true
    },
    sm: <b>new</b> Ext.grid.RowSelectionModel({singleSelect:true}),
    width:600,
    height:300,
    frame:true,
    title:<em>'Framed <b>with</b> Checkbox Selection and Horizontal Scrolling'</em>,
    iconCls:<em>'icon-grid'</em>
});</code></pre>
<b>Notes:</b> <br/>
- Although this class inherits many configuration options from base classes, some of them
(such as autoScroll, layout, items, etc) won't function as they do with the base Panel class.<br>
<br>
- A grid <b>requires</b> a width of some kind in order to calculate columns. That width can either be a normal width
set via the width: X config option or a width automatically set by using the grid in an Ext Layout.<br>
<br>
- To access the data in a Grid, it is necessary to use the data model encapsulated
by the <a ext:cls="Ext.grid.GridPanel" ext:member="store" href="output/Ext.grid.GridPanel.html#store">Store</a>. See the <a ext:cls="Ext.grid.GridPanel" ext:member="cellclick" href="output/Ext.grid.GridPanel.html#cellclick">cellclick</a> event.        </div>
        
        <div class="hr"></div>
                <a id="Ext.grid.GridPanel-configs"></a>
        <h2>Config Options</h2>
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Config Options</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="config-row inherited expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-animCollapse"></a>
            <b>animCollapse</b> : Boolean            <div class="mdesc">
                        <div class="short">True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....</div>
            <div class="long">
                True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the <a ext:cls="Ext.Fx" href="output/Ext.Fx.html">Ext.Fx</a> class is available, otherwise false).            </div>
                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Panel" ext:member="#animCollapse" href="output/Ext.Panel.html#animCollapse">Panel</a></td>
    </tr>
        <tr class="config-row alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-autoExpandColumn"></a>
            <b>autoExpandColumn</b> : String            <div class="mdesc">
                            The id of a column in this grid that should expand to fill unused space. This id can not be 0.                        </div>
        </td>
        <td class="msource">GridPanel</td>
    </tr>
        <tr class="config-row">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-autoExpandMax"></a>
            <b>autoExpandMax</b> : Number            <div class="mdesc">
                            The maximum width the autoExpandColumn can have (if enabled). Defaults to 1000.                        </div>
        </td>
        <td class="msource">GridPanel</td>
    </tr>
        <tr class="config-row alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-autoExpandMin"></a>
            <b>autoExpandMin</b> : Number            <div class="mdesc">
                            The minimum width the autoExpandColumn can have (if enabled). defaults to 50.                        </div>
        </td>
        <td class="msource">GridPanel</td>
    </tr>
        <tr class="config-row inherited expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-autoHeight"></a>
            <b>autoHeight</b> : Boolean            <div class="mdesc">
                        <div class="short">True to use height:'auto', false to use fixed height. Note: although many components inherit this config option, not ...</div>
            <div class="long">
                True to use height:'auto', false to use fixed height. Note: although many components inherit this config option, not all will function as expected with a height of 'auto'. (defaults to false).            </div>
                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.BoxComponent" ext:member="#autoHeight" href="output/Ext.BoxComponent.html#autoHeight">BoxComponent</a></td>
    </tr>
        <tr class="config-row inherited alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-autoShow"></a>
            <b>autoShow</b> : Boolean            <div class="mdesc">
                        <div class="short">True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...</div>
            <div class="long">
                True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render (defaults to false).            </div>
                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Component" ext:member="#autoShow" href="output/Ext.Component.html#autoShow">Component</a></td>
    </tr>
        <tr class="config-row inherited">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-baseCls"></a>
            <b>baseCls</b> : String            <div class="mdesc">
                            The base CSS class to apply to this panel's element (defaults to 'x-panel').                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Panel" ext:member="#baseCls" href="output/Ext.Panel.html#baseCls">Panel</a></td>
    </tr>
        <tr class="config-row inherited alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-bbar"></a>
            <b>bbar</b> : Object/Array            <div class="mdesc">
                        <div class="short">The bottom toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button co...</div>
            <div class="long">
                The bottom toolbar of the panel. This can be a <a ext:cls="Ext.Toolbar" href="output/Ext.Toolbar.html">Ext.Toolbar</a> object, a toolbar config, or an array of buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. To access the bottom toolbar after render, use <a ext:cls="Ext.Panel" ext:member="getBottomToolbar" href="output/Ext.Panel.html#getBottomToolbar">getBottomToolbar</a>.            </div>
                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Panel" ext:member="#bbar" href="output/Ext.Panel.html#bbar">Panel</a></td>
    </tr>
        <tr class="config-row inherited expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-border"></a>
            <b>border</b> : Boolean            <div class="mdesc">
                        <div class="short">True to display the borders of the panel's body element, false to hide them (defaults to true). By default, the borde...</div>
            <div class="long">
                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 <a ext:cls="Ext.Panel" ext:member="bodyBorder" href="output/Ext.Panel.html#bodyBorder">bodyBorder</a> to false.            </div>
                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Panel" ext:member="#border" href="output/Ext.Panel.html#border">Panel</a></td>
    </tr>
        <tr class="config-row inherited alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-buttonAlign"></a>
            <b>buttonAlign</b> : String            <div class="mdesc">
                            The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').                        </div>
        </td>
        <td class="msource"><a ext:cls="Ext.Panel" ext:member="#buttonAlign" href="output/Ext.Panel.html#buttonAlign">Panel</a></td>
    </tr>
        <tr class="config-row inherited">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.grid.GridPanel-buttons"></a>
            <b>buttons</b> : Array            <div class="mdesc">
                            An array of <a ext:cls="Ext.Button" href="output/Ext.Button.html">Ext.Button</a> <b>configs</b> used to add buttons to the footer of this panel.                        </div>