📄 ext.grid.columnmodel.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.ColumnModel-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.grid.ColumnModel-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.grid.ColumnModel-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.grid.ColumnModel-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.grid.ColumnModel"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class Ext.grid.ColumnModel</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"> ColumnModel.js </td> </tr> <tr> <td class="label"> Class: </td> <td class="hd-info"> Ext.grid.ColumnModel </td> </tr> <tr> <td class="label"> Extends: </td> <td class="hd-info"> Ext.util.Observable </td> </tr> </table> <div class="description"> Grid的列模型（ColumnModel）的默认实现。该类由列配置组成的数组初始化。
<br><br>
不同列的配置对象定义了头部字符串，配合<a href="###" onClick="alert('Ext.data.Record');">Ext.data.Record</a>字段列描述了数据的来源，
一个自定义数据格式的渲染函数，并允许通过和配置选项<a href="###" onClick="alert('#id');">#id</a>相同名称的CSS样式类来指定某列的样式。<br>
<br>用法：<br>
<pre><code>
var colModel = new Ext.grid.ColumnModel([
{header: "Ticker", width: 60, sortable: true},
{header: "Company Name", width: 150, sortable: true},
{header: "Market Cap.", width: 100, sortable: true},
{header: "$ Sales", width: 100, sortable: true, renderer: money},
{header: "Employees", width: 100, sortable: true, resizable: false}
]);
</code></pre>
<p>
该类列出的配置选项也适用于各个列的定义（column definition） </div> <div class="hr"> </div> <a id="Ext.grid.ColumnModel-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="id-header"></a> <b>id</b> : String <div class="mdesc"> <div class="short"> (optional) Defaults to the column's... </div> <div class="long"> (optional) Defaults to the column's initial ordinal position.
A name which identifies this column. The id is used to create a CSS class name which
is applied to all table cells (including headers) in that column. The class name
takes the form of <pre>x-grid3-td-<b>id</b></pre>
<br><br>
Header cells will also recieve this class name, but will also have the class <pr>x-grid3-hd</pre>,
so to target header cells, use CSS selectors such as:<pre>.x-grid3-hd.x-grid3-td-<b>id</b></pre>
The <a href="###" onClick="alert('Ext.grid.Grid#autoExpandColumn');">Ext.grid.Grid#autoExpandColumn</a> grid config option references the column
via this identifier.
</div> </div> </td> <td class="msource"> ColumnModel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="header-header"></a> <b>header</b> : String <div class="mdesc"> <div class="short"> 在Grid头部视图中显示的文字。
</div> <div class="long"> 在Grid头部视图中显示的文字。
</div> </div> </td> <td class="msource"> ColumnModel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="dataIndex-header"></a> <b>dataIndex</b> : String <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>里面的
<a href="###" onClick="alert('Ext.data.Record');">Ext.data.Record</a> ）中字段名称，字段的值用于展示列里面的值（column's value）。
如不指定，Record的数据列中的索引将作为列的索引。
</div> </div> </td> <td class="msource"> ColumnModel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="width-header"></a> <b>width</b> : Number <div class="mdesc"> <div class="short"> （可选的）列的初始宽度（像素）。如采用{@link Ext.grid.... </div> <div class="long"> （可选的）列的初始宽度（像素）。如采用{@link Ext.grid.Grid#autoSizeColumns} 性能较差。
</div> </div> </td> <td class="msource"> ColumnModel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="sortable-header"></a> <b>sortable</b> : Boolean <div class="mdesc"> <div class="short"> （可选的）True表示为可在该列上进行排列。默认为true
... </div> <div class="long"> （可选的）True表示为可在该列上进行排列。默认为true
由<a href="###" onClick="alert('Ext.data.Store#remoteSort');">Ext.data.Store#remoteSort</a>指定本地排序抑或是远程排序。
</div> </div> </td> <td class="msource"> ColumnModel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="locked-header"></a> <b>locked</b> : Boolean <div class="mdesc"> <div class="short"> （可选的）True表示当滚动grid时，锁定列在某个位置。默认为fal... </div> <div class="long"> （可选的）True表示当滚动grid时，锁定列在某个位置。默认为false。
</div> </div> </td> <td class="msource"> ColumnModel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="resizable-header"></a> <b>resizable</b> : Boolean <div class="mdesc"> <div class="short"> （可选的） False禁止列可变动大小。默认为true。
</div> <div class="long"> （可选的） False禁止列可变动大小。默认为true。
</div> </div> </td> <td class="msource"> ColumnModel </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="hidden-header"></a> <b>hidden</b> : Boolean <div class="mdesc"> <div class="short"> （可选的） True表示隐藏列，默认为false
</div> <div class="long"> （可选的） True表示隐藏列，默认为false
</div> </div> </td> <td class="msource"> ColumnModel </td> </tr> ⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -