欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[ExtNet]DataGroupView

程序员文章站 2022-05-20 18:50:09
图标文件,页面控件,xml加载数据   代码照抄: [html] <%@ page language="c#" autoeventwireup="tru...

图标文件,页面控件,xml加载数据

 [ExtNet]DataGroupView

代码照抄:

[html]
<%@ page language="c#" autoeventwireup="true" codefile="groupingdataview.x.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"> 
        p.item-wrap { 
            float : left; 
            border : 1px solid transparent; 
            margin : 5px 25px 5px 25px; 
            width : 100px; 
            cursor : pointer; 
            height : 120px; 
            text-align : center; 
        } 
 
        p.item-wrap img { 
            margin : 5px 0px 0px 5px; 
            width : 77px; 
            height : 77px; 
        } 
 
        p.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 p { 
            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 p { 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("p").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="p.item-wrap"  
                    autoheight="true"  
                    emptytext="no items to display"> 
                    <template id="template1" runat="server"> 
                        <html> 
                            <p id="items-ct"> 
                                <tpl for="."> 
                                    <p class="group-header"> 
                                        <h2><p>{title}</p></h2> 
                                        <dl> 
                                            <tpl for="items"> 
                                                <p id="{id}" class="item-wrap"> 
                                                    <img src="{icon}"/> 
                                                    <p> 
                                                        <h6>{title}</h6>                                                     
                                                    </p> 
                                                </p> 
                                            </tpl> 
                                            <p style="clear:left"></p> 
                                         </dl> 
                                    </p> 
                                </tpl> 
                            </p> 
                        </html> 
                    </template> 
                    <listeners> 
                        <selectionchange fn="selectionchanged" /> 
                        <containerclick fn="viewclick" /> 
                    </listeners> 
                </ext:dataview> 
            </items> 
        </ext:panel> 
 
    </form> 
</body> 
</html> 

<%@ 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">
        p.item-wrap {
            float : left;
            border : 1px solid transparent;
            margin : 5px 25px 5px 25px;
            width : 100px;
            cursor : pointer;
            height : 120px;
            text-align : center;
        }

        p.item-wrap img {
            margin : 5px 0px 0px 5px;
            width : 77px;
            height : 77px;
        }

        p.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 p {
            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 p { 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("p").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="p.item-wrap"
                    autoheight="true"
                    emptytext="no items to display">
                    <template id="template1" runat="server">
                        <html>
       <p id="items-ct">
        <tpl for=".">
         <p class="group-header">
          <h2><p>{title}</p></h2>
          <dl>
           <tpl for="items">
            <p id="{id}" class="item-wrap">
             <img src="{icon}"/>
             <p>
              <h6>{title}</h6>                                                   
             </p>
            </p>
           </tpl>
           <p style="clear:left"></p>
           </dl>
         </p>
        </tpl>
       </p>
      </html>
                    </template>
                    <listeners>
                        <selectionchange fn="selectionchanged" />
                        <containerclick fn="viewclick" />
                    </listeners>
                </ext:dataview>
            </items>
        </ext:panel>

    </form>
</body>
</html>

[csharp]
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(); 

        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

[html] 
<?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></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> 

<?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>