ext.net 开发学习之页面框架 (一)

上上周,通过破解的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……很开心






总体来说 这个封装是很不错的,和一个游戏很相像“堆积木” 可以根据你的想象和需求 搭建你所要的,当然了,这个游戏也有它的严谨地方!这个严谨就好象你
玩俄罗斯方块。你要按规矩做,否则你会被淘汰……


ps:如果您有基于“jquery easyui”封装的控件,如果可以 请告知

谢谢


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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
.net EXT学习资料与源码 ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了,   主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了.   主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),在引用ext类库的时候.这三个文件必不可少.   它提供了丰富的,非常漂亮的外观体验,成为众多界面层开发人员的追捧!其核心的组件基本覆盖了我们构建富客户端的常用的组件。   从 Ext 2开始,商业版(针对那些以盈利为目的的开发方)要收费了。这可能会影响一些他的应用前景。   目前的最新版本为3.0RC,该版本是在2009年4月15日发布的。 三层架构,   三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为:表现层(UI)、业务逻辑层(BLL)、数据访问层(DAL)。区分层次的目的即为了“高内聚,低耦合”的思想。   1、表现层(UI):通俗讲就是展现给用户的界面,即用户在使用一个系统的时候他的所见所得。   2、业务逻辑层(BLL):针对具体问题的操作,也可以说是对数据层的操作,对数据业务逻辑处理。   3、数据访问层(DAL):该层所做事务直接操作数据库,针对数据的增添、删除、修改、更新、查找等。 [编辑本段]概述   在软件体系架构设计中,分层式结构是最常见,也是最重要的一种结构。微软推荐的分层式结构一般分为三层,从下至上分别为:数据访问层、业务逻辑层(又或成为领域层)、表示层。   三层结构原理:   3个层次中,系统主要功能和业务逻辑都在业务逻辑层进行处理。   所谓三层体系结构,是在客户端与数据库之间加入了一个“中间层”,也叫组件层。这里所说的三层体系,不是指物理上的三层,不是简单地放置三台机器就是三层体系结构,也不仅仅有B/S应用才是三层体系结构,三层是指逻辑上的三层,即使这三个层放置到一台机器上。   三层体系的应用程序将业务规则、数据访问、合法性校验等工作放到了中间层进行处理。通常情况下,客户端不直接与数据库进行交互,而是通过COM/DCOM通讯与中间层建立连接,再经由中间层与数据库进行交互。   表示层    位于最外层(最上层),离用户最近。用于显示数据和接收用户输入的数据,为用户提供一种交互式操作的界面。   业务逻辑层    业务逻辑层(Business Logic Layer)无疑是系统架构中体现核心价值的部分。它的关注点主要集中在业务规则的制定、业务流程的实现等与业务需求有关的系统设计,也即是说它是与系统所应对的领域(Domain)逻辑有关,很多时候,也将业务逻辑层称为领域层。例如Martin Fowler在《Patterns of Enterprise Application Architecture》一书中,将整个架构分为三个主要的层:表示层、领域层和数据源层。作为领域驱动设计的先驱Eric Evans,对业务逻辑层作了更细致地划分,细分为应用层与领域层,通过分层进一步将领域逻辑与领域逻辑的解决方案分离。   业务逻辑层在体系架构中的位置很关键,它处于数据访问层与表示层中间,起到了数据交换中承上启下的作用。由于层是一种弱耦合结构,层与层之间的依赖是向下的,底层对于上层而言是“无知”的,改变上层的设计对于其调用的底层而言没有任何影响。如果在分层设计时,遵循了面向接口设计的思想,那么这种向下的依赖也应该是一种弱依赖关系。因而在不改变接口定义的前提下,理想的分层式架构,应该是一个支持可抽取、可替换的“抽屉”式架构。正因为如此,业务逻辑层的设计对于一个支持可扩展的架构尤为关键,因为它扮演了两个不同的角色。对于数据访问层而言,它是调用者;对于表示层而言,它却是被调用者。依赖与被依赖的关系都纠结在业务逻辑层上,如何实现依赖关系的解耦,则是除了实现业务逻辑之外留给设计师的任务。   数据层    数据访问层:有时候也称为是持久层,其功能主要是负责数据库的访问,可以访问数据库系统、二进制文件、文本文档或是XML文档。   简单的说法就是实现对数据表的Select,Insert,Update,Delete的操作。如果要加入ORM的元素,那么就会包括对象和数据表之间的mapping,以及对象实体的持久化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值