如何使用 extjs 自定义表格中的第一行？
Posted
技术标签:
【中文标题】如何使用 extjs 自定义表格中的第一行？【英文标题】：How can I customize the first row in a table using extjs? 【发布时间】：2018-03-12 04:57:50 【问题描述】：我正在使用 extjs，我想将表格中的第一行文本自定义为粗体并增加字体大小。我没有找到行的任何独特属性。有没有办法自定义？
【问题讨论】：
【参考方案1】：解决方案：
您可以尝试使用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 更新了树形面板的示例。【参考方案2】：你会为此使用 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，加上你在这里有一个空格（这可能只是你的回复中的一个错字）。需要检查的东西 - 确保 :. 之前没有空格。以上是关于如何使用 extjs 自定义表格中的第一行？的主要内容，如果未能解决你的问题，请参考以下文章
在 didselect 行中我的第一行返回标签文本而不是我的自定义标签文本