Ext.onReady(
//Store的创建步骤
function()
{
//定义Record
var User=Ext.data.Record.create(
[
{name:'id'},
{name:'name'},
{name:'sex'}
]
);
//创建Store
var store=new Ext.data.Store(
{
url:'User.xml',//数据源
reader:new Ext.data.XmlReader(
{
id:'id',//主键
totalRecords:'',//总行数
record:'row'//节点选择
},
User//能够解析的记录集
)//解析器
}
);
store.load();
//定义Grid的表头
var cm=new Ext.grid.ColumnModel(
[
{header:'姓名',dataIndex:'name',sortable:true},//可排序
{header:'性别',dataIndex:'sex',sortable:true},
{header:'编号',dataIndex:'id',sortable:false}//不可排序
]
);
//创建Grid
var grid=new Ext.grid.EditorGridPanel(
{
store:store,
cm:cm,
renderTo:'paneldiv',
width:300,
height:200,
title:'cs'
}
);
}
);
分享到:
相关推荐
- Ext JS Grid的`store`可以通过Ajax请求与Servlet交互,一般使用`proxy`配置项设置为`Ext.data.proxy.Ajax`,并配置URL指向Servlet处理分页请求的端点。 - 当用户改变页码或每页条数时,Grid会自动发送带有相关...
下面通过一个具体的例子来演示如何创建一个简单的Grid实例。 ##### 1. 定义ColumnModel ```javascript // 创建ColumnModel,定义四个列 var cm = new Ext.grid.ColumnModel([ { header: '编号', dataIndex: 'id' ...
本文将通过一个具体的例子来详细介绍ExtJS中`GridPanel`的基本用法以及如何利用`HttpProxy`、`JsonReader`、`Store`等关键对象来构建动态数据展示界面。 #### 二、核心概念介绍 1. **HttpProxy** - `HttpProxy`是...
在这个例子中,我们将探讨如何在ExtJS 2.0中实现动态加载的Grid组件,这是一个非常实用的功能,尤其对于处理大量数据时,可以显著提高用户体验。 动态加载Grid意味着数据不是一次性全部加载到页面中,而是根据用户...
在这个例子中,我们创建了一个名为"MyApp"的应用,并在启动时创建了一个数据存储(store),包含了两个记录。然后,我们创建了一个GridPanel,设置了标题、数据源(store)、列配置(columns)和尺寸。最后,我们将...
在这个例子中,`grid`参数是触发事件的Grid实例,`rowIndex`和`columnIndex`分别表示被点击的行号和列号,`e`则是事件对象。`grid.getStore().getAt(rowIndex)`用于获取对应行的数据记录,`grid.getColumnModel()....
4. **将Grid Panel与Store关联**:最后,将Store与你的Grid Panel关联起来,以便数据能够正确地显示在Grid中。 ```javascript grid.bindStore(store); ``` 在这个例子中,`RowExpander4Grid.js`可能包含了实现...
在这个例子中,我们看到了如何通过组合多个Store和Grid的特性来构造一个矩阵视图,这对于展示大型数据集,特别是网络流量、统计信息等是非常有用的。EXTJS的这种灵活性和强大功能使其成为开发复杂数据驱动Web应用的...
SimpleStore是ExtJS中用于存储数据的简单内存数据存储方式,适用于数据量不大且不需要远程加载的场景。而CheckboxSelectionModel允许用户在Grid中为每行添加一个复选框,实现多选功能。本文将详细介绍如何在ExtJS ...
在EXTJS中,GridPanel通常与Store结合使用,Store负责管理数据,而GridPanel则负责显示这些数据。 首先,创建一个GridPanel需要定义以下主要部分: 1. **Store**: Store是用来存储数据的,它可以是从服务器获取的...
EXT JS的分页通常通过Store组件来实现,Store负责加载和管理数据,并与Grid进行绑定。分页配置包括页面大小(pageSize)、总计记录数(totalProperty)以及数据源(proxy),通常使用HTTP代理(Ext.data.HttpProxy)...
在上面的例子中,`SimpleStore` 是一个最简单的数据存储器,用于存储静态数据。 ##### 3.3 DataReader 数据读取器 `DataReader` 用于解析从服务器获取的数据,并将其转换为 `Record` 对象。通常情况下,数据是从...
在EXT中,"Store"是一个重要的概念,它负责管理数据,可以与各种数据源(如JSON、XML或CSV)进行交互,并将数据绑定到Grid、Tree或其他组件上。EXT 1.1.1的文档会详细介绍如何创建和使用Store,包括加载数据、执行...
这种方式不仅提高了开发效率,还使得前端与后端之间的通信变得更加简单直接。对于那些希望快速开发出高性能Web应用的开发者来说,这是一个非常实用的解决方案。在未来的工作中,还可以进一步探索更多高级特性,比如...
在这个例子中,`store`是数据源,`grid`是显示数据的组件,它们之间通过配置进行绑定,无需显式地传递参数。 以上是EXTJS中常见的三种传参方式。在实际开发中,开发者会根据需求灵活组合使用这些方法,以实现复杂...
10.2.1 最简单的grid / 520 10.2.2 列的配置项 / 521 10.2.3 自定义单元格的显示格式 / 523 10.2.4 通过列对象定义单元格的显示格式 / 525 10.2.5 设置行的背景颜色 / 532 10.2.6 列标题的分组 / 533 10.2.7 ...
接着,我们看一个简单的Panel案例。EXTJS的Panel是基本的容器组件,可以包含其他组件: ```javascript Ext.onReady(function() { new Ext.Panel({ renderTo: "hello", title: "第一个", width: 300, height: ...
grid.store = store; ``` 这里创建了一个JsonStore,指定数据来源URL和数据结构。`root`属性指定了JSON数据中包含记录的数组字段,`fields`定义了数据字段名。加载数据后,将其赋值给GridPanel的`store`属性,使数据...
本节将通过一个简单的例子来展示如何使用Ext JS。我们将会使用Ext JS来实现一些基本的JavaScript任务。 #### Element:Ext的核心 Ext JS的核心是`Element`类,它提供了对DOM元素的操作能力。通过`Element`,开发者...