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

眼看无异节省,将学怎么采取网络上最为广大的UI控件_Grid

 

1.静态示例:

静态示例其实官下充斥包里,就发sample,这里仅仅贴发出代码,后面的安跟WCF结合,做出动态版的Grid才是本文重点

图片 1<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
图片 2<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
图片 3<head>
图片 4    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
图片 5    <link rel=”stylesheet” type=”text/css” href=”../resources/css/ext-all.css” />
图片 6     <script type=”text/javascript” src=”../adapter/ext/ext-base.js”></script>
图片 7    <script type=”text/javascript” src=”../ext-all.js”></script> 
图片 8    <title>ExtJs Study</title>
图片 9</head>
图片 10<body>
图片 11
图片 12图片 13<script type=”text/javascript”>图片 14
图片 15图片 16    Ext.onReady(function() 图片 17{
图片 18    
图片 19    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());//设置缓存
图片 20
图片 21    //数据来,实际使用因此而动态读取
图片 22    var myData = [
图片 23        [‘3m Co’, 71.72, 0.02, 0.03, ‘9/1 12:00am’],
图片 24        [‘Alcoa Inc’, 29.01, 0.42, 1.47, ‘9/1 12:00am’],
图片 25        [‘Altria Group Inc’, 83.81, 0.28, 0.34, ‘9/1 12:00am’],
图片 26        [‘American Express Company’, 52.55, 0.01, 0.02, ‘9/1 12:00am’],
图片 27        [‘American International Group, Inc.’, 64.13, 0.31, 0.49, ‘9/1 12:00am’],
图片 28        [‘AT&T Inc.’, 31.61, -0.48, -1.54, ‘9/1 12:00am’],
图片 29        [‘Boeing Co.’, 75.43, 0.53, 0.71, ‘9/1 12:00am’],
图片 30        [‘Caterpillar Inc.’, 67.27, 0.92, 1.39, ‘9/1 12:00am’],
图片 31        [‘Citigroup, Inc.’, 49.37, 0.02, 0.04, ‘9/1 12:00am’],
图片 32        [‘E.I. du Pont de Nemours and Company’, 40.48, 0.51, 1.28, ‘9/1 12:00am’],
图片 33        [‘Exxon Mobil Corp’, 68.1, -0.43, -0.64, ‘9/1 12:00am’],
图片 34        [‘General Electric Company’, 34.14, -0.08, -0.23, ‘9/2 12:00am’],
图片 35        [‘General Motors Corporation’, 30.27, 1.09, 3.74, ‘9/3 12:00am’],
图片 36        [‘Hewlett-Packard Co.’, 36.53, -0.03, -0.08, ‘9/1 12:00am’],
图片 37        [‘Honeywell Intl Inc’, 38.77, 0.05, 0.13, ‘9/1 12:00am’],
图片 38        [‘Intel Corporation’, 19.88, 0.31, 1.58, ‘9/1 12:00am’],
图片 39        [‘International Business Machines’, 81.41, 0.44, 0.54, ‘9/1 12:00am’],
图片 40        [‘Johnson & Johnson’, 64.72, 0.06, 0.09, ‘9/1 12:00am’],
图片 41        [‘JP Morgan & Chase & Co’, 45.73, 0.07, 0.15, ‘9/1 12:00am’],
图片 42        [‘McDonald\’s Corporation’, 36.76, 0.86, 2.40, ‘9/1 12:00am’],
图片 43        [‘Merck & Co., Inc.’, 40.96, 0.41, 1.01, ‘9/1 12:00am’],
图片 44        [‘Microsoft Corporation’, 25.84, 0.14, 0.54, ‘9/1 12:00am’],
图片 45        [‘Pfizer Inc’, 27.96, 0.4, 1.45, ‘9/1 12:00am’],
图片 46        [‘The Coca-Cola Company’, 45.07, 0.26, 0.58, ‘9/1 12:00am’],
图片 47        [‘The Home Depot, Inc.’, 34.64, 0.35, 1.02, ‘9/1 12:00am’],
图片 48        [‘The Procter & Gamble Company’, 61.91, 0.01, 0.02, ‘9/1 12:00am’],
图片 49        [‘United Technologies Corporation’, 63.26, 0.55, 0.88, ‘9/1 12:00am’],
图片 50        [‘Verizon Communications’, 35.57, 0.39, 1.11, ‘9/1 12:00am’],
图片 51        [‘Wal-Mart Stores, Inc.’, 45.45, 0.73, 1.63, ‘9/1 12:00am’]
图片 52    ];
图片 53
图片 54    //”变化”字段的格式化输出
图片 55图片 56    function change(val) 图片 57{
图片 58图片 59        if (val > 0) 图片 60{
图片 61            return ‘<span style=”color:green;”>’ + val + ‘</span>’;
图片 62图片 63        } else if (val < 0) 图片 64{
图片 65            return ‘<span style=”color:red;”>’ + val + ‘</span>’;
图片 66        }
图片 67        return val;
图片 68    }
图片 69
图片 70
图片 71    //”变化(%)”字段的格式化输出
图片 72图片 73    function pctChange(val) 图片 74{
图片 75图片 76        if (val > 0) 图片 77{
图片 78            return ‘<span style=”color:green;”>’ + val + ‘%</span>’;
图片 79图片 80        } else if (val < 0) 图片 81{
图片 82            return ‘<span style=”color:red;”>’ + val + ‘%</span>’;
图片 83        }
图片 84        return val;
图片 85    }
图片 86
图片 87    //创建数量存储(类似c#中的dataset构架)
图片 88图片 89    var store = new Ext.data.SimpleStore(图片 90{
图片 91        fields: [
图片 92图片 93           图片 94{ name: ‘company’ },
图片 95图片 96           图片 97{ name: ‘price’, type: ‘float’ },
图片 98图片 99           图片 100{ name: ‘change’, type: ‘float’ },
图片 101图片 102           图片 103{ name: ‘pctChange’, type: ‘float’ },
图片 104图片 105           图片 106{ name: ‘lastChange’, type: ‘date’, dateFormat: ‘n/j h:ia’ }
图片 107        ]
图片 108    });
图片 109    store.loadData(myData);//加载数据
图片 110
图片 111    //创建数量表格
图片 112图片 113    var grid = new Ext.grid.GridPanel(图片 114{
图片 115        store: store,
图片 116        columns: [
图片 117图片 118            图片 119{ id: ‘company’, header: “公司名”, width: 160, sortable: true, dataIndex: ‘company’ },
图片 120图片 121            图片 122{ header: “价格”, width: 75, sortable: true, renderer: ‘usMoney’, dataIndex: ‘price’ },
图片 123图片 124            图片 125{ header: “变化”, width: 75, sortable: true, renderer: change, dataIndex: ‘change’ },
图片 126图片 127            图片 128{ header: “变化(%)”, width: 75, sortable: true, renderer: pctChange, dataIndex: ‘pctChange’ },
图片 129图片 130            图片 131{ header: “最后更新”, width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer(‘m/d/Y’), dataIndex: ‘lastChange’ }
图片 132        ],
图片 133        stripeRows: true,
图片 134        autoExpandColumn: ‘company’,
图片 135        height: 350,
图片 136        width: 600,
图片 137        title: ‘简单网络示例’
图片 138    });
图片 139
图片 140    grid.render(‘grid-example’);//宣染指定ID
图片 141
图片 142    grid.getSelectionModel().selectFirstRow();//默认选项第一履行
图片 143         
图片 144    });
图片 145</script>
图片 146
图片 147<button id=”btnHello”>Hello World</button>
图片 148<div id=”grid-example”></div>
图片 149</body>
图片 150</html>
图片 151

 

2.动态示例

事先贴发运行效果图
图片 152

 

 

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

(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”%>
图片 154

图片 155

(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"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<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]的字段

相关文章