有网友问我怎么修改GridPanel#header的样式, 所以我就做了个例子
源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext.GridPanel Example</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../extjs/3.2.0/resources/css/ext-all.css" />
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../extjs/3.2.0/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../extjs/3.2.0/ext-all-debug.js"></script>
<!-- overrides to base library -->
<!-- page specific -->
<script type="text/javascript" src="gridpanel.js"></script>
<style type="text/css">
.x-grid-hcell-bgcolor {
background-image: url() !important;
background-color: red;
}
.x-grid-cell-bgcolor {
background-color: gray;
}
</style>
</head>
<body>
<h1>CExt.GridPanel Example</h1>
<div id="example-ct" style="margin: 50px 50px;"></div>
</body>
</html>
Ext.onReady(function() {
var bd = Ext.getBody();
var store = new Ext.data.ArrayStore({
fields: [{
name: 'value'
}, {
name: 'text'
}]
});
var data = [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine'], ['10', 'Ten'], ['11', 'Eleven'], ['12', 'Twelve'], ['13', 'Thirteen'], ['14', 'Fourteen'], ['15', 'Fifteen'], ['16', 'Sixteen']];
store.loadData(data);
var enableHdMenu = false;
var panel = new Ext.grid.GridPanel({
renderTo: 'example-ct',
width: 500,
height: 300,
store: store,
columns: [{
header: 'ID',
dataIndex: 'value'
}, {
header: 'Name',
dataIndex: 'text'
}],
enableHdMenu: enableHdMenu,
viewConfig: {
templates: {
hcell : new Ext.Template(
'<td class="x-grid3-hd x-grid3-cell x-grid-hcell-bgcolor x-grid3-td-{id} {css}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
'{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
'</div></td>'),
cell: new Ext.XTemplate(
'<td class="x-grid3-col x-grid3-cell {cellbgcolor:this.cellBackgroudColor} x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>',
'</td>', {
cellBackgroudColor: function() {
var o = arguments[1];
if (o.css.indexOf('x-grid3-cell-first') != -1) {
return 'x-grid-cell-bgcolor';
}
return '';
}
})
}
}
});
})
分享到：
相关推荐
根据提供的文件信息，我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的，并且还涉及了模板（Template）的使用、...
var grid = new Ext.grid.GridPanel({ store: store, cm: cm, viewConfig: { forceFit: true // 自适应列宽 }, bbar: new Ext.PagingToolbar({ store: store, displayInfo: true, pageSize: 25 }) }); ```...
var grid = new Ext.grid.GridPanel({ store: myStore, // 数据源 columns: [ { header: "图片", width: 100, dataIndex: 'imageUrl', xtype: 'imagecolumn' } // 自定义列 ] }); ``` 这里，我们创建了一个...
内容概要：本文深入剖析了安川MP7系列工业控制系统的关键源码，重点介绍了运动轨迹规划、通信协议处理以及故障处理机制等方面的技术细节。通过对实际代码片段的解读，揭示了该系统在硬件寄存器直接访问、特殊功能码处理等方面的独特之处。同时，文中还分享了一些基于实践经验得出的重要参数设置及其背后的故事，如特定摩擦补偿系数的选择原因等。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对安川产品有一定了解并希望深入了解其内部工作机制的专业人士。 使用场景及目标：帮助读者掌握安川MP7系列控制器的工作原理，提高对类似系统的维护能力和故障排查效率。对于想要进一步研究或二次开发该系统的开发者来说，也能提供宝贵的参考资料。 其他说明：文章不仅限于理论讲解，还包括了许多来自一线的实际案例和经验教训，使读者能够更好地理解和应用所学知识。
自动化测试与脚本开发_Python3_pynput_键盘鼠标操作录制执行代码生成工具_用于自动化测试_脚本录制_重复操作模拟_宏命令生成_提高工作效率_支持GUI界面_跨平台兼容_
嵌入式八股文面试题库资料知识宝典-深入分析Windows和Linux动态库应用异同.zip
嵌入式八股文面试题库资料知识宝典-C语言总结.zip
内容概要：本文详细探讨了风储直流微电网中母线电压控制的关键技术。首先介绍了风储直流微电网的背景和发展现状，强调了母线电压控制的重要性。接着阐述了永磁风机储能并网技术，解释了永磁风机如何通过直接驱动发电机将风能转化为电能，并确保与电网的同步性和稳定性。然后深入讨论了双闭环控制MPPT技术，这是一种通过内外两个闭环控制系统来实现实时调整发电机运行参数的技术，确保风机始终处于最大功率点附近。最后，文章探讨了储能控制母线电压平衡的方法，即通过储能系统的充放电操作来维持母线电压的稳定。结论部分指出，通过这些技术的有机结合，可以实现对风储直流微电网的有效管理和优化控制。 适合人群：从事新能源技术研发的专业人士、电气工程研究人员、风电系统工程师。 使用场景及目标：适用于希望深入了解风储直流微电网母线电压控制策略的研究人员和技术人员，旨在帮助他们掌握最新的控制技术和方法，以提高系统的稳定性和效率。 其他说明：文章还对未来风储直流微电网的发展进行了展望，指出了智能化和自动化的趋势，以及储能技术的进步对系统性能的影响。
嵌入式八股文面试题库资料知识宝典-C++object-oriented.zip
内容概要：文章详细介绍了HarmonyOS的目录结构及其重要性，从整体框架到核心目录的具体功能进行了全面剖析。HarmonyOS凭借其分布式架构和跨设备协同能力迅速崛起，成为全球操作系统领域的重要力量。文章首先概述了HarmonyOS的背景和发展现状，强调了目录结构对开发的重要性。接着，具体介绍了根目录文件、AppScope、entry和oh_modules等核心目录的功能和作用。例如，AppScope作为全局资源配置中心，存放应用级的配置文件和公共资源；entry目录是应用的核心入口，负责源代码和界面开发。此外，文章还对比了HarmonyOS与Android、iOS目录结构的异同，突出了HarmonyOS的独特优势。最后，通过旅游应用和电商应用的实际案例，展示了HarmonyOS目录结构在资源管理和代码组织方面的应用效果。; 适合人群：具备一定编程基础，尤其是对移动操作系统开发感兴趣的开发者，包括初学者和有一定经验的研发人员。; 使用场景及目标：①帮助开发者快速理解HarmonyOS的目录结构，提高开发效率；②为跨设备应用开发提供理论和技术支持；③通过实际案例学习资源管理和代码组织的最佳实践。; 其他说明：HarmonyOS的目录结构设计简洁明了，模块职责划分明确，有助于开发者更好地管理和组织代码和资源。随着万物互联时代的到来，HarmonyOS有望在开发便利性和生态建设方面取得更大进展，吸引更多开发者加入其生态系统。
内容概要：本文详细介绍了飞轮储能充放电控制的Simulink仿真模型，重点在于采用永磁同步电机的矢量控制和dq轴解耦控制策略。充电时，外环控制转速，内环控制dq轴电流；放电时，外环控制直流母线电压，内环同样控制dq轴电流。文中还讨论了硬件与软件环境的选择，以及仿真模型的调试与运行情况，最终得出该模型具有良好的跟随性能和波形完美度。 适用人群：从事电力电子系统、储能技术和Simulink仿真的研究人员和技术人员。 使用场景及目标：适用于需要对飞轮储能系统进行深入研究和仿真的场合，旨在提高充放电效率和稳定性，满足不同应用场景的需求。 其他说明：该仿真模型已调试完成，可以直接用于进一步的研究和实际应用，为未来的飞轮储能技术研发提供了有价值的参考。
嵌入式八股文面试题库资料知识宝典-北京瑞德方科技.zip
嵌入式八股文面试题库资料知识宝典-同方万维硬件测试工程师.zip
1_15套python PDF格式.zip
内容概要：本文详细介绍了三相三电平整流器的仿真过程及其性能分析。文中首先概述了三相三电平整流器的基本概念及其在电力系统中的重要作用，接着重点探讨了电压电流双闭环控制方式的工作原理和优势，以及SPWM调制技术的具体应用。通过仿真文件展示了整流器在不同条件下的响应情况，验证了这两种技术的有效性和优越性。最后，作者表达了对未来实际应用的期望。 适合人群：从事电力电子研究的技术人员、高校相关专业师生、对电力控制系统感兴趣的工程爱好者。 使用场景及目标：适用于希望深入了解三相三电平整流器工作原理和技术细节的研究人员；目标是在理论基础上掌握电压电流双闭环控制和SPWM调制的实际应用方法。 其他说明：本文提供的仅为仿真文件，未涉及实物实验数据。
嵌入式八股文面试题库资料知识宝典-恒光科技.zip
嵌入式八股文面试题库资料知识宝典-北京天华威视科技有限公司面试题.zip
嵌入式八股文面试题库资料知识宝典-微软研究院笔试题目的答案.zip
Arduino UART实验例程，开发板：正点原子EPS32S3，本人主页有详细实验说明可供参考。
嵌入式八股文面试题库资料知识宝典-朝歌数码.zip