在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用application方法开始执行应用程序,简化了。下面学步园小编来讲解下怎样使用ExtJSMVC与Asp.NetMVC3创建简单的CMS后台管理系统?
怎样使用ExtJSMVC与Asp.NetMVC3创建简单的CMS后台管理系统
调用application方法,其参数是一个配置对象,主要配置项有以下两个:
lname:用来定义应用程序的名称,在这里是SimpleCMS。
lappFolder:应用程序的路径,这里是scripts/app
lautoCreateViewport:默认值为false,在这里要设置为true,让它自动加载ScriptappView目录下的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。在解决方案资源管理器中,在ScriptappView目录上单击右键添加一个名为Viewport.js的脚本文本。在文件中需要定义一个从Ext.container.Viewport派生的类,用来搭建应用程序的整体界面。本示例将构建一个类似于ExtJSAPI的用户界面,分顶部、主区域、底部三部分。顶部主要是显示系统名称和退出等按钮,主区域使用标签页来显示管理的内容,而文章内容的详细信息页也会已标签页形式显示。底部纯粹是占位区,可以写一些状态信息等,但是在本示例就不做了,有兴趣自己研究一下。
怎样使用ExtJSMVC与Asp.NetMVC3创建简单的CMS后台管理系统
目标明确后,先下好新类的定义框架,代码如下:
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,既方便未来访问,也方便定义样式。
以上就是关于“怎样使用ExtJSMVC与Asp.NetMVC3创建简单的CMS后台管理系统”的内容,希望对大家有用。更多资讯请关注学步园。学步园,您学习IT技术的优质平台!