如何格式化 ExtJS 树形网格边框

发布于 2024-10-21 23:35:33 字数 767 浏览 5 评论 0原文

所以我认为格式化 extjs 树形网格中的边框是基本的，但经过几个小时的尝试和环顾后我还没有找到解决方案。我遇到的问题是我的边框外观和宽度在列和行之间不一致（尝试附加屏幕截图，但由于是新网站而无法附加）。我尝试直接在列创建中定义边框：

columns:[{header: 'H6',dataIndex: 'hour6',width: 210, border: 1}]

以及在 XTemplate 中设置单元格背景颜色（不认为这会起作用，但我想我会尝试）：

columns: [{header: 'H6',dataIndex: 'hour6',width: 210,              
    tpl: new Ext.XTemplate('{duration1:this.doFormat}', {
        doFormat: fn(v){
            if (v == 1) {return '<span style="background-color: red; width: 100%; border: 1">' + v + '</span>';}
        else {return '<span style="background-color:' + currentcolor + '; width: 100%; border: 1">' + v + '</span>';}
        }
    })
}]

有谁知道如何将树形网格边框格式化为解决这个问题吗？

谢谢。

原文

So I thought formatting the borders within an extjs treegrid would be basic but I have not been able to find a solution after hours of trying and looking around. The problem I'm having is that my borders appearance and width are inconsistent between both columns and rows (tried attaching screenshot but couldn't since new to site). I tried defining borders directly in the column creation:

columns:[{header: 'H6',dataIndex: 'hour6',width: 210, border: 1}]

as well as in the XTemplate where I'm setting my cell background color (didn't think this would work but thought I'd try):

columns: [{header: 'H6',dataIndex: 'hour6',width: 210,              
    tpl: new Ext.XTemplate('{duration1:this.doFormat}', {
        doFormat: fn(v){
            if (v == 1) {return '<span style="background-color: red; width: 100%; border: 1">' + v + '</span>';}
        else {return '<span style="background-color:' + currentcolor + '; width: 100%; border: 1">' + v + '</span>';}
        }
    })
}]

Does anyone know how to format treegrid borders to fix this issue?

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

昔梦 2024-10-28 23:35:33

最好的选择是通过列定义的 cls 配置选项使用 css 类，或者直接在列元素上操作 css 样式。网格行之间的边框在 .x-treegrid-col 类上设置。

// set the border on all rows to red
.x-treegrid-col {
    border-bottom: 1px solid red;
}

我不完全确定您想要实现什么，请将屏幕截图上传到 http://tinypic.com/并将其链接嵌入到您的原始帖子中，这可能会有所帮助。

Your best bet us to use css classes through the cls config option of your column definition or manipulate the css style directly on the column element. The border between grid rows is set on the .x-treegrid-col class.

// set the border on all rows to red
.x-treegrid-col {
    border-bottom: 1px solid red;
}

I'm not entirely sure what you are trying to achieve though, upload a screenshot to http://tinypic.com/ and embed of link to it in your original post, that might help.

回复收藏 0 原文

~没有更多了~