NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统（2）--ExtJS MVC实现系统框架页

最新推荐文章于 2012-11-05 10:56:59 发布

置顶 mengxinjinglong

最新推荐文章于 2012-11-05 10:56:59 发布

阅读量1.4k

点赞数

分类专栏： NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统文章标签： mvc extjs asp.net stylesheet null

本文链接：https://blog.csdn.net/mengxinjinglong/article/details/8098480

版权

NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本篇主要实现的是系统的框架页，同时会采用ExtJS4.0之后出现的MVC。既然主要是摆上例子，那神马都不说了，先上图。

图中我们只是简单的进行了划分，把页面分成三部分：Logo，系统菜单，显示主界面。

好了，接下来，我们就一步一步开始完成实现以上界面的代码吧！

1、我们还是先看看下载下来的ExtJS中的文件列表，如下

具体的文件具有什么作用，我在这里就不说了，其实我一不怎么明白，以后我会慢慢的把这部分的内容补上...希望大家看到这里的时候，能先了解这些文件的大概用途吧~

那么，在本项目中，我剔除了一些资源比较大的文件夹，剩下的内容如下图，也就是在项目中的文件结构：

（项目文件结构图一）（项目文件结构图二）

2、我们在了解了使用ExtJS开发所需要的文件之后，我们开始进入正题，因为我们采用的是ExtJS的MVC，和以往的的方式有点不同，文件的结构如项目文件结构图一、二。

代码部分如下

A.Index.aspx中的代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="RoleManage.Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>权限管理系统</title>
    <link rel="stylesheet" type="text/css" href="extjs4.1.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs4.1.1/ext-all-debug.js"></script>
    <script type="text/javascript" src="extjs4.1.1/locale/ext-lang-zh_CN.js" charset="utf-8"></script>
    <script type="text/javascript" src="app/app.js"></script>
</head>
<body>
</body>
</html>

对于Index.aspx中，我们看到自己的js代码只有app.js，这是应用程序开始的类。具体的怎么样执行，这里就不多做介绍了，因为网上已经有很多的文章都做了详细的翻译和介绍，如果大家有很好的介绍资料，也可以分享下。

（以下部分是网上截得的注释）

Extjs4 MVC有别于其他MVC架构，Extjs有他自己定义：

1、Model是一个Field以及他的Data的集合，Modes知道如何通过Stores来表示数据，以能用于网格和其他组件。模型的工作很像Extjs3的记录集（Record class），通常通过数据加载器（Stores）渲染至网格（grid）和其他组件上边。

2、View：用以装载任何类型的组件—grid、tree和panel等等。

3、Controller—用来放使得app工作的代码，例如 render views , instantiating Models 或者其他应用逻辑。

B.app/app.js

Ext.Loader.setConfig({ enabled: true });
Ext.application({
    name: 'RoleManage',
    autoCreateViewport: true,
    appFolder: 'app', //应用文件夹名字
    
    controllers: [//加载controller文件夹下定义controllers的WestTree
         'WestTree'
    ]

});

属性autoCreateViewport的值为Boolean类型，如果为true，ExtJS会自动加载view/Viewport.js；如果值为false，则那么就必须自己去创建一个View。

C.app/view/Viewport.js

Ext.define('RoleManage.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',
    id:'Viewport',
    hideBorders: true,
    //加载需要引用额命名空间
    requires: [
		'RoleManage.view.NorthHeader',
		'RoleManage.view.NorthHeader',
		'RoleManage.view.CenterTabPanel'
	],
    initComponent: function () {
            Ext.apply(this, {
                items: [{
                layout: 'border',//设置布局
                items: [
                    Ext.create('RoleManage.view.NorthHeader'),
                    Ext.create('RoleManage.view.WestTree'),
                    Ext.create('RoleManage.view.CenterTabPanel')
                    ]
                }]
            });
        this.callParent(arguments);
    }
});

D.app/view/NorthHeader.js（Logo部分）

Ext.define('RoleManage.view.NorthHeader', {
    extend: 'Ext.Component',
    //alias: 'widget.NorthHeader',
    html: 'role manage',//显示role manage
    region: 'north',//设置显示位置为北方,即上方
     height:50
});

E.app/view/WestTree.js

Ext.define('RoleManage.view.WestTree', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.WestTree',//组件别名，可以在xtype中引用，引用只需要WestTree'
    id:'WestTree',
    region: 'west',
    width: 200,
    title:'菜单导航',
    store: 'WestTree',//设置菜单数据集为store中的WestTree
    rootVisible: false,
    root: {
        expanded:true
    }

});

F.app/view/CenterTabPanel.js

Ext.define('RoleManage.view.CenterTabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.CenterTabPanel',
    id:'CenterTabPanel',
    region: 'center',
    activeTab: 0,
    items: [{
        title: '首页',
        html: '首页内容'
    }]
});

G.app/controller/WestTree.js

Ext.define('RoleManage.controller.WestTree', {
    extend: 'Ext.app.Controller',
    stores: ['WestTree'],
    models: ['WestTree'],
    views: ['WestTree'],

    init: function () {
	//初始化部分，下面是部分是给菜单绑定单击事件，接下来会用，这里先注释
        //this.control({
          //  'WestTree': {
          //    itemclick: function (tree, record, item, index, e, eOpts) {
          //          var tab = Ext.getCmp('CenterTabPanel');//根据组件的id返回组件对象
          //         //var tabID = record.data.url + record.data.id;
          //          var currentTab = tab.getComponent(tabID);
          //          if (!currentTab) {
          //              tab.add(
          //              {
          //                  id: record.data.url,
          //                  title: record.data.text,
          //                  xtype: record.data.url,
          //                  closable: true,
          //              }).show();
          //          } else {
          //              tab.setActiveTab(currentTab);
          //          }
          //      }
          //}
          //});
    }

});

H.app/model/WestTree.js

model的定义

Ext.define('RoleManage.model.WestTree', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', mapping: 'id' },
        { name: 'text', mapping: 'vcName' },
        { name: 'url', mapping: 'vcUrl' },
        { name: 'leaf', defaultValue: true }
        ]
});

I.app/store/WestTree.js

Ext.define('RoleManage.store.WestTree', {
    extend: 'Ext.data.TreeStore',
    model: 'RoleManage.model.WestTree',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '../data/menuInfo.json',//我们这里直接写到json中
        reader: {
            type: 'json',
            //root: 'users',
            successProperty: 'success'
        }
    }

});

J.data/menuInfo.json

[{"id":1,"vcName":"用户管理","iParent":0,"vcPictureUrl":null,"iGroup":1,"vcUrl":"userlist"},{"id":2,"vcName":"用户组管理","iParent":0,"vcPictureUrl":null,"iGroup":2,"vcUrl":"grouplist"},{"id":3,"vcName":"动作管理","iParent":0,"vcPictureUrl":null,"iGroup":3,"vcUrl":"actionlist"},{"id":4,"vcName":"角色管理","iParent":0,"vcPictureUrl":null,"iGroup":4,"vcUrl":"rolerlist"},{"id":5,"vcName":"角色权限管理","iParent":0,"vcPictureUrl":null,"iGroup":5,"vcUrl":"rolelist"},{"id":8,"vcName":"菜单管理","iParent":0,"vcPictureUrl":null,"iGroup":6,"vcUrl":"menulist"}]

以上给整个系统框架页的所有代码，由于对项目原理不甚明了，所以只给大家贴代码为主，由于第一次写，诸多问题，惊敬请谅解。

推荐下自己的淘宝小店女装：诗语情裳

mengxinjinglong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统（2）--ExtJS MVC实现系统框架页

本篇主要实现的是系统的框架页，同时会采用ExtJS4.0之后出现的MVC。既然主要是摆上例子，那神马都不说了，先上图。图中我们只是简单的进行了划分，把页面分成三部分：Logo，系统菜单，显示主界面。好了，接下来，我们就一步一步开始完成实现以上界面的代码吧！1、我们还是先看看下载下来的ExtJS中的文件列表，如下具体的文件具有什么作用，我在这里就不说了，其实我一不怎么明白，以
复制链接

扫一扫