<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(){
/*
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:function(value){
if
(value == 'male') {
return "<span
style='color:red;font-weight:bold;'>红男</span>";
}
else {
return "<span
style='color:green;font-weight:bold;'>绿女</span>";
}
}},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
*/
function
renderSex(value) {
if (value == 'male') {
return
"<span style='color:red;font-weight:bold;'>红男</span><img
src='user_male.png' />";
} else {
return "<span
style='color:green;font-weight:bold;'>绿女</span><img
src='user_female.png' />";
}
}
function renderDescn(value, cellmeta, record, rowIndex, columnIndex,
store) {
var str = "<input type='button' value='查看详细信息'
onclick='alert(\"" +
"这个单元格的值是：" + value
+ "\\n
" +
"这个单元格的配置是：{cellId:" + cellmeta.cellId +
",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
"这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n
" +
"这是第" + rowIndex + "行\\n
" +
"这是第" + columnIndex + "列\\n
" +
"这个表格对应的Ext.data.Store在这里：" + store +
"，随便用吧。" +
"\")'>";
return str;
}
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:renderSex},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn',renderer:renderDescn}
]);
var data = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new
Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({},
[
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight:
true,
renderTo: 'grid',
store: store,
cm:
cm
});
});
</script>
</head>
<body>
<script type="text/javascript"
src="../examples.js"></script>
<div
id="grid"></div>
</body>
</html>
分享到：
相关推荐
EXTJS Grid是EXTJS库中的一个核心组件，用于创建数据密集型的表格视图，它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能，包括分页、排序、过滤、编辑等，使得用户可以高效地管理和...
ExtJS Grid是Sencha ExtJS框架中的一个核心组件，它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用，因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...
EXTJS Grid是一款强大的数据展示组件，广泛应用于Web应用开发中，尤其在数据密集型界面设计时，EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...
ExtJS Grid是一个强大的数据展示组件，它在Web应用程序中用于显示和操作大量数据。Grid提供了丰富的功能，包括分页、排序、过滤、编辑等，是ExtJS库中的核心组件之一。"Extjs Grid 扩展实例"是一个演示如何增强Grid...
ExtJS Grid是一款强大的JavaScript组件，用于在Web应用中创建数据密集型的表格视图。它由Sencha公司开发，是Ext JS库的核心部分，广泛应用于企业级应用的前端开发，提供丰富的功能和高度的可定制性。这个"ExtJS_grid...
在EXTJS中，Grid组件是数据展示的核心，它允许用户以表格形式查看和操作大量数据。在实际应用中，为了提供更好的用户体验，我们经常需要在鼠标悬停在某个单元格或列头时显示额外的信息，这就是ToolTip的效果。EXTJS ...
遍历Grid的所有Column，根据Column的配置项，如`width`、`align`、`renderer`等，构建对应的CSS规则。 3. **表格构建**：使用JavaScript创建一个新的HTML `<table>`元素，并填充数据。对于每个记录，创建一个`<tr>`...
在EXTJS中，Grid Panel是数据展示的核心组件，它用于显示二维表格数据。有时，我们可能需要根据数据的特定条件来动态地改变Grid中某一列的背景颜色或字体颜色，以便于用户更好地理解和区分数据。以下就是EXTJS Grid...
这篇博客文章 "ExtJS 使用grid显示数据" 可能详细阐述了如何利用ExtJS的Grid面板来展示和操作数据。 在ExtJS中，Grid Panel是一种数据驱动的组件，它允许开发者以表格的形式展示大量数据，并且支持分页、排序、过滤...
首先，我们要理解EXTJS Grid中的`renderer`函数。这个函数是用来格式化和渲染网格单元格的内容。通过定义`renderer`，我们可以自定义单元格的显示方式，包括改变颜色、添加链接等。例如： ```javascript { header:...
在本文中，我们将深入探讨`ExtJS`框架中的两个关键组件——`Ext日期时间控件`和`Spinner控件`，以及它们在`Grid`中的应用。`ExtJS`是一款强大的JavaScript库，专用于构建富客户端应用程序，尤其适用于创建复杂的、...
其中，Grid Panel是EXTJS中最常用的组件之一，用于展示和编辑数据。本文将详细介绍EXTJS实现单元格变色、行变色的方法。 单元格变色 在EXTJS中，单元格变色可以通过renderer函数来实现。renderer函数是Grid Panel...
本篇文章将深入探讨ExtJS中的Tree和Grid，特别是Buffer Grid与Progress Grid的实现。 **一、ExtJS Tree组件** 1. **Tree组件基本概念**：Tree组件用于展示层次结构的数据，类似于操作系统中的文件系统，具有可折叠/...
在EXTJS中，Grid组件是数据展示的核心，它允许用户以表格形式查看和操作大量数据。EXTJS的Grid具有丰富的特性和灵活性，是其UI框架的一大亮点。在本篇学习笔记中，我们将深入探讨EXTJS中最基本的Grid的构建和配置。 ...
在ExtJs框架中，我们经常需要在表格（`Ext.grid.Panel`）中显示超链接，并且当用户点击这些超链接时，能够获取到当前行的数据。为了实现这一功能，我们可以使用`renderer`函数对单元格进行自定义渲染。 **代码示例*...
在EXTJS应用中，将动态Combobox嵌入Grid可以提供丰富的交互体验，用户可以在Grid的单元格中直接选择下拉列表中的值，同时，通过自定义的renderer函数确保数据显示的正确性。这种做法在数据管理界面中非常常见，特别...
在ExtJS框架中，对Grid组件添加图片或按钮以表示特定状态或执行特定操作是一种常见需求。我们可以通过几种方法实现这一功能，下面详细阐述： 一、使用renderer为Grid列添加图片状态 renderer是一个用于渲染Grid中...
- `demo.html`：这是一个示例HTML文件，其中包含了ExtJS GridPanel的配置和初始化代码，可能包含了上述提到的renderer函数、store配置和ColumnModel设置。 - `rowspan.js`：这是JavaScript文件，包含了实现多行合并...
ExtJS 是一个强大的JavaScript框架，主要用于构建富客户端的Web应用程序，而Grid是ExtJS中的一个核心组件，用于展示数据表格。在本篇文章中，我们将深入探讨如何使用ExtJS与Gride进行交互，创建功能丰富的数据网格。...