Extjs之rowEditing编辑状态时列不对齐
浏览数：29 /
时间：2015年06月09日
Extjs在使用rowEditing的时候，会在每一列加上editor属性，表示当处于编辑状态时这一列的值是什么类型的，后突然发现在rowEditing处于编辑状态时每一列的宽度边框了，如果列数非常多的话会出现列向后推，知道最后一列被隐藏或是看不到，当然通过tan键是可以到最后的，但是处于编辑状态的列与上面的列名不相互对应了，出现了列不齐的状况，如下图：
未编辑前：
双击处于编辑状态：
很明显的看到每一列都不对应了，解决这个问题的办法就是在每一列的editor属性上面加上maxWidth这个配置，加上之后效果如下：
源码：
1 var haomglGeimjGrid = Ext.create(‘Ext.grid.Panel‘, { 2 id: ‘haomglGeimjGrid‘, 3 name: ‘haomglGeimjGrid‘, 4 width: panelWidth, 5 height: 120, 6 store: haomglGeimjGrid_store, 7 header: false, 8 columnLines : true, 9 selModel: selModelGeimj, 10 autoScroll : true, 11 selType: ‘cellmodel‘, 12 plugins: [rowEditingGeimj], 13 columns: [{ 14 xtype: ‘gridcolumn‘, 15 dataIndex: ‘name‘, 16 width: 100, 17 align: ‘center‘, 18 header:‘<div style=" text-align: center; vertical-align: middle;">给煤机</div>‘, 19 text: ‘String‘, 20 emptyCellText: ‘耗煤量（吨）‘, 21 editor: { 22 xtype: ‘textfield‘, 23 maxWidth: 90, 24 width: 90, 25 readOnly: true, 26 value: ‘耗煤量（吨）‘, 27 emptyText: ‘耗煤量（吨）‘ 28 } 29 }, { 30 xtype: ‘gridcolumn‘, 31 text: ‘#7号机组‘, 32 header:‘<div style=" text-align: center; vertical-align: middle;">#7号机组</div>‘, 33 columns: [{ 34 xtype: ‘numbercolumn‘, 35 dataIndex: ‘geimj_7_a‘, 36 align: ‘center‘, 37 width: 85, 38 header:‘<div style=" text-align: center; vertical-align: middle;">A</div>‘, 39 text: ‘A‘, 40 editor : { 41 xtype : ‘numberfield‘, 42 maxWidth: 80, 43 width: 80, 44 allowBlank : true, 45 minValue : 0 46 } 47 }, { 48 xtype: ‘numbercolumn‘, 49 dataIndex: ‘geimj_7_b‘, 50 align: ‘center‘, 51 width: 85, 52 header:‘<div style=" text-align: center; vertical-align: middle;">B</div>‘, 53 text: ‘B‘, 54 editor : { 55 xtype : ‘numberfield‘, 56 maxWidth: 80, 57 width: 80, 58 allowBlank : true, 59 minValue : 0 60 } 61 }, { 62 xtype: ‘numbercolumn‘, 63 dataIndex: ‘geimj_7_c‘, 64 align: ‘center‘, 65 width: 85, 66 header:‘<div style=" text-align: center; vertical-align: middle;">C</div>‘, 67 text: ‘C‘, 68 editor : { 69 xtype : ‘numberfield‘, 70 maxWidth: 80, 71 width: 80, 72 allowBlank : true, 73 minValue : 0 74 } 75 }, { 76 xtype: ‘numbercolumn‘, 77 dataIndex: ‘geimj_7_d‘, 78 align: ‘center‘, 79 width: 85, 80 header:‘<div style=" text-align: center; vertical-align: middle;">D</div>‘, 81 text: ‘D‘, 82 editor : { 83 xtype : ‘numberfield‘, 84 maxWidth: 80, 85 width: 80, 86 allowBlank : true, 87 minValue : 0 88 } 89 }, { 90 xtype: ‘numbercolumn‘, 91 dataIndex: ‘geimj_7_e‘, 92 align: ‘center‘, 93 width: 85, 94 header:‘<div style=" text-align: center; vertical-align: middle;">E</div>‘, 95 text: ‘E‘, 96 editor : { 97 xtype : ‘numberfield‘, 98 maxWidth: 80, 99 width: 80, 100 allowBlank : true, 101 minValue : 0 102 } 103 }, { 104 xtype: ‘numbercolumn‘, 105 dataIndex: ‘geimj_7_f‘, 106 align: ‘center‘, 107 width: 85, 108 header:‘<div style=" text-align: center; vertical-align: middle;">F</div>‘, 109 text: ‘F‘, 110 editor : { 111 xtype : ‘numberfield‘, 112 maxWidth: 80, 113 width: 80, 114 allowBlank : true, 115 minValue : 0 116 } 117 }] 118 }, { 119 xtype: ‘gridcolumn‘, 120 text: ‘#8号机组‘, 121 header:‘<div style=" text-align: center; vertical-align: middle;">#8号机组</div>‘, 122 columns: [{ 123 xtype: ‘numbercolumn‘, 124 dataIndex: ‘geimj_8_a‘, 125 align: ‘center‘, 126 width: 85, 127 header:‘<div style=" text-align: center; vertical-align: middle;">A</div>‘, 128 text: ‘A‘, 129 editor : { 130 xtype : ‘numberfield‘, 131 maxWidth: 80, 132 width: 80, 133 allowBlank : true, 134 minValue : 0 135 } 136 }, { 137 xtype: ‘numbercolumn‘, 138 dataIndex: ‘geimj_8_b‘, 139 align: ‘center‘, 140 width: 85, 141 header:‘<div style=" text-align: center; vertical-align: middle;">B</div>‘, 142 text: ‘B‘, 143 editor : { 144 xtype : ‘numberfield‘, 145 maxWidth: 80, 146 width: 80, 147 allowBlank : true, 148 minValue : 0 149 } 150 }, { 151 xtype: ‘numbercolumn‘, 152 dataIndex: ‘geimj_8_c‘, 153 align: ‘center‘, 154 width: 85, 155 header:‘<div style=" text-align: center; vertical-align: middle;">C</div>‘, 156 text: ‘C‘, 157 editor : { 158 xtype : ‘numberfield‘, 159 maxWidth: 80, 160 width: 80, 161 allowBlank : true, 162 minValue : 0 163 } 164 }, { 165 xtype: ‘numbercolumn‘, 166 dataIndex: ‘geimj_8_d‘, 167 align: ‘center‘, 168 width: 85, 169 header:‘<div style=" text-align: center; vertical-align: middle;">D</div>‘, 170 text: ‘D‘, 171 editor : { 172 xtype : ‘numberfield‘, 173 maxWidth: 80, 174 width: 80, 175 allowBlank : true, 176 minValue : 0 177 } 178 }, { 179 xtype: ‘numbercolumn‘, 180 dataIndex: ‘geimj_8_e‘, 181 align: ‘center‘, 182 width: 85, 183 header:‘<div style=" text-align: center; vertical-align: middle;">E</div>‘, 184 text: ‘E‘, 185 editor : { 186 xtype : ‘numberfield‘, 187 maxWidth: 80, 188 width: 80, 189 allowBlank : true, 190 minValue : 0 191 } 192 }, { 193 xtype: ‘numbercolumn‘, 194 dataIndex: ‘geimj_8_f‘, 195 align: ‘center‘, 196 width: 85, 197 header:‘<div style=" text-align: center; vertical-align: middle;">F</div>‘, 198 text: ‘F‘, 199 editor : { 200 xtype : ‘numberfield‘, 201 maxWidth: 80, 202 width: 80, 203 allowBlank : true, 204 minValue : 0 205 } 206 }] 207 }, { 208 xtype: ‘actioncolumn‘, 209 align: ‘center‘, 210 width:30, 211 items: [{ 212 cls : "x-btn-text-icon", 213 icon: ‘../images/extjs/application_edit.png‘, 214 tooltip: ‘编辑‘, 215 handler: function(haomgl_grid, rowIndex, colIndex) { 216 var date = Ext.getCmp(‘statdate‘).getValue(); 217 var nowdate = new Date(); 218 var year = nowdate.getFullYear(); 219 var month = nowdate.getMonth(); 220 var day = nowdate.getDate(); 221 var currentdate = new Date(year, month, day); 222 if(date >= currentdate){ 223 rowEditingGeimj.startEdit(rowIndex, 0); 224 } 225 } 226 }] 227 }] 228 });
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
