JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
表格GridPanel概述
ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。
下面通过一段代码给大家介绍sencha gridpanel 编辑单元,具体代码如下所示:
{ xtype: 'gridpanel', region: 'north', height: 150, title: 'My Grid Panel', store: 'A_Test_Store', columns: [ { xtype: 'gridcolumn', dataIndex: 'Name', text: 'Name', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', dataIndex: 'Content', text: 'Content' }, { xtype: 'gridcolumn', dataIndex: 'Time', text: 'Time' } ], plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1, //点击单元格编辑 listeners: { beforeedit: { fn: me.onCellEditingBeforeEdit, scope: me }, validateedit: { fn: me.onCellEditingValidateedit, scope: me } } }) ] } onCellEditingBeforeEdit: function(editor, e, eOpts) {//动态赋值用.正常情况下不需要该事件. e.record.data[e.field]= "my test"; e.value="my test"; e.record.commit(); //提交,不提交无效 } onCellEditingValidateedit: function(editor, e, eOpts) { if(e.row==1) //验证逻辑 { e.cancel=true; //取消 e.record.data[e.field] = e.value; } e.record.commit(); }
下面一段代码是关于sencha gridpanel改变单元格颜色
标题列包含 审核通过则绿色,包含拒绝为红色:
{ xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { metaData.tdAttr = 'data-qtip="'+record.data.Content+'"'; if(record.data.Content.indexOf('审核通过')!=-1) { metaData.style="color:green"; } else if(record.data.Content.indexOf('拒绝')!=-1) { metaData.style="color:red"; } return value; } , width: '*', dataIndex: 'Title', text: '标题' }
相关文章
js中forEach的用法之forEach与for之间的区别
这篇文章主要介绍了js中forEach的用法之forEach与for之间的区别,forEach() 调用数组的每个元素,并将元素传递给回调函数,下面更多详细介绍需要的小伙伴可以参考一下2022-03-03原生javascript+css3编写的3D魔方动画旋扭特效
这篇文章主要介绍了原生javascript+css3编写的3D魔方动画旋扭特效的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-03-03Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战,五子棋棋盘落子点对应的二维数组,具体的实现算法如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助2013-07-07
最新评论