ext.net 开发学习之页面框架 （一）
2011-09-26 11:25
316 查看
上上周，通过破解的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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
用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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET 2.0高级编程学习笔记-第3章 应用程序和页面框架
- ExtAspNet应用技巧（十三） - 后台主页面（IFrame框架）
- ext.net 开发学习—2011 结束迎接2012
- ext.net 开发学习——GridView 操作（七）
- ASP.Net MVC开发基础学习笔记（7）：数据查询页面
- ext.net 开发学习之复杂面板_TableLayout、RowLayout（五）
- ASP.Net MVC开发基础学习笔记（8）：新建数据页面
- ext.net 开发学习— 2012 上半年 总结
- ext.net 开发学习
- ASP.NET ZERO 学习 —— (13) 应用开发Demo之页面呈现Person数据
- ext.net 开发学习——常用布局（八）
- ASP.NET学习笔记2----用站点导航控件与母版页搭建页面框架
- [Ext.Net] 开发学习—2011 结束迎接2012
- [Ext.Net] 开发学习—2011 结束迎接2012
- ASP.NET 入门学习(一) [ASP.NET开发框架]
- ado.net data services开发框架学习
- ASP.Net MVC开发基础学习笔记（8）：新建数据页面
- 单页面Web应用开发框架：Durandal学习入门
- 建议ASP.NET Web开发新手学习的几个基础框架