/**
* @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"> </div>',
'<div class="x-grid3-resize-proxy"> </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 = " ";
}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 GridPanel 单元格无法复制问题解决方案 ExtJS 是一个功能强大的 JavaScript 框架,广泛应用于 Web 开发中。...通过这些步骤,我们可以使得单元格的内容可以被选中和复制,从而提高用户体验。
在EXT GridPanel中,获取某一单元格的值是常见的操作,特别是在实现自定义事件处理或数据验证时。 在提供的代码段中,我们看到一个监听`cellclick`事件的例子,这是EXT GridPanel中用于捕获用户点击单元格时的事件...
用户可以选中和复制单元格的内容,提高了用户体验。 解决Ext.grid.GridPanel中的单元格不能选中复制的问题需要从两个方面入手:添加新的CSS样式和修改Ext.grid.GridPanel的protoType。这些解决方案可以帮助开发者...
### Ext GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行的 JavaScript 框架,用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍...
"ext gridpanel 跨行"这个主题主要涉及到在GridPanel中实现单元格或行的跨行显示,这在展示复杂数据或需要组合信息时非常有用。 首先,让我们深入理解什么是GridPanel。在Ext JS中,GridPanel是一个表格视图,它...
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...
Ext JS提供了强大的表格组件GridPanel,但默认情况下并未直接支持数据单元格的合并功能。本文将详细介绍一种在Ext JS中实现数据单元格合并的方法,并通过示例代码来帮助开发者更好地理解和应用这一技术。 #### CSS...
在本文中,我们将深入探讨如何使用ExtJS库中的RowExpander插件来实现在GridPanel中内嵌行内的表格。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。RowExpander插件是...
2. 在需要时动态加载和卸载GridPanel,通过Ext JS的容器系统实现。 3. 如果数据更新频繁,可以考虑使用Store的buffered rendering特性,减少内存占用和渲染压力。 4. 对于复杂的配置,可以将它们分离到单独的配置...
总的来说,`newtpanel.aspx` 和 `newtpanel.aspx.cs` 文件展示了如何利用Ext.NET在服务器端和客户端代码中动态创建和管理GridPanel,以及如何将它们集成到各种窗口容器中,以实现灵活的数据展示和交互。这是一项关键...
在Ext JS中,`Ext GridPanel`是一种常用的组件,用于展示和操作表格数据。它具有丰富的功能,包括分页、排序、筛选等。本示例主要关注在`GridPanel`加载完数据后如何进行特定的操作,特别是选定某些行数据。 首先,...
EXTJS提供了丰富的API和配置选项,使得开发者能够灵活地定制GridPanel的行为和外观。在实际项目中,你可能还需要关注性能优化,比如使用buffered rendering来提高大数据量时的渲染速度。 这个"EXTJSEXT实例...
Ext.grid.GridPanel 删除线 放到example文件夹下运行
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
综上所述,`Ext.grid.GridPanel`提供了非常全面且强大的功能,使得开发者能够根据实际需求灵活定制表格的样式和交互。通过深入了解这些配置选项和方法,可以更高效地利用ExtJS框架实现复杂的前端表格功能。
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
ext.net gridpanel 弹出窗
总之,通过Ext JS提供的API,我们可以轻松地对GridPanel的数据和样式进行定制,以实现各种复杂的界面效果。无论是修改数据,还是调整字体颜色或应用CSS属性,都可以通过灵活的编程方式实现。在实际项目中,结合业务...
"Ext Form GridPanel"是Ext JS库中的一个重要组件,它结合了表格(Grid)和表单(Form)的功能,提供了一种强大而灵活的方式来显示和编辑数据。在Web应用程序开发中,这种组件常用于数据录入和展示,尤其适用于处理...
1. **EXT GridPanel的基本结构**:EXT GridPanel由一系列配置选项和列定义组成。配置选项可以包括数据源(如Store)、列宽、行高、分页设置等。列定义则包含了列的标题、数据字段映射、对齐方式、是否可排序等属性。...