Ext-grid-Panel

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.

Grids 是一种优秀展示大量数据的表格在客户端。本质上是一种table,GridPanel能够简单的提取,排序和过滤大量的数据。

Girds有主要的两块构成,一个是存储数据,和呈现数据的列组成。

Basic 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: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: '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 heightwidth 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.

上面的代码生成一个简单的网格和三列。我们加载指定存储数据,数据来自于JSON。在大多数应用程序我们会将网格内另一个容器,不需要使用高度、宽度和renderTo配置但他们这里包括使它容易启动和运行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值