zoukankan      html  css  js  c++  java
  • ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图

    本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View。Ext.ListView就是大名鼎鼎的Ext GridPanel的前身,不过现在的Ext4已经将它整合到GridPanel一起了,做一些简单的表格数据展示还是可以用到的。而Ext.view.View则提供了通过模板自定义展示数据的方式,数据的展示形式不限于表格,可表现为灵活的方式,同时Ext为其提供了基本的排序分页、项选择、事件等支持。

    如果不做特殊说明,本系列文章都以mvc的服务端返回json格式的数据作为数据源的方式。

    一、Ext.ListView

    下面我们看看一个基本的表格数据展示实例:

    [html]

        <h1>ListView</h1>
        <div id="div1" class="content"></div>
        <span id="span1"></span>
    


    [Js]

    Ext.onReady(function () {
        var store = new Ext.data.JsonStore({
            fields: [
            { name: 'IntData', type: 'int' },
            { name: 'StringData', type: 'string' },
            { name: 'TimeData', type: 'date' }
           ],
            proxy: {
                type: 'ajax',
                url: 'ListView1Json',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            },
            sortInfo: { field: 'IntData', direction: 'DESC' }
        });
        store.load();
    
        var listView = Ext.create('Ext.ListView', {
            renderTo: "div1",
            store: store,
            multiSelect: true,
            emptyText: '无数据',
            reserveScrollOffset: true,
            hideHeaders: false,        //是否隐藏标题
            columns: [{
                header: "IntData",
                dataIndex: 'IntData'
            }, {
                header: "StringData",
                dataIndex: 'StringData'
            }, {
                header: "TimeData",
                dataIndex: 'TimeData',
                align: 'right',
                xtype: 'datecolumn',
                format: 'm-d h:i a'
            }]
        });
    
        //当选择行改变时,输出被选行
        listView.on('selectionchange', function (view, selectNodes) {
            var msg = "";
            for (var i = 0; i < selectNodes.length; i++) {
                var index = 1 + selectNodes[i].index;
                if (msg == "") {
                    msg = index;
                }
                else {
                    msg += "," + index;
                }
            }
            if (msg == "") Ext.get("span1").update('当前没有选择任何数据。');
            else Ext.get("span1").update('当前选择了第' + msg + '行数据。');
        });
    });
    

    服务端模拟的数据源,以及通过MVC的jsonresult返回数据的代码:

    [C# Mvc]

    //控制层
    public JsonResult ListView1Json()
    {
        var json = new
        {
            rows = BasicData.Table.Take(8).Select(x => new
            {
                IntData = x.IntData,
                StringData = x.StringData,
                TimeData = x.TimeData.ToShortDateString()
            })
        };
        return Json(json, JsonRequestBehavior.AllowGet);
    }
    
    //模拟数据
    public class BasicData
    {
        static List<BasicData> table;
        static public List<BasicData> Table
        {
            get
            {
                if (table == null)
                {
                    table = new List<BasicData>();
                    for (int i = 0; i < 1000; i++)
                    {
                        var obj = new BasicData()
                        {
                            IntData = i + 1,
                            StringData = "测试数据" + (i + 1),
                            TimeData = DateTime.Today.AddDays(i)
                        };
                        table.Add(obj);
                    }
                }
                return table;
            }
        }
        public int IntData { get; set; }
        public string StringData { get; set; }
        public DateTime TimeData { get; set; }
    }
    

    来看看效果,数据已经正确加载,当我们选择行时,可以看到提示当前选择了哪些行:

    再看看通过火狐调试捕获到的服务端json数据:

    二、Ext.view.View

    先看看实现代码:

    [html]

        <h1>Ext.view.View</h1>
        <div class="content" id="div1"></div>
        <span id="span1"></span>
    


    [Css]

    #view1 .data
    {
        background-color:#fff;
    }
    #view1 tr.hover {
        background-color: #ddd;
    }
    
    #view1 .x-item-selected {
        background-color:Yellow !important;
    }
    


    [Js]

    Ext.Loader.setConfig({ enabled: true });
    Ext.Loader.setPath('Ext.ux.DataView', '/ExtJs/ux/DataView');
    
    Ext.onReady(function () {
        //创建store
        var store = Ext.create('Ext.data.Store', {
            fields: ['IntData', 'StringData', 'TimeData'],
            proxy: {
                type: 'ajax',
                url: 'DataView1Json',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            }
        });
        store.load();
    
        //定义模板
        var tpl = new Ext.XTemplate(
            '<table cellpadding=0 cellspacing=0 border=1 width=450px>',
            '<tr><td colspan=3 align=center><b><font color=red>Ext.view.View取自服务端的数据表</font></b></td></tr>',
            '<tr><td style="20%"><b>编号</b></td><td  style="50%"><b>消息</b></td><td style="30%"><b>日期</b></td>',
            '<tpl for=".">',
                '<tr class="data"><td class="x-editable">{IntData}</td><td>{StringData}</td><td>{TimeData}</td></tr>',
            '</tpl>',
            '</table>'
        );
    
        //定义Ext.view.View控件
        var view = Ext.create('Ext.view.View', {
            renderTo: "div1",
            store: store,
            tpl: tpl,
            autoHeight: true,
            multiSelect: true,
            //height: 310,
            trackOver: true,
            id: 'view1',
            overItemCls: 'hover',
            itemSelector: 'tr.data',
            emptyText: '没有数据',
            plugins: [
                    Ext.create('Ext.ux.DataView.DragSelector', {}),
                    Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
                ],
            listeners: {
                selectionchange: function (dataView, selectNodes) {
                    var msg = "";
                    for (var i = 0; i < selectNodes.length; i++) {
                        var index = 1 + selectNodes[i].index;
                        if (msg == "") {
                            msg = index;
                        }
                        else {
                            msg += "," + index;
                        }
                    }
                    if (msg == "") Ext.get("span1").update('当前没有选择任何数据。');
                    else Ext.get("span1").update('当前选择了第' + msg + '行数据。');
                }
            }
        });
    
    });
    


    [C# Mvc]

            public JsonResult DataView1Json()
            {
                var json = new
                {
                    rows = BasicData.Table.Take(8).Select(x => new
                    {
                        IntData = x.IntData,
                        StringData = x.StringData,
                        TimeData = x.TimeData.ToShortDateString()
                    })
                };
                return Json(json,JsonRequestBehavior.AllowGet);
            }
    

    1.要注意的地方:

    对于数据item项,我们在其html 设置 class="data",那么我们在配置项中设置:itemSelector: 'tr.data'表明了这个CSS选择器选中的元素是一个item数据项。

    当item被选择时,我们需要定义一个.x-item-selected 的样式,这样才可以在展示界面表现出item项被选中时的样式。

    下面我们看看效果:

    2.对Ext.view.View的扩展

    注意到配置项的如下代码:

    [Js]

            plugins: [
                    Ext.create('Ext.ux.DataView.DragSelector', {}),
                    Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
                ],
    

    这里分别引入了两个扩展支持,前者描述了数据项可以通过拖动鼠标选择多个item项,查看效果:

    第二个扩展支持了对item数据项记录集的单元格数据的编辑功能,这里表明了dataIndex为'IntData'的单元格可以被编辑。注意:在模板对应的位置要引入 class="x-editable"的样式来支持。下面看看效果:

  • 相关阅读:
    java io系列23之 BufferedReader(字符缓冲输入流)
    java io系列22之 FileReader和FileWriter
    java io系列21之 InputStreamReader和OutputStreamWriter
    java io系列20之 PipedReader和PipedWriter
    java io系列19之 CharArrayWriter(字符数组输出流)
    java io系列18之 CharArrayReader(字符数组输入流)
    java io系列17之 System.out.println("hello world")原理
    java io系列16之 PrintStream(打印输出流)详解
    java io系列15之 DataOutputStream(数据输出流)的认知、源码和示例
    java io系列14之 DataInputStream(数据输入流)的认知、源码和示例
  • 原文地址:https://www.cnblogs.com/liubo/p/3363653.html
Copyright © 2011-2022 走看看