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);

运行显示看看结果吧