如何改变extjs中gridpanel单元格边框,上下边框

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何改变extjs中gridpanel单元格边框,上下边框相关的知识,希望对你有一定的参考价值。

参考技术A 看了一下Extjs中html代码会知道,extjs中gridpanel中的表格是通过<div<table<tbody<tr<td<divcontent式的结构书写的。要改变单元格边框的样式就要改变Ext-all.css中.x-grid3-row这个样式。这个样式是应用到最外层div上的。
全局改变只需改变Ext-all.css里面的.x-grid3-row样式
比如你想去掉边框可以这样:
一、.x-grid3-rowcursor:default;border:0px solid #fff;border-top-color:#fff;width:100%;
如果想个性一点,自己要定义一个样式然后应用到特定的行如:
一、.my-x-grid3-rowcursor:default;border:0px solid #ccc,border-top-color:#fff;width:100%;
二、应用样式,获取div
var view=grid.getView();
var rows=view.getRows();//获取所有的行
var row=rows[0];//获取单行,就是你想改变的那一行,rows[1],rows[2].....都可以,就看你有多少列了
var cls= Ext.get(row);//获取ext中外层div对象
cls.removeClass("x-grid3-row");//去掉原来的样式
cls.addClass("my-x-grid3-row");//加上自己的样式
这样你会发现原来的边框不见了。大家可以举一反三改变其他样式。
ps:extjs中css中核心的部分是Ext-all.css,所以大家要是想改变样式直接改变里面的东西就ok啦本回答被提问者采纳

带有文本字段列的 ExtJS Gridpanel

【中文标题】带有文本字段列的 ExtJS Gridpanel【英文标题】:ExtJS Gridpanel with textfield column 【发布时间】:2011-08-04 06:23:25 【问题描述】:

如何在 GridPanel 中添加文本框列。 Gridpanel 的编辑器功能仅在双击单元格时显示文本框。但我希望默认显示列中的文本框。

提前致谢

【问题讨论】:

我不太明白需要这样的东西。文本框用于输入或显示数据,这两件事都可以使用编辑器网格来完成。甚至还有一个clicksToEdit 选项,允许单击该列进行编辑! 【参考方案1】:

我不相信有一个配置选项或组件。您可以尝试通过在“渲染器”中添加文本字段来解决它

【讨论】:

【参考方案2】:

您可以在网格的列模型中定义诸如 editor: textField 之类的属性,该属性将在列模型中显示文本框。

【讨论】:

以上是关于如何改变extjs中gridpanel单元格边框,上下边框的主要内容,如果未能解决你的问题,请参考以下文章

带有文本字段列的 ExtJS Gridpanel

ExtJs 3.:如何为网格体单元格添加边框(没有网格标题)

ExtJs - 对列进行排序后使用 CellEditor 的 GridPanel 中的错误

ExtJS EditorGridPanel ~ 设置行高和单元格宽度以显示所有单元格内容

GridPanel中getSelectionModel

如何在 Ext.grid.GridPanel 的一行中添加颜色选择器