Extjs4组件学习--Ext.grid.Panel

本文详细介绍了ExtJS4中的GridPanel组件,它是一个强大的用于展示大量表格数据的客户端工具。GridPanel结合了数据Store和列定义,使得数据的加载、排序和过滤变得简单。文中通过代码示例展示了如何创建一个包含三列的基本GridPanel,并提到了GridPanel的标题栏、列头和数据行的结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Ext.grid.Panelxtype:gridpanel,grid

Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged <table>, GridPanel makes it easy to fetch, sort and filter large amounts of data.

Grids are composed of two main pieces - a Store full of data and a set of columns to render.

Grid是一个在客户端显示大量表格数据的很好的方式,本质上就是一个增强的 <table>, GridPanel使它非常简单的进行读取,排序和过滤大量数据。

Grids由两个主要的部件组成,一个是填满数据的仓库(Store),一个是设置的一些列字段。

基本的GridPanel

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline. In most apps we would be placing the grid inside another container and wouldn't need to use the height, width and renderTo configurations but they are included here to make it easy to get up and running.

The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath and finally the grid rows under the headers.

上面的代码产生一个包含三列的简单网格(grid)。我们指定一个仓库将装载内存中的JSON数据。在大多数的应用程序中,我们将grid放在其它容器的内部,不需要指定高度,宽度和renderTo配置。但是他们很容易得到和运行。

上面我们创建的网格包含一个标题为('Simpsons')的标题栏,下方的列标题行,最后是标题下的网格行。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值