Gridx入门
虽然同样都是基于Dojo store， 但与DataGrid/EnhancedGrid相比，Gridx有一套完全不同的架构。它有以下特点：
Gridx采用了一套与UI无关的内核来处理所有的表格数据的逻辑操作。
Gridx采用了一套灵活的模块化系统，它与基于plugin的EnhancedGrid架构不同，这种模块化架构不仅能提配置各种表格特性的灵活性，并且当一些功能不使用时，能够减少运行代码的大小。
Gridx开发了一套简洁直接的API，使得各模块之间实现真正的松耦合。
本文将简要介绍如何使用Gridx进行开发。现在Gridx仍处于开发阶段，一些API和实现的细节仍有可能调整。但它的基本用法和架构已经稳定。感兴趣的童鞋不妨一试。
1. 创建
假设我们有如下HTML页面：
[html]
<html>
<head>
<title>Gridx Demo</title>
<script type="text/javascript" src="dojo/dojo.js" data-dojo-config="async: true"></script>
</head>
<body>
<!-- We'd like to show a grid here -->
<div id="gridNode" style="width: 400px; height: 300px;"></div>
</body>
</html>
首先，要引入Gridx的CSS：
[html]
<link rel="stylesheet" href="gridx/resources/claro/Gridx.css" />
目前Gridx只支持Claro主题，如果要在RTL模式下运行，请用如下代码来引入:
[html]
<link rel="stylesheet" href="gridx/resources/claro/Gridx_rtl.css" />
我们必须“请求require” 的JavaScript 模块是：
一种Store类型，例如：dojo/store/Memory
gridx/Grid
gridx/core/model/cache/Sync (用于客户端store) or gridx/core/model/cache/Async (用于服务器端 store)
假设我们要创建基于dojo/store/Memory的grid，那么我们需要如下代码：
[javascript]
require([
'dojo/store/Memory',
'gridx/Grid',
'gridx/core/model/cache/Sync'
], function(Store, Grid, Cache){
var store = new Store({
data: [
{id: 1, title: 'Hey There', artist: 'Bette Midler'},
{id: 2, title: 'Love or Confusion', artist: 'Jimi Hendrix'},
{id: 3, title: 'Sugar Street', artist: 'Andy Narell'}
]
});
......
});
与DataGrid/EnhancedGrid类似，我们需要定义列结构：
[javascript]
var columns = [
{field: 'id', name: 'Identity'},
{field: 'title', name: 'Title'},
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
