将数据显示到EXTJS网格面板中

Question

我正在尝试制作网格视图，并且能够使用硬编码数据成功完成。

var store = Ext.create('Ext.data.Store', {
        storeId: 'myData',
        //url: 'GridViewController',
        fields: [
            { name: 'Q1', type: 'int' },
            { name: 'Q2', type: 'int' },
            { name: 'Q3', type: 'int' },
            { name: 'Q4', type: 'int' },
            { name: 'Q5', type: 'int' },
            { name: 'Improvements', type: 'string' },
            { name: 'Comments', type: 'string'}],
        data: { 'items': [
        { "Q1": "1", "Q2": "2", "Q3": "4", "Q4": "4", "Q5": "5", "Improvements": "Wut Is Up", "Comments": "Nothing" },
        { "Q1": "1", "Q2": "1", "Q3": "3", "Q4": "4", "Q5": "5", "Improvements": "Wut Is Up1", "Comments": "Nothing13"}]
        },
        proxy: {
            type: 'memory',
            //url: 'GridViewController'
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    //store.load();   
    this.grid = Ext.create('Ext.grid.Panel', {
        title: 'GridView App',
        store: Ext.data.StoreManager.lookup('myData'),
        columns: [
        //{ id: 'id', header: 'ID', width: 30,
        //    sortable: true, dataIndex: 'id'
        //},
        {header: 'Q1', width: 100, sortable: true, dataIndex: 'Q1' },
        { header: 'Q2', width: 100, sortable: true, dataIndex: 'Q2' },
        { header: 'Q3', width: 100, sortable: true, dataIndex: 'Q3' },
        { header: 'Q4', width: 100, sortable: true, dataIndex: 'Q4' },
        { header: 'Improvements', width: 200, sortable: true, dataIndex: 'Improvements' },
        { header: 'Comments', width: 200, sortable: true, dataIndex: 'Comments' }
    ],
        stripeRows: true,
        //height:250,
        width: 800,
        renderTo: Ext.getBody()
    });

这很好用......但是现在我想从sql db获取数据并使用URL ...就像url：GridViewController（就像在代码中一样）... 这是我的控制器

public void GridViewController()
    {

        Response.Write("Survey Completed!");
        SqlConnection conn = DBTools.GetDBConnection("ApplicationServices2");
        string sqlquery = "Select Q1, Q2, Q3, Q4, Improvements, Comments FROM MyTable";
        SqlCommand cmd = new SqlCommand(sqlquery, conn);

        using (SqlDataReader reader = cmd.ExecuteReader())
        {
            while (reader.Read())
                //json.Add(reader.GetInt32(0), reader.GetString(1));
            reader.Close();
        }

        //cmd.Connection = conn;
        conn.Open();
        //cmd.ExecuteNonQuery();
        conn.Close();

    }

我很遗憾如何实现这一点。请帮忙。任何输入都将受到高度赞赏。

Answer 1

window.App.myData = Ext.create("Ext.data.Store", {
    "model": Ext.define(Ext.id(), {
        extend: "Ext.data.Model",
        "fields": [{ name: 'Q1', type: 'int' },
        { name: 'Q2', type: 'int' },
        { name: 'Q3', type: 'int' },
        { name: 'Q4', type: 'int' },
        { name: 'Q5', type: 'int' },
        { name: 'Improvements', type: 'string' },
        { name: 'Comments', type: 'string'}
        ]
    }),
    "storeId": "myData ",
    "useIdConfirmation": true,
    "autoLoad": true,
    "proxy": {
        "type": "ajax",
        "reader": {
            "type": "json",
            "idProperty": "Q1",
            "root": "data",
            "totalProperty": "total"
        },
        "url": "/<here you have to give controller>/<here you have to give method where u get the data>"
    }
});

//现在像这样创建你的网格

Ext.create("Ext.grid.Panel", {
    "id": "grid1",
    "border": false,
    "cls": "x-grid-custom",
    "renderTo": Ext.getBody(),
    "width": 218,
    "bodyStyle": "padding:0 0 0 0;",
    "header": false,
    "columns": {
        "id": "ColumnModel5",
        "items": [{
            "id": "Q1",
            "header": "Q1 data",
            "width": 130,
            "dataIndex": "Q1",
            "hideable": false,
            "sortable": true,
            "wrap": true
        }, {
            "id": "Q2",
            "header": "Q2 data",
            "width": 130,
            "dataIndex": "Q2",
            "hideable": false,
            "sortable": true,
            "wrap": true
        },{
            "id": "Q3",
            "header": "Q3 data",
            "width": 130,
            "dataIndex": "Q3",
            "hideable": false,
            "sortable": true,
            "wrap": true
        },{
            "id": "Q4",
            "header": "Q4 data",
            "width": 130,
            "dataIndex": "Q4",
            "hideable": false,
            "sortable": true,
            "wrap": true
        }
         .
         .
         . //do the same thing for other columns
        ]
    },
    "enableColumnMove": false,
    "enableColumnResize": false,        
    "store": "myData"
});