[ExtNet]DataGroupView桌面

现在的位置: 首页 > 综合 > 正文

[ExtNet]DataGroupView桌面

2013年10月20日 ⁄ 综合 ⁄ 共 5887字 ⁄ 字号小中大 ⁄ 评论关闭

官方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>

【上篇】start.s里面打印一个寄存器的值的汇编实现
【下篇】类似MSN提示的页面效果

作者: attacker

该日志由 attacker 于11年前发表在综合分类下，最后更新于 2013年10月20日.
转载请注明: [ExtNet]DataGroupView桌面 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

[ExtNet]DataGroupView桌面

作者: attacker

书签

最新文章New

本站推荐

返回首页