`

Grid与Store的最简单的例子

阅读更多
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+servlet 分页

    - Ext JS Grid的`store`可以通过Ajax请求与Servlet交互,一般使用`proxy`配置项设置为`Ext.data.proxy.Ajax`,并配置URL指向Servlet处理分页请求的端点。 - 当用户改变页码或每页条数时,Grid会自动发送带有相关...

    Ext2[1].0框架的Grid使用介绍

    下面通过一个具体的例子来演示如何创建一个简单的Grid实例。 ##### 1. 定义ColumnModel ```javascript // 创建ColumnModel,定义四个列 var cm = new Ext.grid.ColumnModel([ { header: '编号', dataIndex: 'id' ...

    extjs gridpanel例子和简单应用

    本文将通过一个具体的例子来详细介绍ExtJS中`GridPanel`的基本用法以及如何利用`HttpProxy`、`JsonReader`、`Store`等关键对象来构建动态数据展示界面。 #### 二、核心概念介绍 1. **HttpProxy** - `HttpProxy`是...

    Extjs2.0动态加载gird的例子

    在这个例子中,我们将探讨如何在ExtJS 2.0中实现动态加载的Grid组件,这是一个非常实用的功能,尤其对于处理大量数据时,可以显著提高用户体验。 动态加载Grid意味着数据不是一次性全部加载到页面中,而是根据用户...

    ExtJS 表格面板GridPanel完整例子

    在这个例子中,我们创建了一个名为"MyApp"的应用,并在启动时创建了一个数据存储(store),包含了两个记录。然后,我们创建了一个GridPanel,设置了标题、数据源(store)、列配置(columns)和尺寸。最后,我们将...

    extjs 04_grid 单击事件新发现

    在这个例子中,`grid`参数是触发事件的Grid实例,`rowIndex`和`columnIndex`分别表示被点击的行号和列号,`e`则是事件对象。`grid.getStore().getAt(rowIndex)`用于获取对应行的数据记录,`grid.getColumnModel()....

    将RowExpander的template换成Gridpanel

    4. **将Grid Panel与Store关联**:最后,将Store与你的Grid Panel关联起来,以便数据能够正确地显示在Grid中。 ```javascript grid.bindStore(store); ``` 在这个例子中,`RowExpander4Grid.js`可能包含了实现...

    extjs构造矩阵表格

    在这个例子中,我们看到了如何通过组合多个Store和Grid的特性来构造一个矩阵视图,这对于展示大型数据集,特别是网络流量、统计信息等是非常有用的。EXTJS的这种灵活性和强大功能使其成为开发复杂数据驱动Web应用的...

    ExtJS Grid使用SimpleStore、多选框的方法

    SimpleStore是ExtJS中用于存储数据的简单内存数据存储方式,适用于数据量不大且不需要远程加载的场景。而CheckboxSelectionModel允许用户在Grid中为每行添加一个复选框,实现多选功能。本文将详细介绍如何在ExtJS ...

    EXTJSEXT实例GridPanel.

    在EXTJS中,GridPanel通常与Store结合使用,Store负责管理数据,而GridPanel则负责显示这些数据。 首先,创建一个GridPanel需要定义以下主要部分: 1. **Store**: Store是用来存储数据的,它可以是从服务器获取的...

    EXT JSON Sqlserver 分页 全部正常运行

    EXT JS的分页通常通过Store组件来实现,Store负责加载和管理数据,并与Grid进行绑定。分页配置包括页面大小(pageSize)、总计记录数(totalProperty)以及数据源(proxy),通常使用HTTP代理(Ext.data.HttpProxy)...

    Ext表格控件和树控件

    在上面的例子中,`SimpleStore` 是一个最简单的数据存储器,用于存储静态数据。 ##### 3.3 DataReader 数据读取器 `DataReader` 用于解析从服务器获取的数据,并将其转换为 `Record` 对象。通常情况下,数据是从...

    EXT 1.1 API文档以及例子

    在EXT中,"Store"是一个重要的概念,它负责管理数据,可以与各种数据源(如JSON、XML或CSV)进行交互,并将数据绑定到Grid、Tree或其他组件上。EXT 1.1.1的文档会详细介绍如何创建和使用Store,包括加载数据、执行...

    Ext + dwr 实现分页功能

    这种方式不仅提高了开发效率,还使得前端与后端之间的通信变得更加简单直接。对于那些希望快速开发出高性能Web应用的开发者来说,这是一个非常实用的解决方案。在未来的工作中,还可以进一步探索更多高级特性,比如...

    ext 的3种传参demo

    在这个例子中,`store`是数据源,`grid`是显示数据的组件,它们之间通过配置进行绑定,无需显式地传递参数。 以上是EXTJS中常见的三种传参方式。在实际开发中,开发者会根据需求灵活组合使用这些方法,以实现复杂...

    Ext Js权威指南(.zip.001

    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 ...

    extjs入门案例大全

    接着,我们看一个简单的Panel案例。EXTJS的Panel是基本的容器组件,可以包含其他组件: ```javascript Ext.onReady(function() { new Ext.Panel({ renderTo: "hello", title: "第一个", width: 300, height: ...

    ExtJs学习资料28-Ext.data.JsonStore数据存储器.doc

    grid.store = store; ``` 这里创建了一个JsonStore,指定数据来源URL和数据结构。`root`属性指定了JSON数据中包含记录的数组字段,`fields`定义了数据字段名。加载数据后,将其赋值给GridPanel的`store`属性,使数据...

    extjs ajax框架中文使用手册

    本节将通过一个简单的例子来展示如何使用Ext JS。我们将会使用Ext JS来实现一些基本的JavaScript任务。 #### Element:Ext的核心 Ext JS的核心是`Element`类,它提供了对DOM元素的操作能力。通过`Element`,开发者...

Global site tag (gtag.js) - Google Analytics