Extjs之rowEditing编辑状态时列不对齐

Extjs在使用rowEditing的时候,会在每一列加上editor属性,表示当处于编辑状态时这一列的值是什么类型的,后突然发现在rowEditing处于编辑状态时每一列的宽度边框了,如果列数非常多的话会出现列向后推,知道最后一列被隐藏或是看不到,当然通过tan键是可以到最后的,但是处于编辑状态的列与上面的列名不相互对应了,出现了列不齐的状况,如下图:

未编辑前:

Extjs之rowEditing编辑状态时列不对齐

双击处于编辑状态:

Extjs之rowEditing编辑状态时列不对齐

很明显的看到每一列都不对应了,解决这个问题的办法就是在每一列的editor属性上面加上maxWidth这个配置,加上之后效果如下:

Extjs之rowEditing编辑状态时列不对齐

源码:

Extjs之rowEditing编辑状态时列不对齐
  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     });
Extjs之rowEditing编辑状态时列不对齐

 

Extjs之rowEditing编辑状态时列不对齐,布布扣,bubuko.com

Extjs之rowEditing编辑状态时列不对齐

上一篇:JQuery 模糊匹配


下一篇:IIS 部署网站--浏览--“该页无法显示”