Ext.Net 后台主页布局

技术分享

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net, Version=3.1.0.29122, Culture=neutral, PublicKeyToken=2e12ce3d0176cd87" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script>
        //var paragraph = Ext.get(e.target);
        //paragraph.highlight();
        //Ext.MessageBox.show({
        //    title: 'Paragraph Clicked',
        //    msg: paragraph.dom.innerHTML,
        //    width: 400,
        //    buttons: Ext.MessageBox.OK,
        //    animEl: paragraph
        //});
        var addTab = function (tabPanel, record) {
            var tab = tabPanel.getComponent(record.getId());

            if (!tab) {
                tab = tabPanel.add({
                    id: record.getId(),
                    title: record.data.text,
                    closable: true,
                    loader: {
                        url: "http://www.baidu.com",
                        mode: "iframe",
                        loadMask: {
                            showMask: true,
                            msg: "Loading " + record.data.text + "..."
                        }
                    },
                    autoScroll: true
                });
            }

            tabPanel.setActiveTab(tab);
        };
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager runat="server"></ext:ResourceManager>

        <ext:Viewport ID="viewport1" runat="server" Layout="border">
            <Items>
                <ext:Panel
                    runat="server"
                    Region="North"
                    Height="80"
                    Html="aa"
                    Border="true" >
                    <items>
                        <ext:Label runat="server">adsafsdfasfsfsadfsfasdfasd</ext:Label>
                    </items>
                    </ext:Panel>
                <ext:Panel
                    runat="server"
                    Title="菜单"
                    Region="West"
                    Layout="AccordionLayout"
                    Width="225"
                    MinWidth="225"
                    MaxWidth="400"
                    Split="true"
                    Collapsible="true">
                    <Tools>
                        <ext:Tool Type="Refresh" Handler="Ext.Msg.alert('Message','Refresh Tool Clicked!');" />
                    </Tools>
                    <Items>
                        <ext:TreePanel runat="server" Title="The Menu One" RootVisible="false">

                            <Root>
                                <ext:Node Text="Root">
                                    <Children>
                                        <ext:Node Text="Friends" Expanded="true">
                                            <Children>
                                                <ext:Node Text="Jack" Icon="User" Leaf="True" />
                                                <ext:Node Text="Brian" Icon="FolderWrench" Leaf="True" />
                                                <ext:Node Text="Jon" Icon="User" Leaf="True" />
                                                <ext:Node Text="Tim" Icon="User" Leaf="True" />
                                                <ext:Node Text="Nige" Icon="User" Leaf="True" />
                                                <ext:Node Text="Fred" Icon="User" Leaf="True" />
                                                <ext:Node Text="Bob" Icon="User" Leaf="True" />
                                            </Children>
                                        </ext:Node>
                                        <ext:Node Text="Family" Expanded="false">
                                            <Children>
                                                <ext:Node Text="Kelly" Icon="UserFemale" Leaf="True" />
                                                <ext:Node Text="Sara" Icon="UserFemale" Leaf="True" />
                                                <ext:Node Text="Zack" Icon="UserGreen" Leaf="True" />
                                                <ext:Node Text="John" Icon="UserGreen" Leaf="True" />
                                            </Children>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                            </Root>
                            <Listeners>
                                <ItemClick Handler="if (record.data.text) { e.stopEvent(); addTab(#{TabPanel1}, record); }" />
                            </Listeners>
                        </ext:TreePanel>
                        <ext:TreePanel runat="server" Title="The Menu Two" RootVisible="false">

                            <Root>
                                <ext:Node Text="Root">
                                    <Children>
                                        <ext:Node Text="Friends" Expanded="true">
                                            <Children>
                                                <ext:Node Text="Jack" Icon="User" Leaf="True" />
                                                <ext:Node Text="Brian" Icon="User" Leaf="True" />
                                                <ext:Node Text="Jon" Icon="User" Leaf="True" />
                                                <ext:Node Text="Tim" Icon="User" Leaf="True" />
                                                <ext:Node Text="Nige" Icon="User" Leaf="True" />
                                                <ext:Node Text="Fred" Icon="User" Leaf="True" />
                                                <ext:Node Text="Bob" Icon="User" Leaf="True" />
                                            </Children>
                                        </ext:Node>
                                        <ext:Node Text="Family" Expanded="false">
                                            <Children>
                                                <ext:Node Text="Kelly" Icon="UserFemale" Leaf="True" />
                                                <ext:Node Text="Sara" Icon="UserFemale" Leaf="True" />
                                                <ext:Node Text="Zack" Icon="UserGreen" Leaf="True" />
                                                <ext:Node Text="John" Icon="UserGreen" Leaf="True" />
                                            </Children>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                            </Root>
                        </ext:TreePanel>
                    </Items>

                </ext:Panel>
                <ext:TabPanel runat="server" Region="Center" ID="TabPanel1">
                    <TabBar>

                        <ext:ToolbarFill runat="server" />
                        <ext:Button runat="server" Icon="Reload" Border="false">
                            <Listeners>
                                <Click Handler="Ext.Msg.alert('Refresh', 'Here is Refresh message');" />
                            </Listeners>
                        </ext:Button>
                    </TabBar>
                    <Items>
                        <ext:Panel
                            runat="server"
                            Title="主页"
                            Border="false"
                            BodyPadding="6"
                            Html="<h1>Viewport with BorderLayout</h1>" />
                    </Items>
                </ext:TabPanel>
                <ext:Panel
                    runat="server"
                    Title="East"
                    Region="East"
                    Collapsible="true"
                    Collapsed="true"
                    Split="true"
                    MinWidth="225"
                    Width="225"
                    Layout="Fit">
                    <Items>
                        <ext:TabPanel
                            runat="server"
                            ActiveTabIndex="1"
                            TabPosition="Bottom"
                            Border="false">
                            <Items>
                                <ext:Panel
                                    runat="server"
                                    Title="Tab 1"
                                    Border="false"
                                    BodyPadding="6"
                                    Html="East Tab 1" />
                                <ext:Panel
                                    runat="server"
                                    Title="Tab 2"
                                    Closable="true"
                                    Border="false"
                                    BodyPadding="6"
                                    Html="East Tab 2" />
                            </Items>
                        </ext:TabPanel>
                    </Items>
                </ext:Panel>
                <ext:Panel
                    runat="server"
                    Region="South"
                    Title=" "
                    Height="7"
                    Border="true" />

            </Items>

        </ext:Viewport>
    </form>
</body>
</html>



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。