`
kidiaoer
  • 浏览: 821977 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

在extjs中,用GridPanel来显示数据

阅读更多
在extjs中,用GridPanel来显示数据,需要用到Store来处理,详细就不多说了,因为基本上看了下在的代码应该
知道如何去处理数据了,如果看得一头雾水,建议还是先回去看看ext的基础说明吧。
var store = new Ext.data.SimpleStore({
// fields的取值应与下面columns的dataIndex值对应,注意大小写
        fields: ['company', 'price', 'change', 'pctChange', 'lastChange'],
        data : [
        ['AL', '0.1', 'The Heart of Dixie', '6', new Date()],
        ['AK', '22222', 'The Land of the Midnight Sun', '7', new Date()],
        ['IN', '109.1', 'The Hospitality State', '8', new Date() ]
        ]
});
var grid = new Ext.grid.GridPanel({
    store: store, // 数据
    columns: [ // 列名, dataIndex应对应store中的fields, 指明显示某个field的数据
        {header: "Company", width: 200, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 120, sortable: true, renderer:
                  Ext.util.Format.usMoney, dataIndex: 'price'},
        // 货币格式
        {header: "Change", width: 120, sortable: true, dataIndex: 'change'},
        {header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
        {header: "Last Updated", width: 135, sortable: true,
          renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        // 日期格式
    ],
    viewConfig: {
        forceFit: true
    },
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    width:600,
    height:300,
    frame:true,
    collapsed: false, // 默认是展开状态
    collapsible: true, // 自动出现 expand/collapse toggle button, 上下收展的按纽
    titleCollapse: true, //collapsible: true,点击title也可以收展
    hideCollapseTool: true, //隐藏上下或左右按纽
    // 如果是放到 viewPort中,region: 'west',那么就变成了左右收展的按纽, region: 'north'又变成了上下收展的按纽
    title:'test title', // 表格标题
    header: false, // 不创建标题栏
    headerAsText: false, // 如果有标题栏, 隐藏标题栏
    iconCls:'icon-grid', // pressed:true, 设置按纽状态为按下的状态,
    tbar:[{ pressed:true, text:'刷新', handler:function(){alert('q');} }], //表格的工具栏
    tools:[ // 与title同一栏的按纽
          {id:"save"},
          {id:"help", handler:function(){Ext.Msg.alert('help','please help me!');}},
          {id:"close"}
          // 按纽取值如下, close,minimize ,maximize ,restore ,gear ,pin ,unpin
          // toggle, down ,refresh ,minus ,plus ,help ,search ,save ,right ,left ,up
          ]
});
grid.render('grid');
grid.addListener( 'rowclick', function( g, rowIdx, eobj ) { // 对grid的行添加点击事件
        var rd = store.getAt(rowIdx); // 返回是的一个 Record. Store包含的就是Record[]
        //alert(rd.get('id'));
        //substore.removeAll(); // 清除另一个store,
        //substore.addSorted(rd); // 给另一个store在原来的排序方式下添加一个record
});
分享到:
评论

相关推荐

    Extjs中的GridPanel

    GridPanel 是 ExtJS 中的核心组件之一,它提供了一种高效、可定制的方式来展示大量结构化数据。在这个主题中,我们将深入探讨 GridPanel 的关键特性和使用方法。 1. **GridPanel 基本结构**: GridPanel 包含了行...

    给Extjs的GridPanel增加“合计”行

    在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先,我们需要...

    Extjs入门教程(treePanel和GridPanel)

    总的来说,这门入门教程将带你进入ExtJS的世界,通过TreePanel和GridPanel的实践,你将掌握基本的组件使用和数据管理技巧,为构建更复杂的企业级应用打下基础。记得在实践中不断探索和实验,理论结合实际,才能真正...

    ExtJS介绍以及GridPanel

    在实际应用中,GridPanel还可以与其他组件结合,比如使用Toolbar提供操作按钮,或者嵌入其他复杂的组件,如Charts,以实现数据分析和可视化。 除了GridPanel,ExtJS还提供了许多其他组件,如FormPanel(用于创建...

    ExtJS 表格面板GridPanel完整例子

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

    ExtJs GridPanel双击事件获得双击的行

    在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...

    EXTJS_GridPanel_ColumnModel_列的宽度随数据变化而变化

    EXTJS的GridPanel是其组件库中的核心组件之一,用于展示数据网格,广泛应用于Web应用的数据展示。在EXTJS中,ColumnModel是用来定义GridPanel列结构和行为的关键部分。这篇博客"EXTJS_GridPanel_ColumnModel_列的...

    通过Servlet让Extjs GridPanel 显示数据库数据.docx

    接下来,在HTML页面中使用Extjs GridPanel组件来展示数据。 ```html <!DOCTYPE html> 后台登陆页面 <!-- 引入Extjs CSS和JS文件 --> <script type="text/javascript" src="path/to/ext-base.js"></script>...

    ExtJs GridPanel延时加载.rar

    GridPanel是ExtJs中的核心组件之一,它提供了丰富的功能来展示和操作表格数据。你可以通过配置列、排序、过滤、分页等功能来定制你的表格。GridPanel通常与Store配合使用,Store负责管理数据,而GridPanel负责展示...

    Extjs2.02 Gridpanel

    EXTJS GridPanel 是EXTJS库中的核心组件之一,尤其在EXTJS 2.02版本中,它提供了强大的表格展示和交互功能,对于初学者来说极具学习价值。GridPanel不仅能够处理基本的表格操作,如单选、多选、排序、改变列宽等,还...

    ExtJS4.0下的gridPanel组建完全版

    在ExtJS 4.0版本中,GridPanel组件是其核心特性之一,它允许开发者创建数据密集型的表格展示,提供了丰富的功能和定制选项。这篇内容将深入探讨GridPanel在ExtJS 4.0中的应用及其相关知识点。 首先,我们来看...

    EXTJS.GRIDPANEL 日期格式

    例如,对于`time1`列,我们使用了`Ext.util.Format.dateRenderer('Y-m-d')`来将日期格式化为“年-月-日”的形式显示在网格中。 ```javascript renderer:Ext.util.Format.dateRenderer('Y-m-d'), ``` ### 三、日期...

    Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    首先,需要了解ExtJS中的GridPanel组件,这是一个用于显示表格数据的强大组件,它提供了诸多配置项来定制网格的行为和外观。在实现拖拽功能时,我们首先要确保两个GridPanel组件都已经配置好,并且各自的store已初始...

    extjs&使用grid显示数据参照.pdf

    在EXTJS中,GridPanel是一种强大的组件,常用于展示结构化的数据,类似于电子表格。它提供了用户友好的界面,能够方便地从服务器或数据库加载数据并进行显示。本章主要探讨如何利用GridPanel来实现这一功能。 首先...

    Extjs4 GridPanel 的几种样式使用介绍

    在本文中,我们将深入探讨ExtJS4中的GridPanel样式及其选择模式。GridPanel是ExtJS框架中用于展示数据的一种重要组件,它允许用户以表格形式查看、操作和管理大量信息。 首先,我们来看一个简单的GridPanel示例。在...

    Extjs让Gridpanel组件自动滚屏

    刚学习了Ext的开发框架,...找了很久,也没有找到框架的相应控制方法,然后在网上找了很久,也没有找到有人给去示例,无奈就只能自己写JS来控制了。为了给大家提供方便,这里我把我的探索结果发出来供大家借鉴参考。

    Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法

    在ExtJS中,GridPanel是用于展示数据的组件,它以表格的形式呈现各种信息。GridPanel提供了丰富的功能,包括排序、分页、列选择等。然而,在实际开发中,我们可能会遇到一个问题,即隐藏的列仍然会在列菜单的`...

    extjs动态生成表格,前台+后台

    在本文中,我们将深入探讨如何使用ExtJS框架在前端动态生成表格,并结合后端数据进行展示。ExtJS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...

    extjs gridpanel例子和简单应用

    通过以上分析可以看出,在ExtJS中利用`GridPanel`展示数据时,需要通过多个对象进行配合来完成数据的加载、解析、展示等功能。这些对象包括`HttpProxy`、`JsonReader`、`Store`、`ColumnModel`和`PagingToolbar`等。...

    汇总Extjs中GridPanel的各个属性与方法.doc.docx

    ExtJS 是一个强大的...以上就是 ExtJS 中 GridPanel 的一些核心属性和方法,它们共同构建了一个功能强大的数据展示和交互界面。在实际开发中,可以根据需求灵活配置和使用这些组件,以实现各种复杂的数据管理功能。

Global site tag (gtag.js) - Google Analytics