一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(1)

原创 2012年09月16日 17:02:26

忙活了那么久,终于进入正题,Ext JS MVC开发。

开始前,先说说4.1.1的一点点变化。在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用application方法开始执行应用程序,简化了。

调用application方法,其参数是一个配置对象,主要配置项有以下两个:

l name:用来定义应用程序的名称,在这里是SimpleCMS。

l appFolder:应用程序的路径,这里是scripts/app

l autoCreateViewport:默认值为false,在这里要设置为true,让它自动加载\Script\app\View目录下的Viewport.js文件。因为目录已经在Loader中配置好了,因而不用设置目录。

在VS2010中,打开首页Index.cshtml,在用户信息下加入以下代码:

                Ext.onReady(function () {

                    if (Ext.BLANK_IMAGE_URL.substr(0, 4)!= "data") {

                        Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";

                    }

 

                    Ext.application({

                        name:"SimpleCMS",

                      appFolder:"scripts/app",

                        autoCreateViewport:true

                    });

 

                })

 

 

这样,应用程序就运行起来了,现在要创建Viewport.js。在解决方案资源管理器中,在\Script\app\View目录上单击右键添加一个名为Viewport.js的脚本文本。在文件中需要定义一个从Ext.container.Viewport派生的类,用来搭建应用程序的整体界面。本示例将构建一个类似于Ext JS API的用户界面,分顶部、主区域、底部三部分。顶部主要是显示系统名称和退出等按钮,主区域使用标签页来显示管理的内容,而文章内容的详细信息页也会已标签页形式显示。底部纯粹是占位区,可以写一些状态信息等,但是在本示例就不做了,有兴趣自己研究一下。

目标明确后,先下好新类的定义框架,代码如下:

Ext.define('SimpleCMS.view.Viewport',{

    extend: 'Ext.container.Viewport',

 

   initComponent: function () {

       varme=this;

       me.callParent(arguments);

    }

 

});

 

 

代码中,一定要注意类名,类名中最后一个小数点之前的内容为目录,之后的是文件名。在这里因为SimpleCMS指向的目录是scripts/app,因而文件所在目录是scripts/app/view,正是当前文件所在目录。

现在考虑一下使用什么布局,因为是垂直划分的三部分,因而不需要使用到Border布局了,使用VBox就可以了,现在加入布局:

layout: { type: 'vbox', align: 'stretch' },

 

这里一定要加align,以便布局可以填满宽度。

现在,在items中加入界面的三个部分。顶部因为还要添加按钮,因而使用一个工具栏比较方便;中部是标签页;底部只是占位,用Component就行了。代码如下:

        me.items = [

            { xtype: "toolbar", height: 53, id:"North" },

            { xtype: "tabpanel",flex:1,

                items: [

                    { title: "文章管理" },

                    { title: "图片管理" },

                    { title: "用户管理" }

                ]

            },

            { xtype: "component",height:13,id:"South" }

        ];

 

代码中,顶部的高度是53,底部是13。主体部分设置flex为1,表示它会占据剩余的空间。定义id,既方便未来访问,也方便定义样式。

现在,在浏览器打开页面,登录后将看到如图17所示的效果。

图17 基本框架

基本框架出来了,要美化一下顶部和底部。在app目录下创建一个resources目录,在这里将存放应用程序的资源,如样式文件和图片。接着下下面创建css目录和images目录,css目录用来放置应用程序样式文件,images目录用来放置图片。在css目录下创建一个app.css的样式文件。然后添加一下样式:

#North,#South{

     background:#6C86AE !important;

     background-image: -webkit-gradient(linear,50% 0%, 50% 100%, color-stop(0%, #6C86AE), color-stop(100%, #526C95)) !important;

     background-image: -webkit-linear-gradient(top,#6C86AE, #526C95) !important;

     background-image: -moz-linear-gradient(top,#6C86AE, #526C95) !important;

     background-image: -o-linear-gradient(top,#6C86AE, #526C95) !important;

     background-image: -ms-linear-gradient(top,#6C86AE, #526C95) !important;

     background-image: linear-gradient(top,#6C86AE, #526C95) !important;

     border: 1px solid #567422 !important;

}

 

 

将样式文件添加到首页,然后刷新一下页面,将看到如图18所示的效果。

图18 美化后的框架

现在看上去差不多了。

接着来完善一下顶部的显示,先加一个Component来显示项目名称,代码如下:

            { xtype: "toolbar", height:53,id:"North" ,

                items: [

                    { xtype: 'component', cls: 'logo', html: '简单的CMS后台管理系统' },

                ]

            },

 

这里需要为组件定义一个样式logo来改变显示文字的大小,样式代码如下:

.logo {

  padding: 10px 10px 10px 31px !important;

  /*background: url(../images/logo.png)no-repeat 10px 12px;*/

  color: #fff !important ;

  font-size: 18px !important;

  font-weight: bold !important;

  text-shadow: 0 1px 0 #4e691f !important;

}

代码中屏蔽了logo,如果有logo,可以恢复代码显示logo。

刷新一下页面会看到如图19所示的标题。

图19 页面标题

接着在工具来的最右边加一个退出按钮,用图标显示。先将图标文件(logout.png)复制到images目录。然后,添加以下代码来添加图标:

"->",

{iconCls: "logout", tooltip: "退出", scale: "large",

    handler:function(){

        window.location="Account/Logout";

    }                       

}

“->”符合会让工具栏的图标显示在右边。图标定义了scale为large,表示显示的是32*32的大图标。单击按钮会将页面转到Account控制器的Logout方法。

在css文件中添加logout样式:

.logout{

     background:url("../images/logout.png") !important;

}

 

刷新一下页面,会看到如图20所示的退出图标。

图20 退出图标

退出操作不难,顺便完成了,切换到Account控制器,添加一个Logout方法,方法内,调用SignOut方法退出认证,并调整到首页就行了,代码如下:

        public ActionResult Logout()

        {

            FormsAuthentication.SignOut();

            return RedirectToAction("Index", "Home");

        }

 

重新生成一下应用程序,然后在浏览器打开页面测试一下退出按钮。可以切换到登录页,表示退出操作已经完成了。

现在考虑主面板部分。因为用户管理只有系统管理员可以看到,因而现在这模式不便于进行处理,需要将它抽出来,先创建面板对象,然后根据权限添加需要的标签页。将items中的主面板代码删除,然后在它之前添加创建主面板的代码:

        me.mainpanel = Ext.widget("tabpanel", {

            flex: 1, id: "mainPanel",

            items: [

                { title: "文章管理" },

                { title: "图片管理" }

            ]

        });

 

代码中,添加了一个id,以便未来调用。文章管理和图片管理因为全部用户都可见,因而可以预添加在标签页里。

在Viewport的items里,把mainpanel添加到原来的代码位置。

接着要做的是通过Userinfo判断用户是否管理员,如果是,添加用户管理标签页,代码如下:

varroles = "." + SimpleCMS.Userinfo.Roles.join('.') + ".";

if(roles.indexOf(".系统管理员.") >= 0) {

    me.mainpanel.add({ title: "用户管理" });

}

 

因为在Userinfo中,角色是保存在数组中的,因而这里将其转换为字符串后再比较。调用标签页的add方法就可将新标签添加到标签页中了。

现在,在浏览器中用test用户登录页面,将看不到用户管理了。换admin登录,就可看到用户管理。这说明权限控制已经成功了。

以上控制权限的方法之后笔者习惯使用的方式,您可以根据自己的需要利用不同的方式,控制按钮、页面显示等方式都是一样的。Ext JS 4一个方便的地方就是用add、remove等方法可以很容易添加或移除组件。

好了,今天就到这了。

 

 源代码下载地址:http://download.csdn.net/detail/tianxiaode/4573793

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(2)

现在要考虑的是如何加载标签页内的内容。虽然标签页默认是延迟渲染的(deferredRender值默认为true),但是它会预加载所有的类,因而当类文件很多的时候,加载时间就是一大问题了。这个,也可通过...

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(1)

应用程序的基本框架已经搭建好了,现在要做的是完成一个个的功能模块。先从简单做起,完成用户管理模块,该模块主要功能是使用一个Grid显示用户信息,并使用RowEditing进行用户的编辑、添加操作。Gr...

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目

打开VS2010,在主菜单选择文件,新建,项目,在如图1所示的弹出窗口中已安装的模板下选择C#的Web模板,然后选择“ASP.NET MVC 3 Web应用程序”,将项目名称修改为SimpleCMS,...

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之完成登录功能

登录窗口已经完成了,现在可以完成最后的工作了,主要就是完成Membership提供者的配置。首先打开Web.Config文件,在configuration段内添加一个数据库连接定义,代码如下: >  ...

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之调整首页显示

登录后,因为只是刷新首页,并没有跳转页面,因而要调整一下首页显示,以便登录后显示系统界面。要区分登录前和登录后,判断Request的IsAuthenticated方法就可以。因为要通过服务器段代码执行...

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口调试

现在可以对登录窗口进行调试了。      打开系统的首页页面文件,Views\Home目录下的Index.cshtml文件。要动态加载登录窗口,需要先设置好加载路径,因而在onReady函数上加入以下...

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口

完成配置后,要做的是完成登录页面。因为要实现登录之后写入认证信息到Cookie,因而必须做一次跳转。当然,不做跳转,或不写入认证信息也行,但问题比较复杂,在这里还是做简单处理比较合适。还有就是写入认证...

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(2)

现在,创建视图,在Scripts\app\view目录下先创建目录Users,然后在该目录下创建View.js。要使用Grid显示用户信息,因而要从Grid面板派生出视图。定义的时候要注意视图的类名。...

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(4)

现在来完成删除功能。目前的Grid,一次只能选择一行,也就是说,一次只能删除一行,不太方便,因而要设置成使用复选框选择,并允许多选的。在用户视图脚本文件中,添加以下配置项实现这个:    selTyp...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(1)
举报原因:
原因补充:

(最多只允许输入30个字)