[ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置

简介:

官方文档: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.column.Date

本文作者: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.就这样解决问题了。


相关文章
|
前端开发
web前端学习(十八)——CSS3表格属性(table)的相关设置
web前端学习(十八)——CSS3表格属性(table)的相关设置
web前端学习(十八)——CSS3表格属性(table)的相关设置
|
机器学习/深度学习 人工智能 前端开发
web前端学习(十七)——CSS3列表属性(list-style)的相关设置
web前端学习(十七)——CSS3列表属性(list-style)的相关设置
web前端学习(十七)——CSS3列表属性(list-style)的相关设置
|
JavaScript 前端开发 数据格式
ExtJS 6 gridPanel绘制表格并填充数据的例子
Ext.grid.Panel 是表格,可以显示数据,我们来看看它的基本用法:View + Store + Model使用上述三个“部分”就可以完整的,最简易的在Ext的世界中绘制一个用于显示数据库中数据的UI View部分的代码 Ext.
3068 0
|
JSON 缓存 前端开发
从零开始学_JavaScript_系列(十)——dojo(3)(GRID表格创建、样式、列宽可变、排序、过滤器)
如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo。(当然,本篇也考虑了未使用过dojo的人,可以只阅读该链接关于dojo下载的部分,以获得dojo) 关于dojo的下载,请查看: https://dojotoolkit.org/download/
1931 0
|
JavaScript 数据格式 前端开发
ExtJS学习(三)Grid表格
表格说明 Ext中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
1124 0
EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
// 获取选中一行的情况,下面的一个参数可以代表一个DataGridfunction getSelected(dialogEle,dataFileTextEle) { // 获取选中一行的情况。 var datagrid = $("#fileInfoDataGrid").datagrid('getSelected'); if (datagrid == null) { $.messager.a
1891 0
|
JavaScript 前端开发
easyui datagrid 表格组件列属性formatter和styler使用方法
 明确单元格DOM结构 要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格的结构有所区别。我们所有内容单元格的默认DOM结构如下: ? 1 2 3 4 5 <td field="code">     
1856 0
|
JavaScript 前端开发 知识图谱
[ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将grid表格导出到excel,使用的是前端导出,不涉及后端。
1440 0