[英]Display data into an EXTJS Grid Panel
I am trying to make a gridview and I am able to do that successfully using hardcoded data. 我正在尝试制作gridview,并且能够使用硬编码数据成功地做到这一点。
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()
});
This works fine... But now I want to get data from sql db and use URL... like url:GridViewController (like in the code)... here's my contoller 效果很好...但是现在我想从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();
}
I am lost as to how to implement this. 我不知道如何实现这一点。 Please help. 请帮忙。 Any Input will be highly appreciated. 任何输入将不胜感激。
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>"
}
});
//Now Create ur grid like this //现在像这样创建您的网格
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"
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.