专栏首页技术博客ExtJs八(ExtJs Mvc创建ViewPort续)

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 条评论
登录 后参与评论

相关文章

  • Knockout.Js官网学习(Mapping高级用法二)

    如果在map的时候,你想忽略一些属性,你可以使用ignore累声明需要忽略的属性名称集合:

    aehyok
  • Asp.Net MVC对类HtmlHelper的自定义扩展方法以及如何调用

    c# 扩展方法出来已久,介绍扩展方法的文章也很多,此处就不多介绍,如有不懂当然可以百度,google一下,园子当中也有超级多的讲解。

    aehyok
  • Asp.Net MVC3.0项目部署到Win7 64过程总结

       之前一直是通过Visual Studio直接F5来运行自己编写的项目或者小程序,很少通过部署发布到IIS上面,于是自己便在自己的笔记本上进行测试,结果还真...

    aehyok
  • Python3网络爬虫(一):利用urllib进行简单的网页抓取

    运行平台:Windows Python版本:Python3.x IDE:Sublime text3  一直想学习Python爬虫的知识,在网...

    Jack_Cui
  • SAP CDS View DefaultAggregation Annotations

    http://help.sap.com/saphelp_nw75/helpdata/en/5e/5d319bd1a74552b99a36dfc739f74d/c...

    Jerry Wang
  • mysql存储过程和存储函数的使用

    create procedure name(IN | OUT |INOUT str STRING) #定义存储过程名字

    93年的老男孩
  • 最佳 Linux 发行版汇总

    Linux入门 Ubuntu Ubuntu是一款基于Debian发行版,以Unity作为默认桌面环境的Linux操作系统。他是世界上最流行的发行版之一,最新发...

    小小科
  • 最佳 Linux 发行版汇总

    Ubuntu是一款基于Debian发行版,以Unity作为默认桌面环境的Linux操作系统。他是世界上最流行的发行版之一,最新发行版为桌面、移动及其桌面移动混合...

    小小科
  • SDK集成第三方依赖发布Maven的方法

    aar引用很简单,将aar复制到libs包下,在项目的build.gradle文件中增加以下代码即可(以aarName.aar为为例):

    Anymarvel
  • Linux ,越折腾越喜欢

    今天这波分享可以说是自己热血来潮。起因是自己收到某个问答社区小秘的问题邀请。问题是《谁能给我推荐几本linux的书?从基础到进阶提高的linux书?》。自己挺怀...

    猴哥yuri

扫码关注云+社区

领取腾讯云代金券