[ExtNet]DataGroupView桌面

来源：互联网发布：铜雀台影评知乎编辑：程序博客网时间：2024/04/29 19:35

官方DEMO：http://examples1.ext.net/#/DataView/Advanced/Grouping/

图标文件，页面控件，XML加载数据

代码照抄：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GroupingDataView.aspx.cs" Inherits="AutoOffice_Demo_GroupingDataView" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><!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>Grouping DataView - Ext.NET Examples</title>    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    <style type="text/css">        div.item-wrap {            float : left;            border : 1px solid transparent;            margin : 5px 25px 5px 25px;            width : 100px;            cursor : pointer;            height : 120px;            text-align : center;        }        div.item-wrap img {            margin : 5px 0px 0px 5px;            width : 77px;            height : 77px;        }        div.item-wrap h6 {            font-size : 14px;            color : #3A4B5B;            font-family : tahoma,arial,san-serif;        }        .items-view .x-view-over { border : solid 1px silver; }        #items-ct { padding : 0px 30px 24px 30px; }        #items-ct h2 {            border-bottom : 2px solid #3A4B5B;                       cursor : pointer;                          }        #items-ct h2 div {            background : transparent url(resources/images/group-expand-sprite.gif) no-repeat 3px -47px;            padding : 4px 4px 4px 17px;            font-family : tahoma,arial,san-serif;            font-size : 12px;            color : #3A4B5B;        }        #items-ct .collapsed h2 div { background-position : 3px 3px; }        #items-ct dl { margin-left : 2px; }        #items-ct .collapsed dl { display : none; }    </style>        <script type="text/javascript">        var selectionChanged = function (dv, nodes) {            if (nodes.length > 0) {                var id = nodes[0].id;                Ext.Msg.alert("Click", "The node with id='" + id + "' has been clicked");            }        }        var viewClick = function (dv, e) {            var group = e.getTarget("h2", 3, true);            if (group) {                group.up("div").toggleClass("collapsed");            }        }    </script></head><body>    <form id="Form1" runat="server">        <ext:ResourceManager ID="ResourceManager1" runat="server" />                <h1>Grouping DataView Example</h1>                <ext:Store ID="Store1" runat="server">                    <Reader>                <ext:JsonReader>                    <Fields>                        <ext:RecordField Name="Title" />                        <ext:RecordField Name="Items" IsComplex="true" />                    </Fields>                </ext:JsonReader>            </Reader>        </ext:Store>                <ext:Panel             ID="DashBoardPanel"             runat="server"             Cls="items-view"             Layout="fit"            AutoHeight="true"            Width="800"             Border="false">            <TopBar>                <ext:Toolbar ID="Toolbar1" runat="server" Flat="true">                    <Items>                        <ext:ToolbarFill />                                                <ext:Button ID="Button1" runat="server" Icon="BulletPlus" Text="Expand All">                            <Listeners>                                <Click Handler="#{Dashboard}.el.select('.group-header').removeClass('collapsed');" />                            </Listeners>                        </ext:Button>                                                <ext:Button ID="Button2" runat="server" Icon="BulletMinus" Text="Collapse All">                             <Listeners>                                <Click Handler="#{Dashboard}.el.select('.group-header').addClass('collapsed');" />                            </Listeners>                        </ext:Button>                                                <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="30" />                    </Items>                </ext:Toolbar>            </TopBar>            <Items>                <ext:DataView                     ID="Dashboard"                    runat="server"                     StoreID="Store1"                     SingleSelect="true"                    OverClass="x-view-over"                     ItemSelector="div.item-wrap"                     AutoHeight="true"                     EmptyText="No items to display">                    <Template ID="Template1" runat="server">                        <Html><div id="items-ct"><tpl for="."><div class="group-header"><h2><div>{Title}</div></h2><dl><tpl for="Items"><div id="{Id}" class="item-wrap"><img src="{Icon}"/><div><H6>{Title}</H6>                                                    </div></div></tpl><div style="clear:left"></div> </dl></div></tpl></div></Html>                    </Template>                    <Listeners>                        <SelectionChange Fn="selectionChanged" />                        <ContainerClick Fn="viewClick" />                    </Listeners>                </ext:DataView>            </Items>        </ext:Panel>    </form></body></html>

        if (!X.IsAjaxRequest)        {            XElement document = XElement.Load(Server.MapPath("DashboardSchema.xml"));            var defaultIcon = document.Attribute("defaultIcon") != null ? document.Attribute("defaultIcon").Value : "";            var query = from g in document.Elements("group")                        select new                        {                            Title = g.Attribute("title") != null ? g.Attribute("title").Value : "",                            Items = (from i in g.Elements("item")                                     select new                                     {                                         Title = i.Element("title") != null ? i.Element("title").Value : "",                                         Icon = i.Element("item-icon") != null ? i.Element("item-icon").Value : defaultIcon,                                         Id = i.Element("id") != null ? i.Element("id").Value : ""                                     }                                )                        };            this.Store1.DataSource = query;            this.Store1.DataBind();        }

XML

<?xml version="1.0" encoding="utf-8" ?><groups defaultIcon="resources/images/icon.png">  <group title="Management">    <item>      <title>Ajax</title>      <item-icon>../../Images/icon-set/ajax-256px.png</item-icon>      <id>customers</id>    </item>    <item>      <title>Css3</title>      <item-icon>../../Images/icon-set/css3-256px.png</item-icon>      <id>orders</id>    </item>    <item>      <title>Css</title>      <item-icon>../../Images/icon-set/css-256px.png</item-icon>      <id>reports</id>    </item>    <item>      <title>Html5</title>      <item-icon>../../Images/icon-set/html5-256px.png</item-icon>      <id>reports</id>    </item>    <item>      <title>Html</title>      <item-icon>../../Images/icon-set/html-256px.png</item-icon>      <id>reports</id>    </item>    <item>      <title>Javascript</title>      <item-icon>../../Images/icon-set/javascript-256px.png</item-icon>      <id>reports</id>    </item>    <item>      <title>Joomla</title>      <item-icon>../../Images/icon-set/joomla-256px.png</item-icon>      <id>reports</id>    </item>    <item>      <title>Mysql</title>      <item-icon>../../Images/icon-set/mysql-256px.png</item-icon>      <id>reports</id>    </item>    <item>      <title>Photoshop</title>      <item-icon>../../Images/icon-set/photoshop-256px.png</item-icon>      <id>reports</id>    </item>    <item>      <title>Php</title>      <item-icon>../../Images/icon-set/php-256px.png</item-icon>      <id>reports</id>    </item>  </group>  <group title="Other group">    <item>      <title>Dreamweaver</title>      <item-icon>../../Images/icon-set/dreamweaver-256px.png</item-icon>      <id>inventory</id>    </item>    <item>      <title>Ajax</title>      <item-icon>../../Images/icon-set/ajax-256px.png</item-icon>      <id>suppliers</id>    </item>    <item>      <title>drupal</title>      <item-icon>../../Images/icon-set/drupal-256px.png</item-icon>      <id>help</id>    </item>    <item>      <title>fireworks</title>      <item-icon>../../Images/icon-set/fireworks-256px.png</item-icon>      <id>options</id>    </item>    <item>      <title>flash</title>      <item-icon>../../Images/icon-set/flash-256px.png</item-icon>      <id>employees</id>    </item>    <item>      <title>seo</title>      <item-icon>../../Images/icon-set/seo-256px.png</item-icon>      <id>employees</id>    </item>    <item>      <title>wordpress</title>      <item-icon>../../Images/icon-set/wordpress-256px.png</item-icon>      <id>wordpress</id>    </item>  </group></groups>