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

最新推荐文章于 2025-05-31 11:34:28 发布

原创最新推荐文章于 2025-05-31 11:34:28 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #email #header #json #table #filter

ExtJs 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了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')的标题栏,下方的列标题行,最后是标题下的网格行。