`
421728862
  • 浏览: 8562 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

extjs中的mapping 和 dataIndex

 
阅读更多

在extjs的项目开发中,有时候中弄不清record中的 mapping和columnModel中的dataIndex的区别,在这里做下备注

数据集  data:

var MyRecord = Ext.data.Record.create([
             {name: 'title'},
             {name: 'username', mapping: 'author'},
             {name: 'loginTimes', type: 'int'}
]);

 

 var myReader = new Ext.data.JsonReader({
      totalProperty: "results", 
      root: "rows",       
      id: "id" 
}, MyRecord);

 

 

这里的JsonReader可以解析下面的JSON数据

 

{ 'results': 2, 'rows': [
    { id: 1, title: '测试', author: '小王', loginTimes: 3 },
    { id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ]
}

 

在创建myRecord中  {name: 'username', mapping: 'author'} 中就用到了mapping,在数据中没有。record就会解析json数据中的  author 属性。

总结 mapping的作用是 reader解析数据的时候,与数据做匹配解析用的

 

dataIndex是column中列对应的数据集字段

 

    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id',sortable:true},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id',mapping:1},
            {name: 'name',mapping:0},
            {name: 'descn',mapping:2}
        ])
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        cm: cm
    });

 dataIndex是在ColumnModel中。Mapping是在render中。dataIndex是关联columnMode和store中render的name。  mapping是关联 store和 data数据的

 

 

 

 

 

 

分享到:
评论

相关推荐

    extjs4 record mapping参数解释

    在本篇文章中,我们将深入探讨 ExtJS 4 中 `record mapping` 参数的相关概念与使用方法。这是一项重要的功能,能够帮助开发者更好地管理数据模型与数据交互。通过理解这些概念,可以更加高效地开发出功能丰富的应用...

    ExtJs_grid.txt

    `ArrayReader`中的`mapping`属性用于映射数据字段到实际数据的位置,例如`sex`字段对应于数据数组中的第二个元素(索引为1)。 #### 四、Grid 的渲染和事件监听 在HTML中定义Grid容器后,通过创建`GridPanel`实例...

    ExtJs grid多选时获取选中的所有值

    在Web应用开发中,ExtJs 是一款非常强大的JavaScript框架,它能够帮助开发者快速构建复杂的用户界面。其中,Grid Panel(简称 Grid)是ExtJs中最常用的一个组件之一,用于展示表格数据。在实际业务场景中,经常需要...

    ExtJs表格grid中文排序函数方法

    在ExtJs框架中,实现中文排序功能是一件非常重要的事情。今天,我们将详细介绍如何使用ExtJs实现中文排序,特别是使用Ext.data.Store.prototype.createComparator()函数来实现中文排序。 首先,让我们来了解 Ext....

    ExtJs中处理后台传过来的date对象显示到页面上

    在ExtJs中处理后台传递的Date对象并将其正确地显示在页面上,通常涉及到数据模型(Model)、存储(Store)、列模型(ColumnModel)以及渲染器(Renderer)的配置。以下是一个详细的步骤说明: 1. **创建数据模型...

    Extjs Grid 用法 pdf版

    本文将详细介绍 Extjs 中 Grid 组件的基本用法,包括如何创建 Grid、如何配置列模型 (Column Model)、如何处理不同格式的数据源以及如何在 Grid 中添加 CheckBox。 #### 二、Grid 组件基础 ##### 2.1 构建基本的 ...

    extjs gridpanel例子和简单应用

    在现代Web应用程序开发中,特别是基于ExtJS框架的应用程序中,`GridPanel`是处理表格数据展示的一个非常重要的组件。它不仅可以帮助开发者轻松地展示数据,还提供了丰富的交互功能,如排序、分页等。本文将通过一个...

    extjs 3.2.1 项目

    在本文中,我们将深入探讨ExtJS 3.2.1的主要特性、组件和其在项目开发中的应用。 1. **主要特性**: - **组件化**:ExtJS 3.2.1的核心是其强大的组件模型,允许开发者将UI拆分为独立、可重用的部分。 - **数据...

    EXTJS分页全面分析

    在本篇内容中,我们将深入了解EXTJS中`GridPanel`分页技术的具体实现方法,并通过实例代码详细解析其工作原理和技术要点。 #### 一、EXTJS GridPanel分页概述 在EXTJS框架中,`GridPanel`组件是一种常用的数据展示...

    JavaScript的ExtJS框架中表格的编写教程

    通过上述讲解,我们可以了解到ExtJS框架中表格组件的编写过程和相关知识点。ExtJS的表格通过一系列丰富的API和配置项,为开发人员提供了强大的自定义能力,可以创建出功能完备且视觉效果良好的表格界面。无论是简单...

    Extjs EditorGridPanel中ComboBox列的显示问题

    在EXTJS中,EditorGridPanel是一种可编辑的表格组件,它允许用户直接在表格单元格内编辑数据。然而,当在EditorGridPanel中嵌入ComboBox(下拉选择框)作为编辑器时,可能会遇到一个问题,即ComboBox显示的不是其...

    Struts2+Json+ExtJS分页

    在本案例中,JSP页面负责加载ExtJS相关的JavaScript和CSS文件,并提供一个简单的链接来触发数据展示操作。 ```jsp *" pageEncoding="gb2312" %> String basePath = request.getScheme() + "://" + request....

    Ext-实现带查询以及分页的列表

    在EXTJS框架中,实现一个带查询和分页功能的列表是常见的需求,主要涉及到数据存储(Store)、数据读取(Reader)、网格面板(GridPanel)和分页工具栏(PagingToolbar)。下面将详细解释如何使用EXTJS来实现这一...

    asp.net Ext grid 显示列表

    在Web开发中,特别是ASP.NET应用程序中,展示和管理表格数据是非常常见的需求。Ext JS 提供了一个强大的`Ext Grid`组件,可以帮助开发者轻松地在网页上创建高度可定制且功能丰富的数据表格。本文将详细介绍如何使用...

Global site tag (gtag.js) - Google Analytics