`
GoodWell
  • 浏览: 29692 次
  • 性别: Icon_minigender_1
  • 来自: 河北邢台
社区版块
存档分类

ExtJs中Ext.grid.GridPanel使用实例

 
阅读更多

关键对象:
Ext.data.HttpProxy  创建访问服务端的代理
Ext.data.JsonReader  创建读取器
Ext.data.Store    数据存储器
Ext.grid.ColumnModel  gridPanel呈现时,显示的列集合
Ext.PagingToolbar  gridPanel分页
Ext.grid.GridPanel  数据呈现

var proxy = new Ext.data.HttpProxy({
  url:'yourserverurl.ashx?action=get',
  method:'GET'
});
var readerOption = {root:'Data',totalProperty:'TotalRecord',id:'ID'};
var product = Ext.data.Record.create([
  {name:'ID',mapping:'ID'},//name:js下对象属性名称,mapping:对应服务器端属性名称
  {name:'Name'}
]);
var reader = new Ext.data.JsonReader(
  readerOption,
  product
);
var store = new Ext.data.Store({
  proxy:proxy,
  reader:reader,
  remoteSort:false//用于客户端排序[点击列头时升序/倒序]
});
var cm = new Ext.grid.ColumnModel({
  columns:[
    {header:'序号',tooltip:'提示序号',align:'right',width:40,dataIndex:'ID'},
    {header:'产品名称',tooltip:'XX产品名称',align:'left',width:100,dataIndex:'Name'}//注意此dataIndex要与product中的name对应,且却分大小写
  ],
  defaults:{sortable:false}//不允许客户端点击列头排序,可以打开s
});
//cm用于显示gridpanel时的列呈现
var pageBar = new Ext.PagingToolbar({
  pageSize:25,
  store:store,
  displayInfo:true,
  displayMsg:'总记录数{0}-{1}of{2}',
  emptyMsg:'没有记录'
});
var grid = new Ext.grid.GridPanel({
  store:store,
  renderTo:'div_grid',//html页面上面必须要有以此div_grid为id的标签
  cm:cm,
  columnLines:true,
  frame:true,
  autoScroll:true,
  loadMask:true,
  autoExpandColumn:'Position',
  height:500,
  width:800,
  stripeRows:true//相邻两行背景色不同  
});
grid.store.on('load',function(){});//在服务器数据获取后,呈现之前自行处理结果集[比如,增加合计]
grid.loadMask.msg='加载中...';
grid.load({params:{start:0,limit:25},callback:overLoad});//callback用于在数据加载完成后处理页面的按钮状态,或其他业务需求。如果无其他需求可以去掉callback
grid.load({params:{start:0,limit:25}});
以上解释属个人理解,如有不妥,望指正。

分享到:
评论

相关推荐

    Ext.grid.GridPanel属性祥解

    `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。对于初学者或者希望深入理解`GridPanel`特性的Web开发人员来说,掌握其...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var ...以上就是关于 `var editor = new Ext.ux.grid.RowEditor` 的详细解析,希望对使用ExtJs框架的开发者有所帮助。通过合理地配置和使用 `RowEditor`,可以极大地提高Web应用的交互性和用户体验。

    ExtJs_grid.txt

    在HTML中定义Grid容器后,通过创建`GridPanel`实例并传入`Store`和`ColumnModel`来渲染Grid。示例代码如下: ```javascript <div id='grid'> var grid = new Ext.grid.GridPanel({ el: 'grid', ds: ds, cm: cm ...

    EXTJSEXT实例GridPanel.

    这个实例"EXTJSEXT实例GridPanel"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件,它允许开发者以网格形式展示数据,支持多种功能,如排序、分页、筛选、编辑等。在EXTJS中,...

    ExtJs框架系列之ProgressGrid进度条

    ProgressColumn是Ext.ux.grid的一个扩展,它允许你在ExtJs的GridPanel中添加一列专门用于显示进度条。这对于监控任务进度、数据加载状态或者任何需要实时反馈的情况非常有用。下面,我们将详细介绍如何使用...

    Ext表格获取后台数据

    ExtJS是一款基于JavaScript的RIA(Rich Internet Application,富互联网应用)框架,它提供了许多强大的功能和组件,其中之一就是表格组件Ext.grid.GridPanel。 Ext.grid.GridPanel是一个功能强大的表格控件,它...

    EXT GridPanel获取某一单元格的值

    - `grid`: 引发事件的GridPanel实例。 - `rowIndex`: 用户点击的行的索引。 - `columnIndex`: 用户点击的列的索引。 - `e`: 事件对象,包含有关点击的更多信息。 3-9. 获取单元格值的步骤: - `editCell_row =...

    ExtJS之Grid

    3. **配置GridPanel**:最后配置并实例化`Ext.grid.Panel`,并将之前创建的存储添加到GridPanel中。 #### 三、模型和存储 - **模型(Model)**: - 定义模型可以使用`Ext.define`方法。模型是一系列字段的集合,...

    Extjs2.02 Gridpanel

    创建完ColumnModel和Store后,我们可以创建GridPanel实例: ```javascript var grid = new Ext.grid.GridPanel({ store: ds, cm: cm, renderTo: Ext.getBody() }); ``` `store`属性指定了数据源,`cm`设置...

    Ext的gridpanel控件二次加载问题

    在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据表格。...无论是使用全局变量还是优化加载机制,关键在于确保GridPanel实例和数据的正确管理,以保持良好的用户体验。

    ExtJS 表格面板GridPanel完整例子

    在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们理解GridPanel的基本结构。GridPanel通常由以下几个主要部分组成: 1. **Store**: 存储数据的...

    extjs前台分页插件PagingStore!

    在ExtJS 3.x版本中,PagingStore是与GridPanel结合使用,使得用户可以逐页加载和浏览数据,而无需一次性加载所有记录,从而减轻服务器压力。 PagingStore的工作原理: 1. **连接数据源**:PagingStore通常与远程...

    ExtJS介绍以及GridPanel

    3. 创建列模型(ColumnModel):定义GridPanel的列,包括列的标题、数据字段绑定、宽度等,例如`Ext.grid.ColumnModel`。 4. 实例化GridPanel:配置GridPanel的各种属性,如高度、宽度、是否可拖动列等,然后将...

    Ext3.4.0复杂(多行)表头+锁定多列例子

    2. 创建GridPanel实例,并配置所需数据源(store)。 3. 定义多行表头,创建多个HeaderContainer,设置它们的布局和嵌套关系。 4. 使用LockingView或LockingGridPanel,指定哪些列需要被锁定。 5. 配置列模型...

    extjs xtype

    11. `grid` - `Ext.grid.GridPanel`:标准的表格组件,用于展示数据。 12. `paging` - `Ext.PagingToolbar`:分页工具栏,用于分页浏览大量数据。 13. `panel` - `Ext.Panel`:面板组件,通常用作容器,可以包含标题...

    GridPanel属性详解

    `Ext.grid.GridPanel` 是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。接下来,我们将详细探讨`Ext.grid.GridPanel`的一些关键属性。 #### ...

    Extjs中文教程2.x

    - **示例**: 使用 `Ext.Fx` 和 `Ext.Element` 类中的动画函数实现动态效果。 #### 五、元素操作与模板 **5.1 元素操作** - **工具**: `Ext.DomHelper` 类提供了创建、操作 DOM 元素的方法。 - **示例**: `Ext....

    extjs 实现动态表头

    在IT领域,特别是Web开发中,ExtJS是一个广泛使用的JavaScript框架,它提供了丰富的用户界面组件,包括表格(Grid)等。动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构...

    ExtJS3总结内容

    或者在ExtJS的XML布局中使用: ```xml ``` #### vtype详解 虽然题目中提及了`vtype`,但在提供的内容中并未详细展开。`vtype`在ExtJS中主要用于表单验证,它定义了一组预设的验证规则,如`email`, `url`, `date`...

    extjs gridpanel例子和简单应用

    ### ExtJS GridPanel 使用详解及示例 #### 一、引言 在现代Web应用程序开发中,特别是基于ExtJS框架的应用程序中,`GridPanel`是处理表格数据展示的一个非常重要的组件。它不仅可以帮助开发者轻松地展示数据,还...

Global site tag (gtag.js) - Google Analytics