实现EXT3中的grid单元格选中

最新推荐文章于 2019-08-02 14:11:08 发布

weixin_33724059

最新推荐文章于 2019-08-02 14:11:08 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/xiaohai945/blog/1358290

本文介绍如何让高版本的Chrome浏览器支持ExtJS表格中的文字选中功能，通过定义CSS样式及修改ExtJS表格配置实现该功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

支持高版本chrome浏览器：

1、定义样式

    .x-selectable, .x-selectable * {   
        user-select: text! important;  
        -o-user-select: text! important;  
        -moz-user-select: text! important;  
        -khtml-user-select: text! important;  
        -webkit-user-select: text! important;  
    }

2、应用单个表格

    grid = new Ext.grid.GridPanel({    
        viewConfig: {
        //-----start------       
        templates: {        
         cell: new Ext.Template(      
           '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id}   x-selectable {css}" style="{style}"   tabIndex="0" {cellAttr}>',     
           '<div class="x-grid3-cell-inner x-grid3-col-{id}"  {attr}>{value}</div>',    
           '</td>'    
            )    
         }
        //------end------
       },    
        
    ....})

3、设置表格默认属性

    if  (!Ext.grid.GridView.prototype.templates) {      
        Ext.grid.GridView.prototype.templates = {};      
    }      
    Ext.grid.GridView.prototype.templates.cell =  new  Ext.Template(      
         '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>' ,      
         '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>' ,      
         '</td>'      
    );

转载于:https://my.oschina.net/xiaohai945/blog/1358290