代码简单 只是记录一下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>03.grid</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:35},
{header:'名称',dataIndex:'name',width:50},
{id:'descn',header:'描述',dataIndex:'descn',width:200,renderer:function(value){
return "<div ext:qtip='<img src=\""+value+"\" width=100 hight=100/>'>"+value+"</div>";
}}
]);
var data = [
['1','name1','14-01.png'],
['2','name2','14-01.png'],
['3','name3','14-01.png'],
['4','name4','14-01.png'],
['5','name5','14-01.png']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
- 大小: 10.9 KB
分享到:
相关推荐
根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...
首先,我们要了解Ext JS中的Grid Panel是实现合并单元格的主要组件。Grid Panel是一个用于显示大量结构化数据的灵活控件,通过使用Store来存储数据,ColumnModel来定义列的布局和格式。 1. **合并策略**:在Ext JS...
1. **理解EXT Grid的结构**:EXT Grid由一系列的行(Row)和列(Column)组成,每一行包含多个单元格(Cell)。行合并涉及将多个行的单元格合并为一个大单元格。 2. **自定义Renderer**:首先,我们需要创建一个...
解决 ExtJS GridPanel 单元格无法选中复制的问题需要两个步骤:添加新的 CSS 样式和修改 Ext.grid.GridPanel 的 prototype。通过这些步骤,我们可以使得单元格的内容可以被选中和复制,从而提高用户体验。
### ext表格合并单元格的方法 #### 背景与概述 在进行Web开发时,特别是在使用Ext JS框架处理表格数据展示的过程中,经常会遇到需要合并单元格的情况。这不仅可以提升数据展示的美观性,还能增强数据的可读性和...
在实际开发中,我们有时需要在Grid的单元格(Cell)中添加更丰富的交互元素,例如输入框、下拉选择器等,这时就涉及到了`Ext Grid CellEdit`的概念。`CellEdit`允许我们在单个单元格中进行编辑,而不是整个行,提高...
5. **编辑功能**:EXTGRID可以配置为行编辑或单元格编辑模式,方便用户直接在网格中添加、修改和删除数据。 6. **扩展性**:EXTGRID支持各种插件和扩展,如工具栏、分组视图、拖放功能、树形网格等,增强功能和交互...
"Ext的用户扩展控件-----可以在表格的单元格上弹出提示层信息"是一个专门为EXT的Grid组件设计的功能增强插件,它使得用户在鼠标悬停于表格的特定单元格时,能够显示更详细的信息提示,极大地提升了数据展示的交互性...
在EXT GridPanel中,获取某一单元格的值是常见的操作,特别是在实现自定义事件处理或数据验证时。 在提供的代码段中,我们看到一个监听`cellclick`事件的例子,这是EXT GridPanel中用于捕获用户点击单元格时的事件...
在EXT JS这个强大的JavaScript框架中,Grid组件是用于展示大量结构化数据的核心组件。"ext grid 显示数据"这一主题,是深入理解EXT JS开发的关键知识点之一,特别是在处理表格和列表展示时。在"LearningExtJS 第五...
EXT Grid是一款基于JavaScript的强大的...在实际开发中,EXT Grid导出Excel的功能可以根据项目需求进行定制,例如添加自定义样式、合并单元格、设置条件格式等。理解上述步骤后,你可以根据具体需求进行扩展和优化。
标题"ext超酷的grid中放图片(ext3.2.1)"暗示了我们将探讨如何在EXT JS的Grid组件中嵌入和展示图片。EXT JS 3.2.1虽然已经是较旧的版本,但其核心概念和方法在后续版本中仍然适用,因此学习这部分内容对于理解EXT JS...
- 处理样式和格式:EXT Grid的样式无法直接应用于Excel,所以你可能需要在构建Excel文件时指定单元格的样式。 - 处理大数据量:如果数据量过大,可能需要分批导出或者使用服务器端处理。 - 支持国际化:考虑不同语言...
Ext4 Grid打印是基于Ext JS库的一个功能,用于在网页中展示数据的表格组件。Ext4 Grid提供了丰富的功能,包括数据排序、筛选、分页以及列的动态调整等。在这个场景下,"grid打印"指的是将Grid中的数据导出或者可视化...
在处理大数据集时,Grid往往会出现纵向滚动条,以方便用户浏览表格内容。当数据行数非常多时,用户可能希望自定义滚动条的滚动量,即单次滚动鼠标滚轮时,Grid表格移动的行数。这涉及到对Grid Panel的滚动行为进行...
在IT行业中,Ext Grid是一款广泛使用的JavaScript组件,它允许开发者创建功能丰富的数据表格。这篇博客“Ext Grid导出Excel”探讨的主题是如何将Ext Grid中的数据显示在Microsoft Excel文件中,这在数据分析、报告...
7. **插件支持**:EXT JS Grid有多种插件,如CellEditing用于单元格编辑,RowExpander用于行展开显示更多信息,RowBody用于在行内显示额外内容。 8. **响应式设计**:EXT JS的Grid支持响应式布局,自动适应不同屏幕...
**jq-extgrid表格插件详解** jq-extgrid是一款基于jQuery的强大的表格插件,它极大地扩展了基础的jQuery grid功能,提供了丰富的特性以满足复杂的表格展示需求。在Web开发中,尤其是在数据展示和操作上,jq-extgrid...
在Ext JS这个强大的JavaScript框架中,开发人员经常需要创建数据展示组件,比如Grid,来显示大量数据并提供交互性。Grid List是Grid的一种扩展,它不仅具有基本的表格功能,还可以进行更复杂的操作。本教程将详细...