Extjs中grid采用json进行数据绑定的实例
来源:互联网 发布:雪肌精淘宝旗舰店 编辑:程序博客网 时间:2024/03/29 15:19
刚开始学习extjs,真是摸不着头呀。
做了半天才搞出一个grid显示数据。在网上找了个数据做了个测试。
一下是代码。
首先:把ext-3.1.0文件夹放到根目录下。
新建一个Default.aspx。
view plaincopy to clipboardprint?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" mce_href="ext-3.1.0/resources/css/ext-all.css" />
<mce:script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js" mce_src="ext-3.1.0/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="ext-3.1.0/ext-all-debug.js" mce_src="ext-3.1.0/ext-all-debug.js"></mce:script>
<mce:script type="text/javascript" src="js/grid1.js" mce_src="js/grid1.js"></mce:script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="grid"></div>
<div id="pad"></div>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" mce_href="ext-3.1.0/resources/css/ext-all.css" />
<mce:script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js" mce_src="ext-3.1.0/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="ext-3.1.0/ext-all-debug.js" mce_src="ext-3.1.0/ext-all-debug.js"></mce:script>
<mce:script type="text/javascript" src="js/grid1.js" mce_src="js/grid1.js"></mce:script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="grid"></div>
<div id="pad"></div>
</div>
</form>
</body>
</html>
在创建一个名为grid1.js的js文件显示grid。
view plaincopy to clipboardprint?
Ext.onReady(function() {
var proxy = new Ext.data.HttpProxy({ url: 're.aspx'});//获取json数据
var reader = new Ext.data.JsonReader(
{
totalProperty: "results",
root: "datastr",
id: 'productID'
},
[
{ name: 'productID' },
{ name: 'productName' },
{ name: 'productCode'}
]
);
var store = new Ext.data.Store(
{
proxy: proxy,
reader: reader
});
store.load(); //加载数据
//创建grid
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width: 650,
store: store,
loadMask: true,
viewConfig: {
forceFit: true
},
autoHeight: true,
//autoExpandColumn:'descn',
columns: [
{ header: "id", sortable: true, dataIndex: 'productID' },
{ header: 'name', dataIndex: 'productName', width: 80 },
{ header: "code", sortable: true, dataIndex: 'productCode' }
],
frame: true, //表格外加边框
collapsible: true,
animCollapse: false
});
grid.render();
});
Ext.onReady(function() {
var proxy = new Ext.data.HttpProxy({ url: 're.aspx'});//获取json数据
var reader = new Ext.data.JsonReader(
{
totalProperty: "results",
root: "datastr",
id: 'productID'
},
[
{ name: 'productID' },
{ name: 'productName' },
{ name: 'productCode'}
]
);
var store = new Ext.data.Store(
{
proxy: proxy,
reader: reader
});
store.load(); //加载数据
//创建grid
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width: 650,
store: store,
loadMask: true,
viewConfig: {
forceFit: true
},
autoHeight: true,
//autoExpandColumn:'descn',
columns: [
{ header: "id", sortable: true, dataIndex: 'productID' },
{ header: 'name', dataIndex: 'productName', width: 80 },
{ header: "code", sortable: true, dataIndex: 'productCode' }
],
frame: true, //表格外加边框
collapsible: true,
animCollapse: false
});
grid.render();
});
数据源re.aspx.cs页面
view plaincopy to clipboardprint?
string str = "{ /"results/":19,/"datastr/":[ { /"productID/":/"1/",/"productCode/":/"083-QMC16009-19/B/",/"productName/":/"C1系列600柜/"}, { /"productID/":/"2/",/"productCode/":/"083-QMC1-600B1-R/L/",/"productName/":/"600侧山左右各1/"}, { /"productID/":/"3/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山/"}, { /"productID/":/"4/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山(两边铣)/"}, { /"productID/":/"5/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"6/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"7/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"8/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"9/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"10/",/"productCode/":/"083-QMC1-600SF2H/",/"productName/":/"滑道条/"}, { /"productID/":/"11/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"12/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"13/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"14/",/"productCode/":/"F-QMC1600L2-3-1/",/"productName/":/"电视柜/"}, { /"productID/":/"15/",/"productCode/":/"F-QMC1600L2-3CDB/",/"productName/":/"顶底山条/"}, { /"productID/":/"16/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"17/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"18/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"380/500后身板/"}, { /"productID/":/"19/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"后身板/"} ]} ";
Response.Write(str);
string str = "{ /"results/":19,/"datastr/":[ { /"productID/":/"1/",/"productCode/":/"083-QMC16009-19/B/",/"productName/":/"C1系列600柜/"}, { /"productID/":/"2/",/"productCode/":/"083-QMC1-600B1-R/L/",/"productName/":/"600侧山左右各1/"}, { /"productID/":/"3/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山/"}, { /"productID/":/"4/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山(两边铣)/"}, { /"productID/":/"5/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"6/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"7/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"8/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"9/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"10/",/"productCode/":/"083-QMC1-600SF2H/",/"productName/":/"滑道条/"}, { /"productID/":/"11/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"12/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"13/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"14/",/"productCode/":/"F-QMC1600L2-3-1/",/"productName/":/"电视柜/"}, { /"productID/":/"15/",/"productCode/":/"F-QMC1600L2-3CDB/",/"productName/":/"顶底山条/"}, { /"productID/":/"16/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"17/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"18/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"380/500后身板/"}, { /"productID/":/"19/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"后身板/"} ]} ";
Response.Write(str);
运行显示看看结果吧
- Extjs中grid采用json进行数据绑定的实例
- ExtJs:grid中json的数据绑定(转)
- ExtJs与JSON格式数据绑定的方法(grid)
- extjs的grid应用(java 使用json绑定数据 翻页) zz
- EXTjs grid与json数据
- EXTjs grid与json数据
- EXTJs中Grid合计实例
- ExtJs的Grid组件配合struts2返回json数据
- Extjs grid的store数据转成json数组
- 根据Extjs中grid列表表头自动排序导出数据的实例
- ExtJs中grid数据格式化
- ExtJs中grid的dataIndex为传回Json数据的一个对象的一个属性时处理方式
- ExtJS:Grid数据导出至excel实例
- ExtJs与JSON格式数据绑定的方法
- extjs json grid sample(设想绑定odata数据源)
- ExtJs中Grid加载数据的超时时间的设置
- zk 数据绑定实例(grid嵌套)
- ExtJs中Grid的用法
- hdu 3488 && hdu 3435 && 1853
- 光脚丫学LINQ(021):在LINQ中使用存储过程(C#)
- 老太太dfqawefawawf
- 学习jsp,大家有什么好的建议。
- 抓取大众点评评论的代码
- Extjs中grid采用json进行数据绑定的实例
- 日记0905
- 20,21,22-Hibernate容器映射技术(Set、List、Map) -mldn学习笔记 -hxzon
- 解析Unicode编码和Java char 类型
- 卡地亚 Cartier
- amfphp传递中文乱码问题
- CS8900A+QQ2440+2.6.32,莫名其妙地OK了——特记录一下
- 打开word提示配置进度解决方法
- 华为面试题