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')的標題欄,下方的列標題行,最後是標題下的網格行。