zoukankan      html  css  js  c++  java
  • ExtJS +Asp.NET实践(1)GridPanel与服务器端数据交互

    说明:1.我使用的版本为ext2.3版本

    2.GridPanleDemo.aspx //前端承载数据实现代码

    3.GridPanleStoreDemo.aspx//服务器端数据实现:主要返回JSON字符串

    代码如下:

    1>.GridPanleDemo.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridPanleDemo.aspx.cs"
        Inherits="WebApplication1.ext2_3Pro.eDemo1" %>

    <!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></title>
        <link rel="stylesheet" type="text/css" href="../ext-2.3.0/resources/css/ext-all.css" />
        <script type="text/javascript" src="../ext-2.3.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext-2.3.0/ext-all.js"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
                //模板列
                var cm = new Ext.grid.ColumnModel([
                    { header: '编号', dataIndex: 'id', sortable: true },
                    { header: '名称', dataIndex: 'name' },
                    { header: '描述', dataIndex: 'descn' }
                    ]);
                //数据源
                var ds = new Ext.data.JsonStore({
                    proxy: new Ext.data.HttpProxy({
                        data:[],
                        url: "GridPanleStoreDemo.aspx",//服务器端数据返回页面,以JSON字符串返回
                        method: "POST",
                        success: function (response, opts) {
                            var obj =Ext.decode(response.responseText);
                            ds.proxy = new Ext.data.MemoryProxy(obj);
                        },
                        failure: function () { Ext.Msg.alert("Failure"); }
                    }),
                    //JsonStore不支持如下的数据源定义方式fields
    //                reader: new Ext.data.ArrayReader({},
    //                [
    //                    { name: 'id' },
    //                    { name: 'name' },
    //                    { name: 'descn' }
    //                ])
                    fields: [
                        { name: 'id' },
                        { name: 'name' },
                        { name: 'descn' }
                    ]
                });
                ds.load();
                var grid = new Ext.grid.GridPanel({
                    title: 'GridPanel与后台交互数据演示',
                    el: 'grid',
                    ds: ds,
                    cm: cm,
                    frame: true,
                    1500,
                    height: 800,
                    viewConfig: {
                        forceFit: true
                    },
                    sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                    loadMask: {msg:'数据正在加载中,请稍后.....'}
                });
                grid.render();
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="grid">
        </div>
        </form>
    </body>
    </html>
    2>.GridPanleStoreDemo.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridPanleStoreDemo.aspx.cs" Inherits="WebApplication1.ext2_3Pro.GridPanleStoreDemo" %>
    3>.GridPanleStoreDemo.aspx.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Script.Serialization;

    namespace WebApplication1.ext2_3Pro
    {
     public partial class GridPanleStoreDemo : System.Web.UI.Page
     {
      protected void Page_Load(object sender, EventArgs e)
      {
                IList<Users> userList=new List<Users>();
                for (int i = 0; i < 10;i++ )
                {
                    Users u = new Users();
                    u.id = i;
                    u.name = "张三" + i.ToString();
                    u.descn = "描述" + i.ToString();
                    userList.Add(u);
                }
                System.Text.StringBuilder sbStr = new System.Text.StringBuilder();
                JavaScriptSerializer jSerializer = new JavaScriptSerializer();
                jSerializer.Serialize(userList,sbStr);
                Response.Write(sbStr.ToString());
      }
     }
         class Users
        {
            public int id { set; get; }
            public string name { set; get; }
            public string descn { set; get; }
        }
    }

  • 相关阅读:
    centos 用户管理
    rsync 实验
    文件共享和传输
    PAT 1109 Group Photo
    PAT 1108 Finding Average
    PAT 1107 Social Clusters
    PAT 1106 Lowest Price in Supply Chain
    PAT 1105 Spiral Matrix
    PAT 1104 Sum of Number Segments
    PAT 1103 Integer Factorization
  • 原文地址:https://www.cnblogs.com/zhangxiaolin/p/2151663.html
Copyright © 2011-2022 走看看