📄 ext.grid.gridpanel.html
字号:
<!--Mock<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" /><link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/><link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>--><style type="text/css"> body { overflow: scroll; } /** .mdesc .long { display: block; } */</style><!-- End Mock--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><div class="body-wrap"> <div class="top-tools"> <a class="inner-link" href="#Ext.grid.GridPanel-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.grid.GridPanel-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.grid.GridPanel-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.grid.GridPanel-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.grid.GridPanel"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class Ext.grid.GridPanel</h1> <table cellspacing="0"> <!-- <tr> <td class="label"> Package: </td> <td class="hd-info"> </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"> Ext.grid.GridPanel </td> </tr> <tr> <td class="label"> Extends: </td> <td class="hd-info"> Ext.Panel </td> </tr> </table> <div class="description"> 基于Grid控件的一个面板组件，此类呈现了主要的接口。
<br><br>用法：
<pre><code>var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
columns: [
{id:'company', header: "Company", width: 200, sortable: true, dataIndex: 'company'},
{header: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 120, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width:600,
height:300,
frame:true,
title:'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls:'icon-grid'
});</code></pre>
<b>注意：</b>
尽管本类是由基类继承而得到的，但是不支持基类的某些功能，不能做到好像Panel类那样的方法，如autoScroll、layout、items等
<br>
<br>
要访问GRID中的数据，就必须通过由{@link #store Store}封装的数据模型。参与<a href="###" onClick="alert('#cellclick');">#cellclick</a>事件 </div> <div class="hr"> </div> <a id="Ext.grid.GridPanel-configs"></a> <h2>配置项</h2> <table cellspacing="0" class="member-table"> <tr> <th class="sig-header" colspan="2"> 配置项 </th> <th class="msource-header"> 定义者 </th> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="store-header"></a> <b>store</b> : Ext.data.Store <div class="mdesc"> <div class="short"> Grid应使用 Ext.data.Store 作为其数据源 (必须的).
</div> <div class="long"> Grid应使用 <a href="###" onClick="alert('Ext.data.Store');">Ext.data.Store</a> 作为其数据源 (必须的).
</div> </div> </td> <td class="msource"> GridPanel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="cm-header"></a> <b>cm</b> : Object <div class="mdesc"> <div class="short"> {@link #colModel}的简写方式
</div> <div class="long"> {@link #colModel}的简写方式
</div> </div> </td> <td class="msource"> GridPanel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="colModel-header"></a> <b>colModel</b> : Object <div class="mdesc"> <div class="short"> 渲染Grid所使用的 Ext.grid.ColumnModel (必须... </div> <div class="long"> 渲染Grid所使用的 <a href="###" onClick="alert('Ext.grid.ColumnModel');">Ext.grid.ColumnModel</a> (必须的).
</div> </div> </td> <td class="msource"> GridPanel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="sm-header"></a> <b>sm</b> : Object <div class="mdesc"> <div class="short"> {@link #selModel}的简写方式
</div> <div class="long"> {@link #selModel}的简写方式
</div> </div> </td> <td class="msource"> GridPanel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="selModel-header"></a> <b>selModel</b> : Object <div class="mdesc"> <div class="short"> AbstractSelectionModel 的子类，以为Grid提供... </div> <div class="long"> AbstractSelectionModel 的子类，以为Grid提供选区模型(selection model)
(默认为 <a href="###" onClick="alert('Ext.grid.RowSelectionModel');">Ext.grid.RowSelectionModel</a> 如不指定).
</div> </div> </td> <td class="msource"> GridPanel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="columns-header"></a> <b>columns</b> : Array <div class="mdesc"> <div class="short"> 自动创建列模型 (ColumnModel)的数组。
</div> <div class="long"> 自动创建列模型 (ColumnModel)的数组。
</div> </div> </td> <td class="msource"> GridPanel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="maxHeight-header"></a> <b>maxHeight</b> : Number <div class="mdesc"> <div class="short"> 设置Grid的最大高度 (若autoHeight关闭则忽略)。
</div> <div class="long"> 设置Grid的最大高度 (若autoHeight关闭则忽略)。
</div> </div> </td> <td class="msource"> GridPanel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="disableSelection-header"></a> <b>disableSelection</b> : Boolean <div class="mdesc"> <div class="short"> True表示为禁止grid的选区功能 (默认为 false). - 若... </div> <div class="long"> True表示为禁止grid的选区功能 (默认为 false). - 若指定了SelectionModel则忽略
</div>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -