【发布时间】：2018-03-12 04:57:50
【问题描述】：
我正在使用 extjs，我想将表格中的第一行文本自定义为粗体并增加字体大小。我没有找到行的任何独特属性。有没有办法自定义？
【问题讨论】：
标签： extjs extjs4 extjs4.1 extjs5
【发布时间】：2018-03-12 04:57:50
【问题描述】：
解决方案：
您可以尝试使用Ext.grid.Panel 和Ext.tree.Panel 的viewConfig 配置选项。以下是工作示例。
工作示例（网格面板）：
数据：customgrid.json
[
{Id : '1', Name: 'Name 1'},
{Id : '2', Name: 'Name 2'},
{Id : '3', Name: 'Name 3'},
{Id : '4', Name: 'Name 4'},
{Id : '5', Name: 'Name 5'},
{Id : '6', Name: 'Name 6'}
]
CSS：customgrid.css
.grid-firstrow .x-grid-cell {
font-weight: bold;
font-size: 18;
}
网格：customgrid.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./customgrid.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('testmodel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Id', type: 'string'},
{name: 'Name', type: 'string'}
]
});
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
loadTestData: function() {
var me = this;
me.store.load();
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = new Ext.data.Store({
autoLoad: false,
proxy: {
url: 'customgrid.json',
type: 'ajax',
reader: {type: 'json'},
writer: {type: 'json'}
},
model: 'testmodel'
});
me.grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
store: me.store,
columnLines: false,
columns : [
{header : 'Id', sortable : true, width : 50, dataIndex : 'Id'},
{header : 'Name', sortable : true, width : 100, dataIndex : 'Name'}
],
viewConfig: {
getRowClass: function(record, index) {
var css = '';
if (index == 0) {
css = 'grid-firstrow';
} else {
css = '';
}
return css;
}
}
});
me.add(me.grid);
me.loadTestData();
}
});
var win = new Test.Window({
});
win.show();
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
工作示例（树形面板）：
CSS：customtree.css
.tree-node .x-grid-cell-inner {
font-weight: bold;
font-size: 18px;
}
树：customtree.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./customtree.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = new Ext.data.TreeStore({
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
model: 'usersw_model'
});
me.tree = new Ext.tree.Panel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: false,
width: '100%',
flex: 1,
border: false,
rootVisible: false,
allowChildren: true,
store: me.store,
root: {
expanded: true,
text: 'Ext JS',
draggable: false,
id: 'root'
},
viewConfig: {
getRowClass: function(record, index) {
var css = '';
if (index == 0) {
css = 'tree-node';
} else {
css = '';
}
return css;
}
}
});
me.add(me.tree);
var rootnode = me.tree.getRootNode();
var parent1node = rootnode.appendChild({
text: 'Parent1',
leaf: false
});
parent1node.appendChild({
text: 'Child1',
leaf: true
});
parent1node.appendChild({
text: 'Child2',
leaf: true
});
parent1node.appendChild({
text: 'Child3',
leaf: true
});
var parent2node = rootnode.appendChild({
text: 'Parent2',
leaf: false
});
parent2node.appendChild({
text: 'Child1',
leaf: true
});
parent2node.appendChild({
text: 'Child2',
leaf: true
});
parent2node.appendChild({
text: 'Child3',
leaf: true
});
var parent3node = rootnode.appendChild({
text: 'Parent3',
leaf: false
});
}
});
var win = new Test.Window({
});
win.show();
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
【讨论】：
-
我认为它会起作用，因为两个“viewconfig”选项都是 Ext.view.Table 类型的。本示例使用 ExtJS 4.2。
-
@DivakarArasu 更新了树形面板的示例。
你会为此使用 CSS：
tr:first-child {
font-weight: bold;
font-size: x-large;
}
或将第一行单元格输出为 th 而不是 td 并以这种方式设置样式：
th {
font-weight: bold;
font-size: x-large;
}
【讨论】：
-
当我使用 'td :first-child' 时，更改会影响表中的所有行。不仅在第一行。
-
它是一个树型表，我在我的应用程序中使用。
-
td 是一个表格单元格，而不是一行，因此当您指定 td :first-child, first off 时，您应该尝试设置 tr 的样式（由原始帖子指定），而不是td，加上你在这里有一个空格（这可能只是你的回复中的一个错字）。需要检查的东西 - 确保 :. 之前没有空格。