[ExtNet]DataGroupView桌面
官方DEMO：http://examples1.ext.net/#/DataView/Advanced/Grouping/
图标文件，页面控件，XML加载数据
![[ExtNet]DataGroupView桌面_第1张图片](http://img.e-com-net.com/image/info5/2f42603af32a463895eb12c73a6f669a.jpg)
代码照抄：
<%@ 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>