专栏首页菩提树下的杨过ExtJs学习笔记(2)_Basic GridPanel[基本网格]

ExtJs学习笔记(2)_Basic GridPanel[基本网格]

这一节,将学习如何使用网络上最常见的UI控件_Grid

1.静态示例:

静态示例其实官方下载包里,就有sample,这里只贴出代码,后面的如何跟WCF结合,做出动态版的Grid才是本文重点

<!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>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

     <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="../ext-all.js"></script> 

    <title>ExtJs Study</title>

</head>

<body>



<script type="text/javascript">

    Ext.onReady(function() {

    

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());//设置缓存



    //数据来源,实际应用用可动态读取

    var myData = [

        ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],

        ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],

        ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],

        ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],

        ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],

        ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],

        ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],

        ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],

        ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],

        ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],

        ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],

        ['General Electric Company', 34.14, -0.08, -0.23, '9/2 12:00am'],

        ['General Motors Corporation', 30.27, 1.09, 3.74, '9/3 12:00am'],

        ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],

        ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],

        ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],

        ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],

        ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],

        ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],

        ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],

        ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],

        ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],

        ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],

        ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],

        ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],

        ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],

        ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],

        ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],

        ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']

    ];



    //"变化"字段的格式化输出

    function change(val) {

        if (val > 0) {

            return '<span style="color:green;">' + val + '</span>';

        } else if (val < 0) {

            return '<span style="color:red;">' + val + '</span>';

        }

        return val;

    }





    //"变化(%)"字段的格式化输出

    function pctChange(val) {

        if (val > 0) {

            return '<span style="color:green;">' + val + '%</span>';

        } else if (val < 0) {

            return '<span style="color:red;">' + val + '%</span>';

        }

        return val;

    }



    //创建数据存储(类似c#中的dataset构架)

    var store = new Ext.data.SimpleStore({

        fields: [

           { name: 'company' },

           { name: 'price', type: 'float' },

           { name: 'change', type: 'float' },

           { name: 'pctChange', type: 'float' },

           { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }

        ]

    });

    store.loadData(myData);//加载数据



    //创建数据表格

    var grid = new Ext.grid.GridPanel({

        store: store,

        columns: [

            { id: 'company', header: "公司名", width: 160, sortable: true, dataIndex: 'company' },

            { header: "价格", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price' },

            { header: "变化", width: 75, sortable: true, renderer: change, dataIndex: 'change' },

            { header: "变化(%)", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange' },

            { header: "最后更新", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }

        ],

        stripeRows: true,

        autoExpandColumn: 'company',

        height: 350,

        width: 600,

        title: '简单网络示例'

    });



    grid.render('grid-example');//宣染指定ID



    grid.getSelectionModel().selectFirstRow();//默认选择第一行

         

    });

</script>



<button id="btnHello">Hello World</button>

<div id="grid-example"></div>

</body>

</html>

2.动态示例

先贴出运行效果图

a.先写wcf服务端 (1)新建一个"启用了Ajax的WCF服务",命名为MyService.svc

(2)写一个方法用于取得网格所需的数据

[ServiceContract(Namespace = "")]
     [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
 public class MyService
     {
 
         [OperationContract]
         [WebInvoke(ResponseFormat = WebMessageFormat.Json, Method = "GET", UriTemplate = "GetClsData")]
 public T_Class[] GetClsData()
         {
             List<T_Class> _Result = new List<T_Class>();
 using (DBDataContext db = new DBDataContext())
             {
                 var query = db.T_Classes.Where(c => c.F_Type.ToLower() == "shop").OrderBy(c => c.F_RootID).ThenBy(c => c.F_Orders).Select(c => new { F_ID = c.F_ID, 
 
 F_ClassName = c.F_ClassName, F_ParentID = c.F_ParentID,F_Orders = c.F_Orders,F_ReadMe = c.F_ReadMe });
                 _Result = db.ExecuteQuery<T_Class>(query, true).ToList<T_Class>();
                 db.Connection.Close();
             }
 return _Result.ToArray();
         }
 }

注意:这里是用linq to sql的方法写的,默认情况下linq to sql设计器生成的T_Class类里,是不支持序列化的,ExtJs调用时无法正确序列成JSON字符串,需要手动在类前加上数据契约

[DataContract],在属性前加上[DataMember] 如下: [Table(Name="dbo.T_Class")]     [DataContract]  public partial class T_Class : INotifyPropertyChanging, INotifyPropertyChanged  { ...

[Column(Storage="_F_ClassName", DbType="NVarChar(256)")]     [DataMember]   public string F_ClassName   { ...

(3)修改svc文件,右击svc文件,选择打开方式-->HTML编辑器,增加Factory="System.ServiceModel.Activation.WebServiceHostFactory" 即 <%@ ServiceHost Language="C#" Debug="true" Service="Ajax_WCF.MyService" CodeBehind="MyService.svc.cs" Factory="System.ServiceModel.Activation.WebServiceHostFactory"%>

(4)修改web.config,找到以下节点(注:Ajax_WCF为项目的命名空间,因各自项目实际情况而异) <behavior name="Ajax_WCF.MyServiceAspNetAjaxBehavior">      <enableWebScript /> </behavior> 把<enableWebScript />删除,换成<webHttp /> 即  <behavior name="Ajax_WCF.MyServiceAspNetAjaxBehavior">      <webHttp />     </behavior>

说明一下:(3),(4)二步是必须的,目的是为了生成Restful WCF,可以在ExtJs里用类似"MyService.svc/GetClsData"这样的url来访问

b.Extjs调用的前端页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="02.Grid.aspx.cs" Inherits="Ajax_WCF._02_Grid" %>
 <!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css" /> 
 <script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script> 
 <script type="text/javascript" src="js/ext2.2/ext-all.js"></script>
 <title>ExtJs Basic Grid Demo</title>
 
 </head>
 <body>
 <script type="text/javascript">
     Ext.onReady(function() {
 var proxy = new Ext.data.HttpProxy({ url: 'MyService.svc/GetClsData' });
 var reader = new Ext.data.JsonReader({}, [
         { name: 'F_ID' },
         { name: 'F_ClassName' },
         { name: 'F_Orders' },
         { name: 'F_ParentID' },
         { name: 'F_ReadMe'}]
     )
 var store = new Ext.data.Store({ proxy: proxy, reader: reader });
         store.load();
 var grid = new Ext.grid.GridPanel({
             store: store,
             columns: [
         { id: 'F_ID', header: "分类ID", width: 250, sortable: true, dataIndex: 'F_ID' },
         { header: "分类名称", width: 75, sortable: true, dataIndex: 'F_ClassName' },
         { header: "排序号", width: 75, sortable: true, dataIndex: 'F_Orders' },
         { header: "备注", width: 100, sortable: true, dataIndex: 'F_ReadMe'}],
             height: 350,
             width: 600,
             title: '基本网格示例',
             viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' }
         });
         grid.render('grid-example');
         grid.getSelectionModel().selectFirstRow();
     });
 </script>
     ExtJs_Grid_Demo
 <div id="grid-example"></div>
 </body>
 </html>

ok,完成了。

另外,如果要实现对Grid的查询,可以再加上这几行代码:

JS部分:

var fnAjaxDemo = function() {
             var mydata;
             Ext.Ajax.request({
 url: "MyService.svc/GetClsData?name=" + encodeURIComponent(Ext.get("ProductName").dom.value), //服务器端地址
                 success: function(request) {                   
 store.loadData(eval(request.responseText));  
                 },
                 failure: function() {
                     alert("failure!");
                 }
             });
         }
        Ext.get("btnRefresh").on("click", fnAjaxDemo);
 。。。

html部分: 分类名称:<input type="text" id="ProductName" name="ProductName"/><button id="btnRefresh">查询记录</button> 当然,相应的GetClsData部分也要修改:

[OperationContract]
         [WebInvoke(ResponseFormat = WebMessageFormat.Json, Method = "GET", UriTemplate = "GetClsData")]
         public T_Class[] GetClsData()
         {
 string name = CNTVS.TOOLS.Utils.fRequest("name").ToString();
             List<T_Class> _Result = new List<T_Class>();
             using (DBDataContext db = new DBDataContext())
             {
                 var query = db.T_Classes.Where(c => c.F_Type.ToLower() == "shop");
                if (name != "") 
                 {
 query = query.Where(p => p.F_ClassName.ToLower().Contains(name.ToLower()));
                 }
                var query2 = query.OrderBy(c => c.F_RootID).ThenBy(c => c.F_Orders).Select(c => new { F_ID = c.F_ID, F_ClassName = c.F_ClassName, F_ParentID = c.F_ParentID, F_Orders = c.F_Orders, F_ReadMe = c.F_ReadMe });
                _Result = db.ExecuteQuery<T_Class>(query2, true).ToList<T_Class>();
                 db.Connection.Close();
             }
             return _Result.ToArray();
         }

最后说明几个注意事项: 1.Ext.onReady(function() {...}这一串script,如果直接写在页面中,必须放在<body>...</body>中,否则网格上右击,设置显示列时,报JS错误,原因不明。 2.WCF的服务端方法,必须设置成JSON格式,另外Method设置为GET,否则运行时,前端页面读不出数据 3.如果设置了autoExpandColumn,则autoExpandColumn对应的列,必须是id对应的列,否则出错 4.服务端的类中,如果有DateTime字符的字段,需要手动修改dbml对应的cs文件,把DateTime改成string,否则序列化时,会产生很怪的值,估计是.Net在序列化成JSON时的bug. 5.为了减少生成的JSON字符串的大小,可以仅在需要输出的类属性上标记[DataMember],这样在生成的JSON字符串,不会包含未标记为[DataMember]的字段

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • silverlight中用代码动态控制Storyboard(动画)属性的三种方法

    先准备一个基本的xaml页面 1<navigation:Page 2 xmlns="http://schemas.microsoft....

    菩提树下的杨过
  • ExtJs学习笔记(5)_Ajax示例

    ExtJs对于Ajax的使用非常简单,看下面的代码: 1.Html页: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

    菩提树下的杨过
  • 业务系统-全球化多时区的解决思路

    本人前段时间经历了一个全球化的报表项目(java+mysql),刚开始业务只在国内开展,所有报表用户都是中国人,涉及时间/日期的数据,统一用北京时间即可。后来业...

    菩提树下的杨过
  • Bochspwn漏洞挖掘技术深究(1):Double Fetches 检测

    虽然现在技术文章很少人看,大家都喜欢聊安全八卦,但技术文章输出是一种很好的学习方式。更重要的是,专业的文章是给专业的人看的,并非为了取悦所有人。

    泉哥
  • ​CS:APP Attack Lab: 缓冲区溢出攻击

    CMU的15-213课程Introduction to Computer Systems (ICS)里面有一个实验叫attack lab,利用缓冲区溢出漏洞改变...

    王录华
  • OpenStack SR-IOV研究

    tanmx
  • MySQL实战二:多种查询方案

    MySQL学习仓库Up-Up-MySQL,这是一个学习MySQL从入门实战到理论完善,再到精通的一个仓库,后面会把MySQL的学习资料上传上去!欢迎大家star...

    公众号guangcity
  • Django源码学习-8-ListView 通用视图-续

    Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(...

    小团子
  • 张亦鸣 : eBPF 简史 (下篇)

    数日之前,笔者参加某一技术会议之时,为人所安利了一款开源项目,演讲者对其性能颇为称道,称其乃基于近年在内核中炙手可热的 eBPF 技术。

    Linuxer
  • silverlight中用代码动态控制Storyboard(动画)属性的三种方法

    先准备一个基本的xaml页面 1<navigation:Page 2 xmlns="http://schemas.microsoft....

    菩提树下的杨过

扫码关注云+社区

领取腾讯云代金券