Ext.grid.Panel JSON 데이터 로드

3000 단어
Ext.onReady(function ()
{
    // store Model
    Ext.define("User", {
        extend: "Ext.data.Model",
        fields: [
            { name: "firstName", type: "string" },
            { name: "lastName", type: "string" },
            { name: "age", type: "int" },
            { name: "eyeColor", type: "string" }
        ]
    });
    var myStore = Ext.create("Ext.data.Store", {
        model: "User",
        proxy: {
            type: "ajax",
            url: "/Json/users.json",
            reader: {
                type: "json",
                root: "users"
            }
        },
        autoLoad: true
    });
    // Ext.grid.Panel 
    Ext.create("Ext.grid.Panel", {
        title: "Simple Load Json Data",
        store: myStore,
        columns: [
            { header: "FirstName", dataIndex: "firstName" },
            { header: "LastName", dataIndex: "lastName" },
            { header: "Age", dataIndex: "age" },
            { header: "EyeColor", dataIndex: "eyeColor" }
        ],
        height: 300,
        width: 400,
        renderTo: Ext.getBody()
    });
});

users.json 코드는 다음과 같습니다.
{
    "users": [
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" },
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" },
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" },
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" },
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" },
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" },
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" },
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" },
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" },
               { "firstName": "Lisa", "lastName": "[email protected]", "age": 25,"eyeColor": "Yellow" }
             
            ]
 }

좋은 웹페이지 즐겨찾기