本文地址:[http://blog.csdn.net/sushengmiyan/article/details/39665979](http://blog.csdn.net/sushengmiyan/article/details/39665979)
官方文檔:[?http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.column.Date](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.column.Date)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each)
本文作者:[sushengmiyan](http://blog.csdn.net/sushengmiyan)
------------------------------------------------------------------------------------------------------------------------------------
在使用表格的時候,我們默認都是加載一些文本文字,可是偶爾我們還有個性化的需求,比如我想增加一個選擇框,或者我需要一個日期的輸入。那么這時候,就需要配置gridpanel的格式屬性了。
配置的時候遇到了這個錯誤:TypeError: headers[i].getCellWidth is not a function

我配置的代碼如下
~~~
Ext.create('Ext.grid.Panel',
{
frame: true,
columnLines: true, // 加上表格線
selType: 'cellmodel',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'label',
text: '使用日期:',
//glyph: 0xf016,
//handler: 'addRecord',
},{
xtype: 'datefield',
name: 'dateuse',
format: 'Y-m-d',
submitFormat: 'Y-m-d'
},{
text: '查看此段',
listeners: {
click: function() {
alert('I was clicked!');
},
}
}]
}],
renderTo: Ext.getBody(),
columns: [
{ text: '車輛', dataIndex: '車輛' },
{ text: '選擇', dataIndex: '選擇', xtype: 'checkbox'},//這個地方想配置選擇框
{ text: '星期一', dataIndex: '星期一' },
{ text: '星期二', dataIndex: '星期二' },
{ text: '星期三', dataIndex: '星期三' },
{ text: '星期四', dataIndex: '星期四' },
{ text: '星期五', dataIndex: '星期五' },
{ text: '星期六', dataIndex: '星期六' },
{ text: '星期日', dataIndex: '星期日' }
],
store: clxxStore
}).show();
~~~
在配置選擇框的地方我配置的xtype為checkbox就出錯了。原因是對于gridpanel中的這個屬性,有單獨的組件配置:

所以想配置check的話就需要找到這個的別名chekcolunm
Ok.就這樣解決問題了。
- 前言
- [EXtJS5學習筆記]第一節 Sencha Cmd 學習筆記 簡介 Sencha Cmd是什么
- [ExtJS5學習筆記]第二節 Sencha Cmd 學習筆記 使你的sencha cmd跑起來
- [ExtJS5學習筆記]第三節 sencha cmd學習筆記 生成應用程序構建的內部細節
- [ExtJS5學習筆記]第四節 歡迎來到extjs5-手把手教你實現你的第一個應用
- [ExtJS5學習筆記]第五節 使用fontawesome給你的extjs5應用增加字體圖標
- [ExtJS5學習筆記]第六節 Extjs的類系統Class System命名規則及定義和調試
- [ExtJS5學習筆記]第七節 Extjs5的組件components及其模板事件方法學習
- [ExtJS5學習筆記]第八節 Extjs5的Ext.toolbar.Toolbar工具條組件及其應用
- [ExtJS5學習筆記]第九節 Extjs5的mvc與mvvm框架結構簡介
- [ExtJS5學習筆記]第十節 Extjs5新增特性之ViewModel和DataBinding
- [ExtJS5學習筆記]第十一節 Extjs5MVVM模式下系統登錄實例
- [ExtJS5學習筆記]第十二節 Extjs5開發遇到的問題列表記錄
- [ExtJS5學習筆記]第十三節 Extjs5的Ext.each方法學習
- [ExtJS5學習筆記]第十四節 Extjs5中data數據源store和datapanel學習
- [ExtJS5學習筆記]第十五節 Extjs5表格顯示不友好?panel的frame屬性在作怪
- [ExtJS5學習筆記]第十六節 Extjs5使用panel新增的ViewModel屬性綁定數據
- [ExtJS5學習筆記]第十七節 Extjs5的panel組件增加accodion成為折疊導航欄
- [ExtJS5學習筆記]第十八節 Extjs5的panel的dockeditems屬性配置toolbar
- [ExtJS5學習筆記]第十九節 Extjs5中通過設置form.Panel的FieldSet集合屬性控制多個field集合
- [ExtJS5學習筆記]第二十節 Extjs5配合數組的push方法,動態創建并加載組件
- [ExtJS5學習筆記]第二十一節 Extjs5中使用config配置給ext.widget或者create方法傳遞參數
- [ExtJS5學習筆記]第二十二節 Extjs5中使用beforeLabelTpl配置給標簽增加必填選項星號標志
- [ExtJS5學習筆記]第二十三節 Extjs5中表格gridpanel的列格式設置
- [ExtJS5學習筆記]第二十四節 Extjs5中表格gridpanel或者表單數據后臺傳輸remoteFilter設置
- [ExtJS5學習筆記]第二十五節 利用window.open()函數實現ExtJS5的登陸頁面跳轉
- [EXTJS5學習筆記]第二十六節 在eclipse/myeclipse中使用sencha extjs的插件
- [ExtJS5學習筆記]第二十七節 CMD打包錯誤 Error C2009: YUI Parse Error (identifier is a reserved word => debugger;)
- [ExtJS5學習筆記]第二十八節 sencha ext js 5.1.0發布版本正式發布 extjs doc下載地址
- [ExtJS5學習筆記]第二十九節 sencha ext js 5.1.0中動態更換皮膚主題
- [ExtJS5學習筆記]第三十節 sencha extjs 5表格gridpanel分組匯總
- [ExtJS5學習筆記]第三十一節 sencha extjs 5使用cmd生成的工程部署到tomcat服務器
- [ExtJS5學習筆記]第三十二節 sencha extjs 5與struts2的ajax交互配置
- [ExtJS5學習筆記]第三十五節 sencha extjs 5 組件查詢方法總結