`
fordream
  • 浏览: 63399 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext GridPanel单元格选中复制和浮动提示

阅读更多
/**
 * @class Ext.grid.GridView
 * @override Ext.grid.GridView GridView单元格不能选中复制问题,增加title浮动提示信息
 */
Ext.override(Ext.grid.GridView, {
       initTemplates : function() {
            var ts = this.templates || {};
            if(!ts.master){
                 ts.master = new Ext.Template(
                    '<div class="x-grid3" hidefocus="true">',
                    '<div class="x-grid3-viewport">',
                    '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
                    '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
                    '</div>',
                    '<div class="x-grid3-resize-marker">&#160;</div>',
                    '<div class="x-grid3-resize-proxy">&#160;</div>','</div>');
            }

            if(!ts.header){
                ts.header = new Ext.Template(
                   '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
                   '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
                   '</table>');
            }

            if(!ts.hcell){
                ts.hcell = new Ext.Template(
                   '<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id} {css}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">',
                   this.grid.enableHdMenu
                              ? : '<a class="x-grid3-hd-btn" href="#"></a>'
                                 : ' ',
                   '{value}<img class="x-grid3-sort-icon" src="',
                   Ext.BLANK_IMAGE_URL,  '" />','</div></td>');
            }

            if(!ts.body){
               ts.body = new Ext.Template('{rows}');
            }

            if(!ts.row){
               ts.row = new Ext.Template(
                             '<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}"',
                             '<tbody><tr>{cells}</tr>',
                             (this.enableRowBody
                                         ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body>"{body}</div></td></tr>'
                                          : ' '), '</tbody></table></div>');
            }

            if(!ts.cell){
                ts.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}" title="{tip}" {attr}>{value}</div>',
                  '</td>');
            }

            for(var k in ts){
                 var t = ts[k];
                 if(t && typeof t.compile == 'function' && !t.compiled){
                    t.disableFormats = true;
                    t.compile();
                 }
            }

             this.templates = ts;
             this.colRe = new RegExp("x-grid3-td-([^\\s]+)", "");
       },
       //private
       doRender : function(cs, rs, ds, startRow, colCount, stripe){
               var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount - 1;
               var tstyle = 'width:' + this.getTotalWidth() + ';';
               //buffers
               var buf = [], cb, c, p = {}, rp = {
                     tstyle : tstyle
               }, r;
               for (var j = 0, len = rs.length; j < len; j++) {
                     r = rs[j];
                     cb = [];
                     var rowIndex = (j + startRow);
                     for (var i = 0; i < colCount; i++) {
                           c = cs[i];
                           p.id = c.id;
                           p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last
                                       ? 'x-grid3-cell-last '
                                       : ' ');
                           p.attr = p.cellAttr = "";
                           p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
                           p.style = c.style;
                           if(p.value == undefined || p.value === ""){
                              p.value = "&#160;";
                           }else{
                              p.tip = new String(p.value).replace(/<\/?.+?>/g, "");
                           }
                           if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
                              p.css += ' x-grid3-dirty-cell';
                           }
                           
                           cb[cb.length] = ct.apply(p);
                     }
                     var alt = [];
                     if (stripe && ((rowIndex + 1) % 2 == 0)) {
                         alt[0] = "x-grid3-row-alt";
                     }
                     if (r.dirty) {
                         alt[1] = "x-grid3-dirty-row";
                     }
                     rp.cols = colCount;
                     if (this.getRowClass) {
                         alt[2] = this.getRowClass(r, rowIndex, rp, ds);
                     }
                     rp.alt = alt.join(" ");
                     rp.cells = cb.join("");
                     buf[buf.length] = rt.apply(rp);
               }
               return buf.join("");
       }
});

 

 

分享到:
评论

相关推荐

    extjs单元格无法复制

    ExtJS GridPanel 单元格无法复制问题解决方案 ExtJS 是一个功能强大的 JavaScript 框架,广泛应用于 Web 开发中。...通过这些步骤,我们可以使得单元格的内容可以被选中和复制,从而提高用户体验。

    EXT GridPanel获取某一单元格的值

    在EXT GridPanel中,获取某一单元格的值是常见的操作,特别是在实现自定义事件处理或数据验证时。 在提供的代码段中,我们看到一个监听`cellclick`事件的例子,这是EXT GridPanel中用于捕获用户点击单元格时的事件...

    GridPanel中的单元格不能选中复制的解决方法

    用户可以选中和复制单元格的内容,提高了用户体验。 解决Ext.grid.GridPanel中的单元格不能选中复制的问题需要从两个方面入手:添加新的CSS样式和修改Ext.grid.GridPanel的protoType。这些解决方案可以帮助开发者...

    Ext GridPanel 中实现加链接操作

    ### Ext GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行的 JavaScript 框架,用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍...

    ext gridpanel 跨行

    "ext gridpanel 跨行"这个主题主要涉及到在GridPanel中实现单元格或行的跨行显示,这在展示复杂数据或需要组合信息时非常有用。 首先,让我们深入理解什么是GridPanel。在Ext JS中,GridPanel是一个表格视图,它...

    Ext GridPanel导出Excel(改进)

    将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...

    ext表格合并单元格的方法

    Ext JS提供了强大的表格组件GridPanel,但默认情况下并未直接支持数据单元格的合并功能。本文将详细介绍一种在Ext JS中实现数据单元格合并的方法,并通过示例代码来帮助开发者更好地理解和应用这一技术。 #### CSS...

    Ext实现GridPanel内嵌行内嵌表格(RowExpander)

    在本文中,我们将深入探讨如何使用ExtJS库中的RowExpander插件来实现在GridPanel中内嵌行内的表格。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。RowExpander插件是...

    Ext的gridpanel控件二次加载问题

    2. 在需要时动态加载和卸载GridPanel,通过Ext JS的容器系统实现。 3. 如果数据更新频繁,可以考虑使用Store的buffered rendering特性,减少内存占用和渲染压力。 4. 对于复杂的配置,可以将它们分离到单独的配置...

    ext.net 动态创建gridpanel

    总的来说,`newtpanel.aspx` 和 `newtpanel.aspx.cs` 文件展示了如何利用Ext.NET在服务器端和客户端代码中动态创建和管理GridPanel,以及如何将它们集成到各种窗口容器中,以实现灵活的数据展示和交互。这是一项关键...

    Ext GridPanel加载完数据后进行操作示例代码

    在Ext JS中,`Ext GridPanel`是一种常用的组件,用于展示和操作表格数据。它具有丰富的功能,包括分页、排序、筛选等。本示例主要关注在`GridPanel`加载完数据后如何进行特定的操作,特别是选定某些行数据。 首先,...

    EXTJSEXT实例GridPanel.

    EXTJS提供了丰富的API和配置选项,使得开发者能够灵活地定制GridPanel的行为和外观。在实际项目中,你可能还需要关注性能优化,比如使用buffered rendering来提高大数据量时的渲染速度。 这个"EXTJSEXT实例...

    Ext.grid.GridPanel 删除线

    Ext.grid.GridPanel 删除线 放到example文件夹下运行

    Ext.net实现GridPanel拖动行、上移下移排序功能DEMO

    对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...

    Ext.grid.GridPanel属性祥解

    综上所述,`Ext.grid.GridPanel`提供了非常全面且强大的功能,使得开发者能够根据实际需求灵活定制表格的样式和交互。通过深入了解这些配置选项和方法,可以更高效地利用ExtJS框架实现复杂的前端表格功能。

    ext gridpanel多层表头分组小计导出excel与Java后台交互全代码

    该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。

    ext.net gridpanel 弹出窗

    ext.net gridpanel 弹出窗

    Ext修改GridPanel数据和字体颜色、css属性等

    总之,通过Ext JS提供的API,我们可以轻松地对GridPanel的数据和样式进行定制,以实现各种复杂的界面效果。无论是修改数据,还是调整字体颜色或应用CSS属性,都可以通过灵活的编程方式实现。在实际项目中,结合业务...

    ext form gridpanel

    "Ext Form GridPanel"是Ext JS库中的一个重要组件,它结合了表格(Grid)和表单(Form)的功能,提供了一种强大而灵活的方式来显示和编辑数据。在Web应用程序开发中,这种组件常用于数据录入和展示,尤其适用于处理...

    ext2.0网格实践源码

    1. **EXT GridPanel的基本结构**:EXT GridPanel由一系列配置选项和列定义组成。配置选项可以包括数据源(如Store)、列宽、行高、分页设置等。列定义则包含了列的标题、数据字段映射、对齐方式、是否可排序等属性。...

Global site tag (gtag.js) - Google Analytics