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

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":"[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[email protected]", "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')的标题栏,下方的列标题行,最后是标题下的网格行。