表格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: '标题'
}

标签:
sencha_gridpanel编辑,gridpanel

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。