ExtJS入門教程04，這是一個超級好用的grid

今天進行extjs入門教程的第四篇：grid。

來一份grid嘗嘗

小伙伴們都知道extjs的grid功能強大，更清楚功能強大的東西用起來必然會復雜。今天我們就從最簡單的grid開始講解。

先來一個最簡單的grid，讓小伙伴們見識一下吧，看代碼：

Ext.onReady(function () {
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'name', type: 'string' },
            { name: 'age', type: 'int' }
        ]
    });

    var myStore = Ext.create('Ext.data.Store', {
        model: 'User',
        data: [
            { name: "qifei", age: 27 },
            { name: "qeefee", age: 26 }
        ]
    });

    var win = Ext.create("Ext.Window", {
        title: "gird demo",
        width: 300,
        height: 200,
        layout: "fit",
        items: {
            xtype: "grid",
            store: myStore,
            columns: [
                { text: "姓名", dataIndex: "name" },
                { text: "年齡", dataIndex: "age" }
            ]
        }
    });
    win.show();
});

效果如下：

看到效果小伙伴們該抱怨了：還說什么簡單，那么大一坨代碼，才出現這么個界面，這是要復雜死的節奏嗎？

小伙伴先不要抱怨，看我來給你拆解一下：

1.首先定義一個Model

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' }
    ]
});

2.其次需要創建一個store

var myStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: "qifei", age: 27 },
        { name: "qeefee", age: 26 }
    ]
});

3.最后才是我們的grid（我們這個grid是放在window中的）

var win = Ext.create("Ext.Window", {
    title: "gird demo",
    width: 300,
    height: 200,
    layout: "fit",
    items: {
        xtype: "grid",
        store: myStore,
        columns: [
            { text: "姓名", dataIndex: "name" },
            { text: "年齡", dataIndex: "age" }
        ]
    }
});
win.show();

分解以后的代碼就清晰了很多，我們使用grid的步驟就是這樣的，首先一個model，這個model是我們服務器端的實體或者數據庫中的字段相對應；然后定義一個store，這個store將使用我們第一步定義的model，並通過proxy加載數據，我們可以把store理解為數據倉庫；第三步才是我們真正要顯示的grid，這個grid將使用我們第二步定義的store作為數據源，columns包含要顯示的列。

如果你對extjs的grid感興趣，請關注下一篇：grid的異步加載數據和分頁處理