当前位置： 移动技术网 > IT编程>开发语言>.net > [ExtNet]DataGroupView

[ExtNet]DataGroupView

2018年11月01日  | 移动技术网IT编程  | 我要评论

丁济黄,封神太子2赤铁矿在哪怎么得,墨客小屋

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

 \

代码照抄：

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

 


 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网