Ext.onReady(function() {
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : 'Login!hellogrid.action'
}),// 调用的动作
reader : new Ext.data.JsonReader( {
root : 'user', // 从struts2里面传递过来的参数
successProperty : 'success'
}, [ // JSON数据的映射
{
name : 'id',
mapping : 'id',
type : 'string'
}, {
name : 'fullName',
mapping : 'username',
type : 'string'
}, {
name : 'email',
mapping : 'email',
type : 'string'
}, ])
});
var grid = new Ext.grid.GridPanel( {
id : "grid",
el : "example-grid",
ds : ds,
store : ds,
columns : [ {
header : "id",
width : 120,
dataIndex : 'id',
sortable : true
}, {
header : "usrName",
width : 120,
dataIndex : 'fullName',
sortable : true
}, {
header : "email",
width : 120,
dataIndex : 'email',
renderer : showUrl(this.value)
} // 显示超链接
],
width : 360,
height : 600
});
grid.render();
ds.load();
});
function showUrl(value) {
return "<a href='mailto:" + value + "'>value</a>";
}
分享到:
相关推荐
在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid ...
在EXT JS这个强大的JavaScript框架中,EXT Grid是一个非常重要的组件,用于展示大量结构化数据,并提供了丰富的交互功能。本文将深入探讨"EXT Grid数据绑定"这一主题,包括数据查找和如何将查找结果重新填充到Grid中...
在本文中,我们将深入探讨如何使用Ext Grid与Direct Web Remoting (DWR)技术结合,实现一个具有分页功能的列表展示。首先,让我们逐一了解这些关键组件。 1. **Ext Grid**: Ext Grid是Ext JS库中的核心组件,用于...
在本文中,我们将深入探讨如何在EXT Grid中实现服务器端分页,这在处理大量数据时尤为关键。EXT Grid是一款强大的JavaScript组件,用于构建交互式的数据视图,而服务器端分页则是优化性能、提高用户体验的重要策略。...
在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...
Ext Grid是Ext JS框架中的一个核心组件,用于创建数据驱动的表格视图。在这个学习资料中,我们将深入探讨Ext Grid的基本功能,包括数据加载、定时器筛选、分组以及JavaScript库对日期的处理,如计算上周、上月和上...
- 设计好公共接口,例如loadData()用于加载数据,refresh()用于刷新Grid。 4. `grid.js`文件详解: - `grid.js`很可能包含了封装好的Grid组件代码,实现了特定的功能和接口。 - 文件可能定义了一个名为`MyGrid`...
Ext Grid是Ext JS框架中的一个核心组件,用于创建数据驱动的表格视图。当你在处理大量数据时,它提供了一种高效、灵活的方式来展示和操作数据。然而,当你提到"ext gride刷新又回到第一页",这通常涉及到Grid组件的...
在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据...在阅读这篇博客时,可以参照给出的"extgrid"文件,查看具体的代码实现,以便更好地理解和学习。
ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...
### Ext JS 中将 Grid 渲染到 ComboBox 的方法 在 Ext JS 框架中,有时需要将 Grid 控件的数据渲染到 ComboBox 中,这在实际应用中是非常实用且灵活的功能。下面将详细介绍如何利用 Ext JS 的 XTemplate 特性来实现...
表单数据与后端服务的交互通常通过`Ext.form.action.Submit`或`Ext.form.action.Load`进行。 4. **数据存储(Store)**:`Ext.data.Store`是连接数据模型和视图的关键,它负责管理数据加载、更新和同步。在这个例子...
- 在Grid中,可以监听`load`事件来处理数据加载完成后的一些逻辑,例如初始化或更新分页信息。 - Paging Toolbar的`beforechange`和`change`事件可用于在用户切换页码前后的操作,比如禁用按钮或显示加载动画。 5...
### Ext2.0框架的Grid使用介绍 #### 一、Ext2.0框架概述 Ext2.0是一款基于JavaScript的库,它提供了大量的用户界面组件,使得开发人员能够轻松地构建出高度交互式的Web应用程序。相比其他框架如YUI等,Ext2.0拥有...
### Ext2.0框架的Grid使用详解 #### 引言 在前端开发领域,Ext2.0框架以其强大的功能和灵活的组件库而备受推崇,尤其是其Grid组件,更是前端开发者构建美观、交互性强的数据展示界面的利器。本文将深入探讨Ext2.0...
myGrid = Ext.create('Ext.grid.Panel', { // 配置项... }); // 添加到容器或布局 Ext.container.Viewport.add(myGrid); } else { // 重新加载数据 myGrid.store.loadData(newData); } } ``` 在这个例子中...
### Ext2.0框架的Grid使用介绍 #### 一、Ext2.0框架概述 Ext2.0是一款基于JavaScript的库,它提供了丰富的用户界面组件和API,使得开发者能够快速地构建出高度交互性的Web应用。与其他框架如YUI相比,Ext2.0拥有...
2. **创建EXT GRID**:在客户端,使用EXT创建GRID实例,定义列结构和数据源。数据源通常设置为DWR的RemoteProxy,这样EXT GRID可以通过DWR调用服务器端的方法获取数据。 3. **定义DWR接口**:在服务器端编写Java...
- 首先,你需要创建一个Ext.grid.Panel实例,这是ExtJS中的Grid组件。通过设置配置项如store(用于存储数据)、columns(定义列)等来定制Grid。 2. **动态生成列** - 你可以使用`columns`属性来动态生成列。例如...
var grid = Ext.create('Ext.grid.Panel', { store: store, columns: columns, renderTo: Ext.getBody() // 渲染到页面 }); ``` **步骤2:处理服务器返回的JSON数据** 在上述配置中,我们设置了`proxy`来处理与...