天天看点

EXT.NET复杂布局(四)——系统首页设计(下)首页JS函数介绍页面布局工作台表单尾声

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

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

1.添加选项卡

注意maskMsg,它有以下效果:

EXT.NET复杂布局(四)——系统首页设计(下)首页JS函数介绍页面布局工作台表单尾声

2.显示消息

EXT.NET复杂布局(四)——系统首页设计(下)首页JS函数介绍页面布局工作台表单尾声

3.弹出窗口

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

EXT.NET复杂布局(四)——系统首页设计(下)首页JS函数介绍页面布局工作台表单尾声

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

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

值得注意的是Center面板:

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

EXT.NET复杂布局(四)——系统首页设计(下)首页JS函数介绍页面布局工作台表单尾声

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

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

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

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

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

EXT.NET复杂布局(四)——系统首页设计(下)首页JS函数介绍页面布局工作台表单尾声

自适应区域:

弹出窗体:

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

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

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

比如这个函数:

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

EXT.NET复杂布局(四)——系统首页设计(下)首页JS函数介绍页面布局工作台表单尾声

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

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

ToolbarSeparator表示分割线,比如:

EXT.NET复杂布局(四)——系统首页设计(下)首页JS函数介绍页面布局工作台表单尾声

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

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

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

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

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

继续阅读