EXT.NET复杂布局(四)——系统首页设计(下)

简介: 此篇为EXT.NET系列终结篇。希望此系列能够对大家有所帮助。 首页JS函数介绍 使然使用了Ext.NET,但是JavaScript的地位还是举足轻重的。 1.添加选项卡   1: var addTab = function (id, url, title) { 2: var tab = tplCenter.

此篇为EXT.NET系列终结篇。希望此系列能够对大家有所帮助。

首页JS函数介绍

使然使用了Ext.NET,但是JavaScript的地位还是举足轻重的。

1.添加选项卡

 

   1:          var addTab = function (id, url, title) {
   2:              var tab = tplCenter.getComponent(id);
   3:              if (!tab) {
   4:                  tab = tplCenter.add({
   5:                      id: id,
   6:                      title: title,
   7:                      closable: true,
   8:                      autoLoad: {
   9:                          showMask: true,
  10:                          url: url,
  11:                          mode: "iframe",
  12:                          maskMsg: "正在加载  " + title + " ..."
  13:                      }
  14:                  });
  15:              }
  16:              tplCenter.setActiveTab(tab);
  17:          }

注意maskMsg,它有以下效果:

image

2.显示消息

   1:          function showMsg(title, content) {
   2:              Ext.net.Notification.show({
   3:                  hideFx: {
   4:                      fxName: 'switchOff',
   5:                      args: [{}]
   6:                  },
   7:                  showFx: {
   8:                      args: [
   9:                                'C3DAF9',
  10:                                1,
  11:                                {
  12:                                    duration: 2.0
  13:                                }
  14:                            ],
  15:                      fxName: 'frame'
  16:                  },
  17:                  closeVisible: true,
  18:                  html: content,
  19:                  title: title + '   ' + new Date().format('g:i:s A')
  20:              });
  21:          }

image

3.弹出窗口

   1:          function showMyWindow(url, id, title, isMaximized) {
   2:              url += ((url.indexOf('?') == -1 ? ("?rand=") : ("&rand=")) + Math.round(Math.random() * 10000));
   3:              var myWin = new Ext.Window({
   4:                  id: id,
   5:                  title: title,
   6:                  width: 572,
   7:                  height: 290,
   8:                  iconCls: "addicon",
   9:                  resizable: false,
  10:                  draggable: true,
  11:                  defaultType: "textfield",
  12:                  labelWidth: 100,
  13:                  collapsible: false,
  14:                  closeAction: 'close',
  15:                  closable: true,
  16:                  maximizable: true,
  17:                  maximized: arguments.length == 4 ? isMaximized : false,
  18:                  modal: true,
  19:                  buttonAlign: "center",
  20:                  bodyStyle: "padding:0 0 0 0",
  21:                  listeners: { "beforedestroy": function (obj) {
  22:                      var tabs = top.tabs;
  23:                      if (typeof tabs != undefined && tabs != null) {
  24:                          if (top.tabs.items.getCount() > 1) {
  25:                              var currentTab = tabs.getActiveTab();
  26:                              tabs.remove(currentTab);
  27:                          }
  28:                      }
  29:                      top.showMsg('温馨提示', '我已经关闭啦!');
  30:                  }
  31:                  },
  32:                  html: '<iframe style="margin-left:0px;margin-top:0px;border:0;' +
  33:                    'border-style:solid;border-color:red;" width="100%" height="100%" ' +
  34:                    ' id="frmWin' + id + '" src="' + url + '" name="' + id + '" />'
  35:              });
  36:              myWin.show();
  37:          }

注意beforedestroy事件,这个事件可以在窗口关闭后通知你,有了这个通知事件,想干啥都方便了。在示例中,本人是显示消息。

页面布局

image

从图中可以看出分为上、中、左、右四块,前面介绍过了,就不细说了。

之所以使用Viewport,主要是为了自适应浏览器。值得注意的是,将一个页面分割几块,通常使用BorderLayout,其下有North、West、Center、East、South五个元素,其Collapsible属性指示是否隐藏面板,比如本示例的East面板。West这里放置左侧菜单,支持无限子集。为了有折叠面板的效果,需要设置Layout="AccordionLayout"。然后在后台动态添加TreePanel。

值得注意的是Center面板:

                <Center MarginsSummary="5 5 5 0">
                    <ext:TabPanel runat="server" ID="tplCenter" IDMode="Static" ResizeTabs="true" Border="true"
                        MinTabWidth="75" TabWidth="135" EnableTabScroll="true">
                        <Plugins>
                            <ext:TabScrollerMenu ID="TabScrollerMenu1" runat="server" />
                        </Plugins>
                        <Items>
                            <ext:Panel ID="Panel1" runat="server" TabMenuHidden="true" Title="工作台" TabTip="工作台"
                                Closable="false">
                                <AutoLoad Url="/WorkbenchMain.aspx" Mode="IFrame" TriggerEvent="show" ShowMask="true" />
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Center>

可以看出Center面板中放置了选项卡面板(TabPanel),主要到Plugins元素中的TabScrollerMenu控件,作用如图:

image

至于Panel,能让其自动加载框架页。TriggerEvent="show" 表示显示的时候加载。

可以看出,工作台那块都在Url="/WorkbenchMain.aspx" 设置。注意/表示网站根目录,只有发布到IIS或者Web应用程序有效。

工作台

工作台是非常重要的一块。

有时候为了显示重要信息,可能需要以不同颜色显示,那么注意下面的JS:

var template = '<b style="color:{1};">{0}</b>';
var setTitle = function (value, metadata, record, rowIndex, colIndex, store) {
    return String.format(template, value, 'green');
};

在上面的代码中,你可以根据值来判断显示什么样的HTML,这里是粗体加绿。

image

自适应区域:

function autoSizeArea() {
            var vHeight = Viewport1.getHeight();
            pnlView.setHeight(vHeight);
            vHeight = vHeight - 150;
            GridPanel1.setHeight(vHeight);
            GridPanel3.setHeight(vHeight);
            GridPanel2.setHeight(vHeight);
            GridPanel6.setHeight(vHeight);
            GridPanel5.setHeight(vHeight);
        }

弹出窗体:

 

function showTestPage() {
            top.showMyWindow('/Test.aspx', 'frmStatesRequestList', '测a试?页3', true);
        }

这里显示的是我的测试页,你可以在这里显示自定义页面,并且可以传递工作台中面板中的Json数据。

在这里,我在工作台也添加了一个弹出窗口的JS函数,这么做的原因是,从这里打开窗口处理完事项,我可以刷新工作台的数据,甚至是指定的面板的数据,也就是在beforedestroy事件中,reload相应的store。

在工作台,本人写了一些处理的JS,大家可以根据自己需要更改,并且剪切到独立的JS文件中去。

比如这个函数:

   1:  function showInput(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName) {
   2:              Ext.MessageBox.show({
   3:                  title: '批注',
   4:                  msg: '请输入批注:',
   5:                  width: 300,
   6:                  buttons: Ext.MessageBox.OKCANCEL,
   7:                  multiline: true,
   8:                  fn: function (btn, text) {
   9:                      var remark = text.replace(/(^\s*)|(\s*$)/g, '');
  10:                      if (TypeID == 'Reject' || TypeID == 'Repeal') {
  11:                          var tip = '';
  12:                          if (TypeID == 'Reject')
  13:                              tip = '【退回】';
  14:                          if (TypeID == 'Repeal')
  15:                              tip = '【撤销】';
  16:                          if (remark == '' && btn == 'ok') {
  17:                              showInput(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName);
  18:                              alert(tip + '必须填写批注,请填写。');
  19:                          }
  20:                          else if (btn == 'cancel')
  21:                              Ext.MessageBox.alert('温馨提示', '操作已取消(' + tip + '必须填写批注)。');
  22:                          else if (remark != '' && btn == 'ok')
  23:                              Operations(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName, remark);
  24:                      }
  25:                      else {
  26:                          if (btn == 'ok')
  27:                              Operations(animEl, recodes, TypeID, iconCs, msg, progressText, taskIDName, ObjectIdName, DriverIdName, TaskTitelName, remark);
  28:                          else
  29:                              Ext.MessageBox.alert('温馨提示', '操作已取消。');
  30:                      }
  31:                  },
  32:                  animEl: animEl
  33:              });
  34:          }

用来判断相应的操作类型,假如是退回或者撤销,则必须填写批注。如:

image

至于其他的代码,我就不多介绍了,篇幅有限,精力有限。

工作台的代码,其他篇幅有部分介绍,可以参考EXT.NET复杂布局(一)——工作台

处理面板顶部工具栏有不少按钮,如何动态添加这些按钮(可以根据用户权限和事项判断),代码如下:

 

   1:          /// <summary>
   2:          /// 向工具条添加按钮
   3:          /// </summary>
   4:          /// <param name="icon">图标</param>
   5:          /// <param name="text">文本</param>
   6:          /// <param name="facode">操作Code</param>
   7:          /// <param name="toolbar">工具条</param>
   8:          /// <param name="_panelName">容器ID</param>
   9:          private static void SetButton(Icon icon, string text, FACodeEnum facode, Toolbar toolbar, string _panelName)
  10:          {
  11:              if (toolbar == null) throw new ArgumentNullException("toolbar");
  12:              var _btn = new Ext.Net.Button
  13:              {
  14:                  Icon = icon,
  15:                  Text = text,
  16:                  Listeners =
  17:                  {
  18:                      Click =
  19:                      {
  20:                          Handler =
  21:                              string.Format("toExcuteOperations(#{{{0}}}.getSelectionModel().getSelections(),'{1}');", _panelName, facode.ToString())
  22:                      }
  23:                  }
  24:              };
  25:              //设置Click事件的Handler,用于操作所选项。操作参数(所选记录集、操作Code)
  26:              if (toolbar.Items.Count > 0)
  27:                  toolbar.Items.Add(new ToolbarSeparator());
  28:              toolbar.Items.Add(_btn);
  29:          }

 

ToolbarSeparator表示分割线,比如:

image

在String.Format中,两个大括号代表一个大括号哦。

表单

还记得那个测试页么,在工作台弹出窗口后,窗口加载的是框架页,那么在这个框架页中,我们如何关闭这个窗口呢?比如提交数据完毕的时候。其实只需要输出这段脚本即可:

top.Ext.getCmp('frmStatesRequestList').destroy();

在这个框架页中,我们也可以调用首页消息函数,比如:

top.showMsg('温馨提示', '欢迎进入该页面!');

关于表单的一些介绍,请看EXT.NET复杂布局(三)——复杂表单布局

尾声

从使用EXT.NET到现在,也差不多一年了,真正使用的时间也只有几个月而已。现在回想起来,还是感慨良多。

回想当初上手的时候,不仅ext不熟悉,而且对EXT.NET也一无所知,中间碰到过许多问题,但是挺过来了,而且还留下了自己的足迹。希望我的帖子能够帮助各位更快的掌握EXT以及EXT.NET,也希望能为EXT.NET的资料库添加块砖片瓦。

最后,附上源码

目录
相关文章
|
7月前
|
消息中间件 前端开发 小程序
一个基于.NET Core构建的简单、跨平台、模块化的商城系统
今天大姚给大家分享一个基于.NET Core构建的简单、跨平台、模块化、完全开源免费(MIT License)的商城系统:Module Shop。
109 2
|
7月前
|
小程序 C# 数据库
3个.NET开源、免费、强大的商城系统
今天大姚给大家分享3个.NET开源、免费、强大的商城系统,希望可以帮助到有商城系统开发需求的同学。
147 1
|
7月前
|
SQL 开发框架 供应链
基于.NET的企业进销存管理系统的设计与实现_kaic
基于.NET的企业进销存管理系统的设计与实现_kaic
|
2月前
|
关系型数据库 C# 数据库
.NET 8.0 开源在线考试系统(支持移动端)
【10月更文挑战第27天】以下是适用于 .NET 8.0 的开源在线考试系统(支持移动端)的简介: 1. **基于 .NET Core**:跨平台,支持多种数据库,前后端分离,适用于多操作系统。 2. **结合 Blazor**:使用 C# 开发 Web 应用,支持响应式设计,优化移动端体验。 3. **基于 .NET MAUI**:跨平台移动应用开发,一套代码多平台运行,提高开发效率。 开发时需关注界面设计、安全性与稳定性。
|
2月前
|
Windows
.NET 隐藏/自定义windows系统光标
【10月更文挑战第20天】在.NET中,可以使用`Cursor`类来控制光标。要隐藏光标,可将光标设置为`Cursors.None`。此外,还可以通过从文件或资源加载自定义光标来更改光标的样式。例如,在表单加载时设置`this.Cursor = Cursors.None`隐藏光标,或使用`Cursor.FromFile`方法加载自定义光标文件,也可以将光标文件添加到项目资源中并通过资源管理器加载。这些方法适用于整个表单或特定控件。
|
3月前
|
JSON 安全 数据安全/隐私保护
从0到1搭建权限管理系统系列三 .net8 JWT创建Token并使用
【9月更文挑战第22天】在.NET 8中,从零开始搭建权限管理系统并使用JWT(JSON Web Tokens)创建Token是关键步骤。JWT是一种开放标准(RFC 7519),用于安全传输信息,由头部、载荷和签名三部分组成。首先需安装`Microsoft.AspNetCore.Authentication.JwtBearer`包,并在`Program.cs`中配置JWT服务。接着,创建一个静态方法`GenerateToken`生成包含用户名和角色的Token。最后,在控制器中使用`[Authorize]`属性验证和解析Token,从而实现身份验证和授权功能。
176 3
|
4月前
|
设计模式 存储 前端开发
揭秘.NET架构设计模式:如何构建坚不可摧的系统?掌握这些,让你的项目无懈可击!
【8月更文挑战第28天】在软件开发中,设计模式是解决常见问题的经典方案,助力构建可维护、可扩展的系统。本文探讨了.NET中三种关键架构设计模式:MVC、依赖注入与仓储模式,并提供了示例代码。MVC通过模型、视图和控制器分离关注点;依赖注入则通过外部管理组件依赖提升复用性和可测性;仓储模式则统一数据访问接口,分离数据逻辑与业务逻辑。掌握这些模式有助于开发者优化系统架构,提升软件质量。
60 5
|
4月前
|
C# Windows 开发者
超越选择焦虑:深入解析WinForms、WPF与UWP——谁才是打造顶级.NET桌面应用的终极利器?从开发效率到视觉享受,全面解读三大框架优劣,助你精准匹配项目需求,构建完美桌面应用生态系统
【8月更文挑战第31天】.NET框架为开发者提供了多种桌面应用开发选项,包括WinForms、WPF和UWP。WinForms简单易用,适合快速开发基本应用;WPF提供强大的UI设计工具和丰富的视觉体验,支持XAML,易于实现复杂布局;UWP专为Windows 10设计,支持多设备,充分利用现代硬件特性。本文通过示例代码详细介绍这三种框架的特点,帮助读者根据项目需求做出明智选择。以下是各框架的简单示例代码,便于理解其基本用法。
204 0
|
4月前
|
开发框架 NoSQL .NET
使用 Asp.net core webapi 集成配置系统,提高程序的灵活和可维护性
使用 Asp.net core webapi 集成配置系统,提高程序的灵活和可维护性
|
6月前
|
开发框架 前端开发 .NET
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
集成于VS 2019,EXT.NET前端和ASP.NET后端,搭配MSSQL 2018数据库。系统覆盖样品管理、数据分析、报表和项目管理等实验室全流程。应用广泛,包括生产质检(如石化、制药)、环保监测、试验研究等领域。随着技术发展,现代LIMS还融合了临床、电子实验室笔记本和SaaS等功能,以满足复杂多样的实验室管理需求。
83 3
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码