Ext.onReady(function(){
var cities=[
[1,"北京"],
[2,"上海"],
[3,"广州"],
[4,"深圳"],
[5,"天津"]
];
var city=Ext.data.Record.create([
{
name:"cid",type:"int",mapping:0
},
{
name:"cname",type:"string",mapping:1
}
]);
var proxy=new Ext.data.MemoryProxy(cities);
var reader=new Ext.data.ArrayReader({},city);
var store=new Ext.data.Store({
proxy:proxy,
reader:reader,
autoLoad:true//即使加载
});
var box=new Ext.form.ComboBox({
renderTo:Ext.getBody(),
store:store,
triggerAction:"all",
displayField:"cname",
valueField:"cid",
mode:"local",
emptyText:"请选择一线城市名称:"
});
});
ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,控制负责显示数据。
DataProxy:获取想要的数据,通过他能得到来自不同地方的数据,如数组、远程服务
器,并组织成不同的格式。
DataReader:定义数据项的逻辑结构,一个数据项有很多列,每列的名称是什么,分别
是什么数据类型,都由该类来定义。另外,还负责对不同格式的数据进行读取和解析。
Store:存储器,用于整合 Proxy 和 Reader,控索取数据时通常和他打交道。
Ext.data. DataProxy 就是来源这样一种灵感。
Ext.data.DataProxy 是获取数据的代理,数据可能来自于内存,可能来自于同一域的远
程服务器数据,更有可能来自于不同域的远程服务器数据。
但是,在实际应用中,我们不会直接使用 Ext.data.DataProxy,而是使用他的子类:
MemoryProxy、HttpProxy 和 ScriptTagProxy,他们的作用分别是:
MemoryProxy:获取来自内存的数据,可以是数组、json 或者 xml。
HttpProxy:使用 HTTP 协议通过 ajax 从远程服务器获取数据的代理,需要指定 url。
ScriptTagProxy:功能和 HttpProxy 一样,但支持跨域获取数据, 是实现时有点偷鸡摸
狗。
我们定义了一个 City 的结构,通过 Ext.data.Record.create 创建,参数是一个 json 对象数组,name 和 type 分别表示每一列的名称和数据类型,mapping 是列值与数组元素的映射关
Record 创建 好 后 , 必须 和 DataReader 关 联 , DataReader 也 同样有 三 个 子 类:
Ext.data.ArrayReader、Ext.data.JsonReader、Ext.data.XmlReader。我之前说过 DataReader从来不单独行动,使用哪一个子类主要取决 DataProxy 中封装的数据类型,如果是数组,则使用 Ext.data.ArrayReader;如果是 json,则使用 Ext.data.JsonReader;如果是 xml,则使用
Ext.data.XmlReader。在本教程中,我打算将 xml 封杀。我不喜欢这个东西(尽管有时候不
得不面对) 。相对而言,我更热衷 轻量级的 jsonObject。
Ext.data.Record 并没有固定的结构,他保存的是一个 json 对 象数组,数组的元素个数由列的数量来决定。
分享到:
相关推荐
在ExtJS中,`Store`对象负责从服务器获取数据并存储到客户端,供应用程序使用。为了在加载数据时给用户提供反馈,可以利用`beforeload`事件和`Ext.MessageBox.show`方法来实现加载提示。 #### 1. 使用`beforeload`...
总结起来,本篇内容涵盖了ExtJS中的核心数据组件,包括Ext.data.Connection的使用、Ext.data.Record的创建与操作、Ext.data.Store的配置以及数据交互的Proxy和Reader机制。这些知识是构建基于ExtJS的异步数据驱动...
通过这些小例子,你可以逐步了解ExtJS的基本概念,包括Store、Proxy、Reader以及组件的创建和布局。继续深入学习,你将掌握更多高级特性,如数据绑定、事件处理、自定义组件等,从而能够利用ExtJS构建复杂的Web应用...
总结起来,EXTJS的分页功能通过Grid组件、Store和Proxy的配合,实现了前端与后端的数据交互。在前端,我们配置Grid和Store来展示分页数据,而在后端,我们编写接口来处理分页请求并返回响应。这是一个基本的EXTJS...
- **分页**: 使用`pagingToolbar`插件实现分页功能,设置`pageSize`和`proxy`的`reader`配置。 - **排序与过滤**: `sortable`属性允许列排序,而`filter`配置则用于添加过滤器。 - **行编辑**: 使用`RowEditor`插件...
本文将通过一个具体的例子来详细介绍ExtJS中`GridPanel`的基本用法以及如何利用`HttpProxy`、`JsonReader`、`Store`等关键对象来构建动态数据展示界面。 #### 二、核心概念介绍 1. **HttpProxy** - `HttpProxy`是...
### Extjs 4.2.0 MVC 架构详解及官方文档中文示例 #### 一、文件结构 在Extjs 4.2.0中,为了更好地组织和管理代码,采用了一种标准的文件结构。这种结构不仅有助于提高代码的可读性和可维护性,还能确保团队成员...
通过以上步骤,你已经掌握了基本的ExtJS Gride使用方法。当然,ExtJS提供了大量的API和配置选项,可以根据项目需求进一步定制和优化Grid的功能,例如行编辑、列重排、自定义分页样式等。在实际开发中,不断学习和...
这个例子展示了如何在ExtJS中实现CRUD操作的基本流程,包括创建模型、定义存储、展示数据以及添加编辑、创建和删除功能。实际应用中,你可能需要根据具体需求进行更复杂的定制,比如处理错误、实现分页、增加过滤和...
在EXTJS4中,Store是数据管理的核心...通过以上两种方法,我们可以更好地控制EXTJS4中Store的加载过程,提供加载提示,并在不同Store之间灵活地移动和筛选数据。这在处理大量数据或构建复杂交互的Web应用时非常有用。
4. **Ajax与数据接口**:ExtJs内置了对Ajax的支持,通过Proxy和Reader/Writer,可以方便地与服务器进行异步数据交换,支持各种常见的数据格式如JSON、XML和CSV。 5. **事件处理**:事件驱动是ExtJs的一个重要特性,...
EXTJS和Struts2是两种在Web开发中广泛使用的框架,EXTJS主要用于构建富客户端界面,而Struts2则是一个强大的MVC(Model-View-Controller)框架,用于处理服务器端逻辑。本示例结合两者,实现了数据的分页显示功能,...
TreeStore是ExtJS中用于表示树形数据结构的组件,它可以与各种UI组件(如TreePanel)配合使用,展示层级化的数据。在这个主题中,我们将深入探讨如何结合TreeStore和pagingToolbar实现分页功能。 在传统的表格数据...
- Grid、Tree、Form、Panel、Chart等组件的使用方法和应用场景。 - 如何利用这些组件构建复杂的用户界面。 - **MVC重构**: - 展示如何使用MVC模式重构之前的Grid组件,以提高代码的可维护性和扩展性。 - **实战...
看到其它地方 分太高,问大家省点分. 只有代码,视频请百度看. 第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件... 第三十讲:extjs4.0的desktop使用讲解
2. 使用load方法:另一种方式是手动调用store的load方法,传入包含URL的参数。这种方法灵活性较高,但需要手动处理加载事件。 ```javascript var store = Ext.create('Ext.data.Store', { model: 'MyModel' }); ...
- **数据加载**:学习如何使用 Proxy 从远程服务器加载数据到 Store。 - **数据操作**:包括添加新记录、更新现有记录和删除记录等常见操作。 - **数据绑定**:Store 与 UI 组件之间的数据绑定机制。 #### 七、...