报表GridPanel

2012-10-13

表格GridPanel１、表格GridPanel概述　　ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显

表格GridPanel
１、表格GridPanel概述
　　ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
　　表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。

２、表格应用示例
　　我们首先来看最简单的使用表格的代码：
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
   [2, 'jfox', 'huihoo','www.huihoo.org'],
   [3, 'jdon', 'jdon','www.jdon.com'],
   [4, 'springside', 'springside','www.springside.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
height:150,
width:600,
columns:[{header:"项目名称",dataIndex:"name"},
{header:"开发团队",dataIndex:"organization"},
{header:"网址",dataIndex:"homepage"}],
store:store,
autoExpandColumn:2
});
});

３、定制表格显示内容
　　调整column中的renderer，显示丰富多彩的内容。

４、EditorGridPanel
　　可编辑的表格，用于实现在线编辑表格；在column中，通过指定一个editor，也就是Field的实例来实现表格编辑功能。

５、PropertyGrid
　　属性编辑表格，只有固定的两列，一列表示属性名称，另外一列表示属性值。示例：
var grid = new Ext.grid.PropertyGrid({
    title: 'Properties Grid',
    autoHeight: true,
    width: 300,
    renderTo: 'grid-ct',
    source: {
        "(name)": "My Object",
        "Created": new Date(Date.parse('10/15/2006')),
        "Available": false,
        "Version": .01,
        "Description": "A test object"
    }
});

热点排行

Web前端

报表GridPanel