ExtJs八(ExtJs Mvc创建ViewPort续)

前言

现在要考虑的是如何加载标签页内的内容。虽然标签页默认是延迟渲染的(deferredRender值默认为true),但是它会预加载所有的类,因而当类文件很多的时候,加载时间就是一大问题了。这个,也可通过SDK打包的方式解决,不过在设计阶段还是要考虑的。另一种好的解决方法是,只使用标签页的标签,而不使用其主体加载内容,另外使用一个容器,内部使用CardLayout作为布局.

在这里,将展示另一种方式,就是在标签页激活时才去加载内容页。因而,这需要监听标签页的activate事件。这样,问题又来了,是在标签页面板监听activate事件,还是在每个独立的标签页内监听activate事件。如果是在标签页面板内监听,就要判断当前标签页的哪一个,是否需要加载内容,因为文章的详细信息页也是标签页,因而这些都需要做判断。因为虽然写法简化了,但是要做的判断实在太多,不算太好的方法。而在具体标签页内监听,则不需要任何判断,而且可以设置事件为一次性性事件,也就是在监听时设置事件的single配置项为true,这样监听事件在执行一次后就会自动删除,不再监听了。

要在Viewport内为各标签页添加activate事件,就不太符合MVC要求了。是的,这个在顶部实现退出按钮的时候已经违反要求了。因而都需要做出修改。

正题

 为了实现标签页的MVC化,先在view目录下创建一个名称为MainPanel.js的文件,在文件里定义一个扩展于标签面板的控件,基本代码如下:

Ext.define('ExtMVCOne.view.MainPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mainpanel',
    flex: 1,
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
    }
});

使用配置项alias来为组件定义一个别名非常有必要,不然在Viewport就不能使用xtype来创建组件了,在这里,别名是mainpanel。在initComponet方法内,将Viewport创建mainpanel实例的代码复制过来,并修改如下:

        me.items = [
            { title: "文章管理", id: "contentPanel" },
            { title: "图片管理", id: "picPanel" }
        ];

        var roles = '.' + ExtMVCOne.Userinfo.Roles.join('.') + '.';
        if (roles.indexOf('.系统管理员.') >= 0) {
            me.items.push({ title: "用户管理", id: "userPanel" });
        }

因为是在组件内,所以将标签页加到items里就行了。要注意,所有标签页都添加了id,其目的是为了方便在控制器中找到面板,当然,这个使用其它方式获取也行,只是这样的方式是最快最直接的。这个可根据项目具体情况再做决定。还要注意,添加用户管理标签页时,用的是数组的push方法,而不是面板的add方法了。

现在,在Controller目录创建一个名称为MainPanel.js的脚本文件,用来定义主面板的控制,基本定义代码如下:

Ext.define('ExtMVCOne.controller.MainPanel', {
    extend: 'Ext.app.Controller',
    init: function () {
    }
});

因为控制器里不需要引用组件,也不需要模型和Store,因而没有定义refs、store和model配置项,只是定义了init方法。在init方法内,需要使用控制器的control方法来获取主面板内的标签页,并为其添加activate事件,具体代码如下:

        this.control({
            '#contentPanel': {
                activate: {
                    single: false,
                    fn: function (panel) {
                        Ext.Msg.alert("提示信息",panel.title);
                    }
                }
            },
            '#picPanel': {
                activate: {
                    single: true,
                    fn: function (panel) {
                        Ext.Msg.alert("提示信息", panel.title);
                    }
                }
            },
            '#userPanel': {
                activate: {
                    single: true,
                    fn: function (panel) {
                        Ext.Msg.alert("提示信息", panel.title);
                    }
                }
            }
        });

代码中,对象中的关键字就是选择器,用来查找组件用的,在这里要使用id来查找,因而在组件id前面要添加“#”符号,表示使用id查找组件。在组件内,绑定了activate事件,事件中,single配置项说明该事件只执行一次,配置项fn则是事件的回调函数,目前只是简单的显示返回的面板对象。

在这里,没有使用权限添加用户面板的原因是,如果找不到组件,它不会做任何处理,因而不使用权限添加也没问题的,不像可视组件内,如果不限制,就会显示出来。在这里,一般都会担心,这会不会造成安全问题?被利用来实现无权限的操作,这个其实不用担心,就算它能看到显示的组件,但是我后台通过权限控制返回的数据,它没有权限,是看不到任何数据的,也不能对没权限的数据进行任何操作。

控制器定义好以后,切换会Viewport.js,先添加一个requires配置项,让其自动加载MainPanel,代码如下:

requires: ['ExtMVCOne.view.MainPanel'],

这句是必须的,不然会找不到组件。 然后将之前添加mainpanel的代码全部删除,在items内原来添加主面板的位置添加以下代码来添加主面板视图:

{xtype: "mainpanel", id: "mainPanel" },

在这里,也加了一个id,也是为了方便以后使用选择器查找组件。 因为要加载主面板的控制器,所以要在首页Index.cshtml使用application方法创建应用时添加controllers配置项,代码如下:

controllers:["MainPanel"]

现在,在浏览器中打开首页,使用test用户登录,会看到界面和之前看到的没有区别。

可以点击一下图片管理,那么会弹出图片管理的提示框,然后再点击文章管理,同样还是会出现文章管理的提示框。原因就是activate事件设置了配置项single为false,相反如果设置为true,那么它就会像图片管理一样只会执行一次。

示例代码下载链接http://files.cnblogs.com/aehyok/ExtJsViewPortTwo.zip

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玄魂工作室

textarea的中文输入判断与搜狗输入法的特殊行为

虽然要讲解的知识点是通用的,但是还是要介绍下我的应用场景和测试环境。 0.1 应用场景和测试环境 我的应用是一块使用Html Canvas开发的黑板,在黑板上实...

42511
来自专栏iOS开发攻城狮的集散地

更改网页的标签

1634
来自专栏前端vue

element导航问题总结

官方文档 router-link-active----激活 class 类名 router-link-exact-active----精确激活的默认的 cl...

5574
来自专栏移动开发之家

从Android到React Native开发(三、自定义原生控件支持)

恍惚间3个月过去了,作为揭棺而起的失踪人口,迟来的第三篇,也是react native原生相关的最后的一篇,是时候给收个尾了。这次就不废话了,直接上主题( ̄^ ̄...

521
来自专栏Modeng的专栏

更好的理解 Script 标签元素

我们在 《Javascript简史》这遍文章中说过,「Javascript」这门语言是由 Netscape开发而来,当初开发的时候为了能让 「Javascrip...

1152
来自专栏Angular&服务

防止微信小程序页面多次跳转

1003
来自专栏极客日常

教你如何全键盘操作 Chrome 浏览器

推荐两款插件, SurfingKeys 和 Steward,让你全键盘高效操作浏览器。老规矩,附视频教学。

1K2
来自专栏守望轩

Visual Studio 2008 每日提示(二十)

#191、把代码拖拽到工具箱的常规选项卡 原文链接:drag and drop code onto the Toolbox General tab 操作步骤:...

3955
来自专栏Crossin的编程教室

在 Win 控制台中实现菜单

本教室的 hymyg 同学实现了两个控制台下的实用模块,发在了论坛上。我觉得挺不错的,于是分享其中的一个给大家。对项目感兴趣,想进一步了解细节的,可以在公众号里...

2875
来自专栏美奔科技

向Windows 服务器传输大文件

https://support.microsoft.com/zh-cn/help/2258090/copying-files-larger-than-2-gb-...

8282

扫码关注云+社区

领取腾讯云代金券