Extjs中grid表格中去掉红三角

浏览数：22 / 时间：2015年06月09日

在编辑Extjs的gridpanel的时候，数据有错误或是修改在每个单元格上都会出现红色的小三角，在每个列上面可以配置allowBlank: false来标识这个不可以为空

有的时候在保存数据时如果不刷新页面也会留下红三角，那么在创建grid的时候，在grid里面加上下面的语句就不会再出现了：

viewConfig: {
　　markDirty: false
}

下面是grid的例子：

  1 var haomlTongjGeimjGrid = Ext.create(‘Ext.grid.Panel‘, {
  2         id: ‘haomlTongjGeimjGrid‘,
  3         name: ‘haomlTongjGeimjGrid‘,
  4         height: 100,
  5         store: haomlGeimjTongjGrid_store,
  6         header: false,
  7         columnLines : true, 
  8         selModel: selModelGeimjTongj, 
  9         autoScroll : true,
 10         selType: ‘cellmodel‘,
 11         plugins: [rowEditingGeimjTongj],
 12         viewConfig: {
 13             markDirty: false//隐藏红三角
 14         },
 15         columns: [{
 16             xtype: ‘gridcolumn‘,
 17             width: 150,
 18             dataIndex: ‘name‘,
 19             align: ‘center‘,
 20             header:‘<div style=" text-align: center; vertical-align: middle;">机组</div>‘,
 21             text: ‘机组‘
 22         }, {
 23             xtype: ‘numbercolumn‘,
 24             dataIndex: ‘gaokgl‘,
 25             align: ‘center‘,
 26             width: 150,
 27             text: ‘高卡高硫煤（吨）‘,
 28             header:‘<div style=" text-align: center; vertical-align: middle;">高卡高硫煤（吨）</div>‘,
 29             editor: {
 30                 xtype: ‘numberfield‘,
 31                 minValue : 0,
 32                 allowBlank: true
 33             }
 34         }, {
107             xtype: ‘actioncolumn‘,
108             align: ‘center‘,
109             width:30,
110             items: [{
111                 cls : "x-btn-text-icon",
112                 icon: ‘../images/extjs/application_edit.png‘,
113                 tooltip: ‘编辑‘,
114                 handler: function(haomlTongjGeimjGrid, rowIndex, colIndex) {
115                     var date = Ext.getCmp(‘statdate‘).getValue();
116                     var nowdate = new Date();
117                     var year = nowdate.getFullYear();
118                     var month = nowdate.getMonth();
119                     var day = nowdate.getDate();
120                     var currentdate = new Date(year, month, day);
121                     if(date >= currentdate){
122                         rowEditingGeimjTongj.startEdit(rowIndex, 0);
123                     }
124                 }
125             }]
126         }]
127     });

同时也在可以在grid的edit事件中重新刷新页面去掉，当执行success回调函数时可以刷新页面，如下：

 1 haomlTongjGeimjGrid.on(‘edit‘, function(editor, e, eOpts){
 2         var record = haomlGeimjTongjGrid_store.getModifiedRecords();
 3         var results = ‘[‘;
 4         for ( var i = 0; i < record.length; i++)// 将要修改的数据，转成JSON
 5         {
 6             if (i == record.length - 1)// 如果为最后一条数据增加大括号
 7             {
 8                 results = results + Ext.JSON.encode(record[i].data)+ ‘]‘;
 9             } else {
10                 results = results + Ext.JSON.encode(record[i].data)+ ‘,‘;
11             }
12         }  
13         if (results == ‘[‘) {
14             Ext.Msg.alert(‘提示信息:‘, ‘页面没有变动！‘);
15             return false;
16         }
17 
18         Ext.Ajax.request({
19             url : ‘saveDataOfGeimjTongj‘,
20             jsonData : results, 
21             params: {
22                 peimdwid: Ext.getCmp("mixcoalunit").getValue(),
23                 date: Ext.getCmp(‘statdate‘).getValue()
24             },
25             method : ‘POST‘,
26             success : function(response) { 
27                 haomlTongjGeimjGrid.getSelectionModel().clearSelections();
28                 
29                 //重新加载给煤机耗煤量统计信息，这里我已经注销掉了
30 //                haomlGeimjTongjGrid_store.load({
31 //                     params: {
32 //                         peimdwid: Ext.getCmp(‘mixcoalunit‘).getValue(),
33 //                         statdate: Ext.getCmp(‘statdate‘).getValue()
34 //                     }
35 //                 });
36                 
37                 var text = response.responseText;
38                 Ext.Msg.alert(‘提示信息：‘, text);
39             },
40             faliure: function (response) {
41                 if(response.status == 404){
42                     Ext.Msg.alert(‘提示信息‘, ‘运行错误！‘);
43                 }
44             }
45         });
46     });