`
benbear2008
  • 浏览: 12204 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

ExtJs中关于grid和store的应用分析(一)

阅读更多

第一部分:阐述grid与store的关系、gird中的ColumnModel与store中的fields的关系。

grid,即列表,他的核心功能就是用来展现数据列表,包括列表各列的头信息和实际数据。

grid的各列头信息是由ColumnModel来定义的。
grid的实际数据列表是通过Store来展现的。

grid的实例化如下:

Js代码 复制代码
  1. var  grid =  new  Ext.grid.GridPanel({   
  2.   cm:cm,   
  3.   store:store   
  4.   ...   
  5. });  
var grid = new Ext.grid.GridPanel({
  cm:cm,
  store:store
  ...
});



相关图片示例如下:


ColumnModel中有两个非常重要的配置选项:header和dataIndex,
header就是列头的文本信息,是个字符串。
dataIndex是store中对应的数据结构定义,即对应于fields中各项的name值。

ColumnModel的构造函数接收的是数组类型的参数。用于一次性创建多个列信息。
如下:

Js代码 复制代码
  1. var  cm =  new  Ext.grid.ColumnModel([   
  2.   ...   
  3. ]);  
var cm = new Ext.grid.ColumnModel([
  ...
]);



下面我们再看一下Store,即数据存储器。
Store由数据结构定义和数据组成。
数据结构定义的最简单的模式如下:

Js代码 复制代码
  1. var  fields = [ "id" , "name" , "email" , "sex" , "age" ];  
var fields = ["id","name","email","sex","age"];


只标识了各名称。就像创建数据库表结构一样,可以只创建表中各字段的名称。

因此最简单的数据存储器如下:

Js代码 复制代码
  1. var  data = [...];   
  2. var  store =  new  Ext.data.Store({   
  3.   data:data, //此处为与数据结构定义相对应的数据   
  4.   fields:fields   
  5.   ...   
  6. });  
var data = [...];
var store = new Ext.data.Store({
  data:data,//此处为与数据结构定义相对应的数据
  fields:fields
  ...
});



因为ColumnModel的dataIndex配置选项是对应于store中的数据结构定义fields,
因此可以如下实例化ColumnModel:

Js代码 复制代码
  1. var  cm =  new  Ext.grid.ColumnModel([{   
  2.     header: "id" ,   
  3.     dataIndex: "id" //对应于grid的store的fields中的id   
  4.   },{   
  5.     header: "姓名" ,   
  6.     dataIndex: "name" //对应于grid的store的fields中的name   
  7.   },{   
  8.     header: "email" ,   
  9.     dataIndex: "email" //对应于grid的store的fields中的email   
  10.   },{   
  11.     header: "性别" ,   
  12.     dataIndex: "sex" //对应于grid的store的fields中的sex   
  13.   },{   
  14.     header: "年龄" ,   
  15.     dataIndex: "age" //对应于grid的store的fields中的age   
  16.   }   
  17. ]); 
分享到:
评论

相关推荐

    ExtJS grid过滤操作

    ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...

    extjs grid数据导出excel文件

    在EXTJS中,Grid控件是用于展示大量结构化数据的关键组件,具有丰富的功能和高度可定制性。本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先,我们要明白EXTJS Grid的数据导出到Excel的过程通常...

    ExtJs动态grid的生成

    本文将深入探讨如何在ExtJS中动态生成Grid,这是一个非常实用的功能,可以适应不断变化的数据需求和用户交互。我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味...

    Extjs4 grid使用例子

    Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **MVC架构**: Model-View-Controller(MVC)是一种设计模式,常用于大型应用的组织和管理。在ExtJS4...

    Extjs grid 中文排序问题修正

    EXTJS Grid的排序功能是基于其内部的Store对象实现的,Store中的每条记录都有一个对应的sortField和sortDir属性,用于记录当前的排序字段和排序方向。当你点击列头进行排序时,Grid会调用Store的sort方法,根据指定...

    EXTJS grid导出EXCEL文件

    在EXTJS 3.2.0版本中,Grid提供了一个功能,可以将其中的数据导出到Microsoft Excel文件中,方便进一步的数据分析和处理。 "EXTJS grid导出EXCEL文件"这个主题涉及到的主要知识点包括: 1. **EXTJS Grid组件**:...

    Extjs Grid2Grid拖拽

    在ExtJS中,Grid组件是一个非常重要的部分,它用于显示和操作大量的表格数据。"Grid2Grid拖拽"功能是指在两个ExtJS Grid之间通过鼠标拖放操作来移动或复制行数据。这种功能在数据管理、比较和操作场景中非常实用。 ...

    extjs4 对各类型store各种数据的读取 model 前台 等等

    根据提供的文件信息,本文将详细解析ExtJS 4中如何处理不同类型的Store及与之相关的数据操作、模型定义以及前端展示等内容。 ### ExtJS 4中的Store与数据管理 ...希望这些内容能帮助你更好地理解和应用ExtJS框架。

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

    Extjs动态GRID

    EXTJS动态GRID是一种基于JavaScript的前端开发框架EXTJS中的组件,用于展示数据并提供交互功能。EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的Grid Panel,它允许开发者构建灵活、可配置的数据视图,适用于大量...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    在"Extjs tree and Grid(Buffer Grid,Progress Grid)"这个主题中,我们将深入探讨这两个核心组件以及它们的特定变体——缓冲网格(Buffer Grid)和进度网格(Progress Grid)。 1. **ExtJS Tree** - 树形控件...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    - `ComboBox` 是EXTJS中的一个基础组件,它提供了文本输入框和下拉列表的功能。 - 用户可以输入文本,也可以点击下拉箭头查看预定义的选项列表。 - `ComboBox` 的数据通常通过配置 `store` 属性来设置,`store` ...

    EXTJS Grid总结例子

    本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...

    extjs grid

    EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...

    ExtJS笔记---Grid实现后台分页

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据网格(Grid)等,使得开发者能够创建交互性极强的数据展示和管理界面。这篇“ExtJS笔记——Grid...

    extjs grid示例代码

    ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...

    Extjs grid分页1

    ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...

    ExtJs6.5Grid列表导出(包含样式)

    在ExtJs 6.5版本中,开发人员经常需要实现数据导出功能,特别是对于Grid组件,这是一项常见的需求。Grid列表通常用于展示大量结构化的数据,而导出功能可以帮助用户将这些数据保存到本地,方便进一步分析或共享。...

    ExtJS4.0 分享GridHeaderFilters插件

    GridPanel是ExtJS中的一个核心组件,用于展示和操作表格数据。在GridPanel中,我们经常需要对列进行筛选以方便用户查找和分析数据。"GridHeaderFilters"插件就是这样一个工具,它允许用户直接在列头中设置筛选条件,...

Global site tag (gtag.js) - Google Analytics