ext.net 开发学习之页面框架（一）

比眉伴天荒 2021-11-09 10:40 306阅读 0赞

上上周，通过破解的DEV来开发……，正如园中前辈们所说破解是犯法的。  
用DEV的控件，虽说是收费的，我想不管什么收费软件到中国，就有高手让他不收费。呵呵……园中的朋友都发表了各自的看法，  
有说好的，也有说不好的，当然我是站在说好的这边。不管什么都有他的两面性，不是有句话说吗？存在即合理。他既然被前辈们  
开发出来，并运用到各个项目。这就说明他的价值。如果你一味的说他不好，或者其他。我觉得这个时候 你应该想想  
你是否有能力去改变而不是一味的唠叨！如果你改变不了，两条路：你可以不选择，或者想想他的好！  
  
  
  
  
  
因没有UED，一切样式都有我们叁整理，但是凭我们css经验，加上这个时间 是很难做出令boss满意的页面和效果！  
所以项目一开始，我们决定用第三方框架：ext.js一开始 我们是计划排除的，我们第一选择的是jquery easyui，之所以选择  
后者是因为它相比而言简单易用 ，另外架构也不同。并决定在它的基础上开发自定义控件。可弄了近一周，boss还是觉得不是  
他要的效果！不满意！另外网上关于jquery easyui封装的控件的资源也不是很多。样式问题还是最大的困难！  
  
  我们是站在巨人的肩膀上的巨人 :)  
代码分享下：（因第一次用到，定有不合理的，如前辈您发现，还望指出 谢谢）

<%@ Page Language="C\#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="ExtNetDemo.Index" %>  
  
<%@ 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 id="Head1" runat="server">  
    <title> CRM </title>  
    <link href="Resource/Css/main.css" rel="stylesheet" type="text/css" />  
  
    <script type="text/javascript">  
        var onDrag = function(e) \{  
            var pel = this.proxy.getEl();  
            this.x = pel.getLeft(true);  
            this.y = pel.getTop(true);  
            var s = this.panel.getEl().shadow;  
            if (s) \{  
                s.realign(this.x - 120, this.y - 30, pel.getWidth(), pel.getHeight());  
            \}  
        \};  
    </script>  
  
    <script type="text/javascript">  
        var addTab = function(tabPanel, id, url) \{  
            var tab = tabPanel.getComponent(id);  
  
            if (!tab) \{  
                tab = tabPanel.add(\{  
                    id: id,  
                    title: url,  
                    closable: true,  
                    autoLoad: \{  
                        showMask: true,  
                        url: url,  
                        mode: "iframe",  
                        maskMsg: "Loading " + url + "..."  
                    \}  
                \});  
            \}  
            tabPanel.setActiveTab(tab);  
        \}  
    </script>  
  
</head>  
<body>  
    <form id="Form1" runat="server">  
    <ext:ResourceManager ID="ResourceManager1" runat="server" />  
    <ext:Viewport ID="ViewPort1" runat="server" Layout="FitLayout">  
        <Items>  
            <ext:BorderLayout ID="BorderLayout1" runat="server">  
                <Items>  
                    <ext:Panel ID="Panel25" runat="server" Header="false" Region="North" Border="false"  
                        Html="<div id='header' style='height:32px;'><a style='float:right;margin-right:10px;' href='http://www.baidu.com/' target='\_blank'><img height='33' width='84' src='resource/images/login.gif'/></a><div class='api-title'>FuMaSoft</div></div>" />  
                </Items>  
                <West MinWidth="175" MaxWidth="400" Split="true" Collapsible="true">  
                    <ext:Panel ID="WestPanel" runat="server" Title=" 菜 单 栏 " Width="225" Layout="Fit">  
                        <Items>  
                            <ext:TabPanel runat="server" ActiveTabIndex="0" TabPosition="Top" Border="false"  
                                ID="TabPanel1" Title="ctl71">  
                                <Items>  
                                    <ext:Panel ID="Panel3" runat="server" Title=" 主 菜 单 " Border="false" Layout="Accordion">  
                                        <Items>  
                                            <ext:Panel ID="Navigation" runat="server" Title="客户管理" Icon="FolderGo" Border="false"  
                                                Padding="6">  
                                                <Items>  
                                                    <ext:TreePanel ID="TreePanel2" runat="server" Icon="BookOpen" Border="false" AutoHeight="true">  
                                                        <Root>  
                                                            <ext:TreeNode Text="客户功能1" Expanded="true">  
                                                                <Nodes>  
                                                                    <ext:TreeNode Text="单表展示" Icon="UserGray">  
                                                                        <Listeners>  
                                                                            <Click Handler="addTab(\#\{CenterPanel\}, 'idGrid', 'Grid\_Page.aspx');" />  
                                                                        </Listeners>  
                                                                    </ext:TreeNode>  
                                                                    <ext:TreeNode Text="单表加明细" Icon="UserGray">  
                                                                        <Listeners>  
                                                                            <Click Handler="addTab(\#\{CenterPanel\}, 'idGridDetail', 'extShangXia.aspx');" />  
                                                                        </Listeners>  
                                                                    </ext:TreeNode>  
                                                                    <ext:TreeNode Text="组织结构加单表及明细" Icon="UserGray">  
                                                                        <Listeners>  
                                                                            <Click Handler="addTab(\#\{CenterPanel\}, 'idTreeGridDetail', 'extZuoYou.aspx');" />  
                                                                        </Listeners>  
                                                                    </ext:TreeNode>  
                                                                    <ext:TreeNode Text="单表展示2" Icon="UserGray">  
                                                                        <Listeners>  
                                                                            <Click Handler="addTab(\#\{CenterPanel\}, 'idGridView', 'TestPerson.aspx');" />  
                                                                        </Listeners>  
                                                                    </ext:TreeNode>  
                                                                    <ext:TreeNode Text="文件上传" Icon="UserGray">  
                                                                        <Listeners>  
                                                                            <Click Handler="addTab(\#\{CenterPanel\}, 'idFileUpload', 'UploadFile.aspx');" />  
                                                                        </Listeners>  
                                                                    </ext:TreeNode>  
                                                                </Nodes>  
                                                            </ext:TreeNode>  
                                                        </Root>  
                                                    </ext:TreePanel>  
                                                </Items>  
                                            </ext:Panel>  
                                            <ext:Panel ID="Settings" runat="server" Title="商品管理" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="Some settings in here." />  
                                            <ext:Panel ID="Panel2" runat="server" Title="销售管理" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel5" runat="server" Title="供应商管理" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel6" runat="server" Title="采购管理" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel7" runat="server" Title="进口管理" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel8" runat="server" Title="单证船务" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel9" runat="server" Title="仓库管理" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel10" runat="server" Title="财务管理" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel11" runat="server" Title="文档管理" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel12" runat="server" Title="工作流" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel13" runat="server" Title="系统设置" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                        </Items>  
                                    </ext:Panel>  
                                    <ext:Panel ID="Panel4" runat="server" Title=" 常 用 菜 单 " Border="true" Padding="6"  
                                        Html="这里放置常用菜单选项" />  
                                    <ext:Panel ID="Panel1" runat="server" Title=" 我 的 邮 箱 " Border="false" Layout="Accordion">  
                                        <Listeners>  
                                            <Activate Handler="addTab(\#\{CenterPanel\}, 'idExt', 'Email.aspx');" />  
                                        </Listeners>  
                                        <Items>  
                                            <ext:Panel ID="Panel18" runat="server" Title="文件夹" Icon="FolderGo" Border="false">  
                                                <Items>  
                                                    <ext:TreePanel ID="TreePanel1" runat="server" Icon="BookOpen" Border="false" AutoHeight="true">  
                                                        <Root>  
                                                            <ext:TreeNode Expanded="true" Disabled="true">  
                                                                <Nodes>  
                                                                    <ext:TreeNode Text="服务器端文件夹" Expanded="true">  
                                                                        <Nodes>  
                                                                            <ext:TreeNode Text="未分发邮件" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="收件箱" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="发件箱" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="已发件箱" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="垃圾邮件箱" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="回收站" Icon="UserGray" />  
                                                                        </Nodes>  
                                                                    </ext:TreeNode>  
                                                                </Nodes>  
                                                                <Nodes>  
                                                                    <ext:TreeNode Text="用户文件夹" Expanded="true">  
                                                                        <Nodes>  
                                                                            <ext:TreeNode Text="待处理" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="收件箱" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="发件箱" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="已发件箱" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="垃圾邮件箱" Icon="UserGray" />  
                                                                            <ext:TreeNode Text="回收站" Icon="UserGray" />  
                                                                        </Nodes>  
                                                                    </ext:TreeNode>  
                                                                </Nodes>  
                                                            </ext:TreeNode>  
                                                        </Root>  
                                                    </ext:TreePanel>  
                                                </Items>  
                                            </ext:Panel>  
                                            <ext:Panel ID="Panel19" runat="server" Title="内部往来" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="Some settings in here." />  
                                            <ext:Panel ID="Panel20" runat="server" Title="意向客户" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel21" runat="server" Title="成交客户" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel22" runat="server" Title="线索客户" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                            <ext:Panel ID="Panel23" runat="server" Title="意向供应商" Icon="FolderGo" Border="false"  
                                                Padding="6" Html="West" />  
                                        </Items>  
                                    </ext:Panel>  
                                </Items>  
                            </ext:TabPanel>  
                        </Items>  
                    </ext:Panel>  
                </West>  
                <Center>  
                    <ext:Panel runat="server">  
                        <Items>  
                            <ext:BorderLayout runat="server">  
                                <North MinWidth="100" MaxWidth="100" Collapsible="true">  
                                    <ext:Panel ID="Panel15" runat="server" Height="100" Collapsed="true" Title="功能列表"  
                                        Html="这里放置客户管理下面的功能模块" />  
                                </North>  
                                <Center>  
                                    <ext:TabPanel ID="CenterPanel" runat="server" ActiveTabIndex="0">  
                                        <Items>  
                                            <ext:Panel ID="Tab1" runat="server" Title=" 主 页 " Border="false" Padding="6">  
                                                <Items>  
                                                    <ext:Panel ID="Panel17" runat="server" Title="Drag" Icon="ArrowNsew" StyleSpec="position:absolute;"  
                                                        Frame="true" Width="500" Height="300" Floating="true" X="30" Y="10">  
                                                        <DraggableConfig ID="Draggableconfig1" runat="server">  
                                                            <OnDrag Fn="onDrag" />  
                                                            <EndDrag Handler="this.panel.setPosition(this.x, this.y);" />  
                                                            <CustomConfig>  
                                                                <ext:ConfigItem Name="insertProxy" Value="false" Mode="Raw" />  
                                                            </CustomConfig>  
                                                        </DraggableConfig>  
                                                    </ext:Panel>  
                                                    <ext:Panel ID="Panel14" runat="server" Title="Drag" Icon="ArrowNsew" StyleSpec="position:absolute;"  
                                                        Frame="true" Width="500" Height="300" Floating="true" X="610" Y="10">  
                                                        <DraggableConfig ID="Draggableconfig2" runat="server">  
                                                            <OnDrag Fn="onDrag" />  
                                                            <EndDrag Handler="this.panel.setPosition(this.x, this.y);" />  
                                                            <CustomConfig>  
                                                                <ext:ConfigItem Name="insertProxy" Value="false" Mode="Raw" />  
                                                            </CustomConfig>  
                                                        </DraggableConfig>  
                                                    </ext:Panel>  
                                                    <ext:Panel ID="Panel16" runat="server" Title="Drag" Icon="ArrowNsew" StyleSpec="position:absolute;"  
                                                        Frame="true" Width="1000" Height="300" Floating="true" X="30" Y="375">  
                                                        <DraggableConfig ID="Draggableconfig3" runat="server">  
                                                            <OnDrag Fn="onDrag" />  
                                                            <EndDrag Handler="this.panel.setPosition(this.x, this.y);" />  
                                                            <CustomConfig>  
                                                                <ext:ConfigItem Name="insertProxy" Value="false" Mode="Raw" />  
                                                            </CustomConfig>  
                                                        </DraggableConfig>  
                                                    </ext:Panel>  
                                                </Items>  
                                            </ext:Panel>  
                                        </Items>  
                                        <Plugins>  
                                            <ext:TabCloseMenu ID="TabCloseMenu1" runat="server">  
                                            </ext:TabCloseMenu>  
                                        </Plugins>  
                                    </ext:TabPanel>  
                                </Center>  
                            </ext:BorderLayout>  
                        </Items>  
                    </ext:Panel>  
                </Center>  
            </ext:BorderLayout>  
        </Items>  
    </ext:Viewport>  
    </form>  
</body>  
</html>

找到了ext.net，它是基于ext.js上开发的控件，更好的是：它封装好了css、代码公开化（可以直接到官网下载源码    http://examples.ext.net）  
、关键是它还免费。另外效果做的很不错，性能上测试：基本满足我们项目！直接拿到即可使用……不到一周的时间我们叁就整理好了  
框架（如下图），并在它的基础上开发了一些我们需要的控件，周末boss看来比较满意。提了几点需求；就是板块放置问题！大体上OK……很开心

![2011092611215585.png][]

总体来说 这个封装是很不错的，和一个游戏很相像“堆积木” 可以根据你的想象和需求 搭建你所要的，当然了，这个游戏也有它的严谨地方！这个严谨就好象你  
玩俄罗斯方块。你要按规矩做，否则你会被淘汰……  
  
  
ps：如果您有基于“jquery easyui”封装的控件，如果可以 请告知  
  
谢谢

作者：[PEPE][]  
出处：[http://pepe.cnblogs.com/][PEPE]  
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/PEPE/archive/2011/09/26/2191484.html

[2011092611215585.png]: /images/20211109/17935bb8d1ab42ca9ed0505cf2c34847.png
[PEPE]: http://pepe.cnblogs.com/