您的位置：首页 > Web前端 > JavaScript

VS2010C#MVC+EXTJS4.07 最简单的grid绑定后台数据例子

2011-11-16 23:22 381 查看

搞了两天才把这控件和后台关联起来，网上的例子大多是低版本的写法完全不一样！而且例子中大多是前台数据搞半天后台的数据老是传不到ＥＸＴ里，真想骂人！

TestModel1.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Tesz.Web.App.Models
{
public class TestModel1
{
public string UserName { get; set; }
public string Sex { get; set; }
public string Age { get; set; }
public string XueHao { get; set; }
public string BanJi { get; set; }
}
}

Controller中

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult DoQuery()
{
List<TestModel1> litestModel = new List<TestModel1>();
litestModel.Add(new TestModel1()
{
UserName = "王小红",
Sex = "男",
Age = "21",
XueHao = "北大",
BanJi = "计算机一班"
});
litestModel.Add(new TestModel1()
{
UserName = "李男",
Sex = "女",
Age = "22",
XueHao = "清华",
BanJi = "中文系一班"
});
return Json(litestModel, JsonRequestBehavior.AllowGet);
}

Test1.aspx中

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test1</title>
<link rel="stylesheet" type="text/css" href="../../Components/Extjs4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../Components/Extjs4.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.Loader.setPath('Ext.ux', '../../Components/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
Ext.onReady(function(){
Ext.define('MyData',{
extend: 'Ext.data.Model',
fields: [
//第一个字段需要指定mapping，其他字段，可以省略掉。
{name:'UserName',mapping:'UserName'},
'Sex',
'Age',
'XueHao',
'BanJi'
]
});
//创建数据源
var store = Ext.create('Ext.data.Store', {
model: 'MyData',
proxy: {
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'GetTestData',

reader: {
type: 'json',
root: 'items',
//totalProperty  : 'total'
}
},
autoLoad: true
});

//创建Grid
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{text: "姓名", width: 120, dataIndex: 'UserName', sortable: true},
{text: "性别", flex: 1, dataIndex: 'Sex', sortable: false},
{text: "年龄", width: 100, dataIndex: 'Age', sortable: true},
{text: "学号", width: 100, dataIndex: 'XueHao', sortable: true},
{text: "班级", width: 100, dataIndex: 'BanJi', sortable: true}
],
height:400,
width:480,
x:20,
y:40,
title: 'ExtJS4 Grid示例',
renderTo: 'demo',
viewConfig: {
stripeRows: true
}
})
})
</script>
<div id="demo"></div>

</body>
</html>

输出:

样式应用:

.xxxxx   .x-grid-cell
{
background-color: #000000;
border-bottom: 1px solid #EDEDED;
border-top: 1px solid #FAFAFA;
font: 12px tahoma,arial,verdana,sans-serif;
}

grid = Ext.create('Ext.grid.Panel', {
store: store,
cls: 'xxxxx'
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航