• 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     });
  • 相关阅读:
    【小白建站笔记】从购买域名及服务器到备案成功:以阿里云为例
    jarvisoj-Evil Exe
    jarvisoj-软件密码破解-2(CFF_100_1)
    Jarvis OJ-superexpress
    JarvisOJ-[xman2019]xfz
    csictf-Esrever
    分解质因数
    矩阵乘法
    python获取一组数个位数之和
    python计算字母出现次数
  • 原文地址:https://www.cnblogs.com/smallrock/p/3656859.html
Copyright © 2020-2023  润新知