zoukankan      html  css  js  c++  java
  • Extjs之rowEditing编辑状态时列不对齐

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

    未编辑前:

    双击处于编辑状态:

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

    源码:

      1 var haomglGeimjGrid = Ext.create('Ext.grid.Panel', {
      2         id: 'haomglGeimjGrid',
      3         name: 'haomglGeimjGrid',
      4          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              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                  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                  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                      80,
     44                     allowBlank : true,
     45                     minValue : 0
     46                 }
     47             }, {
     48                 xtype: 'numbercolumn',
     49                 dataIndex: 'geimj_7_b',
     50                 align: 'center',
     51                  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                      80,
     58                     allowBlank : true,
     59                     minValue : 0
     60                 }
     61             }, {
     62                 xtype: 'numbercolumn',
     63                 dataIndex: 'geimj_7_c',
     64                 align: 'center',
     65                  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                      80,
     72                     allowBlank : true,
     73                     minValue : 0
     74                 }
     75             }, {
     76                 xtype: 'numbercolumn',
     77                 dataIndex: 'geimj_7_d',
     78                 align: 'center',
     79                  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                      80,
     86                     allowBlank : true,
     87                     minValue : 0
     88                 }
     89             }, {
     90                 xtype: 'numbercolumn',
     91                 dataIndex: 'geimj_7_e',
     92                 align: 'center',
     93                  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                      80,
    100                     allowBlank : true,
    101                     minValue : 0
    102                 }
    103             }, {
    104                 xtype: 'numbercolumn',
    105                 dataIndex: 'geimj_7_f',
    106                 align: 'center',
    107                  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                      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                  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                      80,
    133                     allowBlank : true,
    134                     minValue : 0
    135                 }
    136             }, {
    137                 xtype: 'numbercolumn',
    138                 dataIndex: 'geimj_8_b',
    139                 align: 'center',
    140                  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                      80,
    147                     allowBlank : true,
    148                     minValue : 0
    149                 }
    150             }, {
    151                 xtype: 'numbercolumn',
    152                 dataIndex: 'geimj_8_c',
    153                 align: 'center',
    154                  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                      80,
    161                     allowBlank : true,
    162                     minValue : 0
    163                 }
    164             }, {
    165                 xtype: 'numbercolumn',
    166                 dataIndex: 'geimj_8_d',
    167                 align: 'center',
    168                  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                      80,
    175                     allowBlank : true,
    176                     minValue : 0
    177                 }
    178             }, {
    179                 xtype: 'numbercolumn',
    180                 dataIndex: 'geimj_8_e',
    181                 align: 'center',
    182                  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                      80,
    189                     allowBlank : true,
    190                     minValue : 0
    191                 }
    192             }, {
    193                 xtype: 'numbercolumn',
    194                 dataIndex: 'geimj_8_f',
    195                 align: 'center',
    196                  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                      80,
    203                     allowBlank : true,
    204                     minValue : 0
    205                 }
    206             }]
    207         }, {
    208             xtype: 'actioncolumn',
    209             align: 'center',
    210             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     });
  • 相关阅读:
    Codechef EDGEST 树套树 树状数组 线段树 LCA 卡常
    BZOJ4319 cerc2008 Suffix reconstruction 字符串 SA
    Codechef STMINCUT S-T Mincut (CodeChef May Challenge 2018) kruskal
    Codeforces 316G3 Good Substrings 字符串 SAM
    Codechef CHSIGN Change the Signs(May Challenge 2018) 动态规划
    BZOJ1396 识别子串 字符串 SAM 线段树
    CodeForces 516C Drazil and Park 线段树
    CodeForces 516B Drazil and Tiles 其他
    CodeForces 516A Drazil and Factorial 动态规划
    SPOJ LCS2
  • 原文地址:https://www.cnblogs.com/smallrock/p/3656859.html
Copyright © 2011-2022 走看看