Extjs4---用MVC做的后台管理系统之一

最新推荐文章于 2016-01-19 19:09:21 发布

小姐你喜不喜欢吃青椒

最新推荐文章于 2016-01-19 19:09:21 发布

阅读量5.6k

点赞数 3

分类专栏： Java Web extjs4

本文链接：https://blog.csdn.net/lc448986375/article/details/8016292

版权

extjs4 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

Java Web

25 篇文章 0 订阅

订阅专栏

最近自学的Extjs4，今天试着用MVC做了个类似后台管理系统的界面，正在逐步完善中，有做的不好的地方希望能提出建议，

完整代码我会在完全做完之后传上

首先建立相应的文件目录如下

controller：放控制器的文件夹

model：放模型类/实体类，这里暂时没有用到

store：存放数据的，暂时为用到

view：放视图类的

建完目录结构，接下来建立首页：index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
    <script type="text/javascript" src="ext4/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>

  </head>
  <body>
  	
  </body>
</html>

然后建app.js：

Ext.Loader.setConfig({enabled:true});//必须加这句，否则会报错
Ext.application({
		//定义命名控件
		name:'HT',
		//定义文件夹
		appFolder:'app',
		//添加控制器
		controllers:['Controllers'],
		//页面完全加载后将运行此方法
		launch:function() {
	        Ext.create('Ext.container.Viewport', {
	        	//布局方式
	        	layout:'border',
	            items: [{
	            			xtype:'top'//这里可以写对应view的alias的属性
	            		},{
	                    	xtype:'accordion'
	                    },{
	                    	xtype:'center'
	                    },{
	                    	xtype:'bottom'
	                    }
	            ]
	        });
	    }
	}
);

接下来建控制器Controller.js:

Ext.define('HT.controller.Controllers',{//定义类
		extend:'Ext.app.Controller',//一定要继承Controller
		//添加views，让控制器找到
		views:[
			'Accordion',
			'Center',
			'Top',
			'Bottom'
		],
		//自动调用此方法
		init:function(){
			console.log('The panel was rendered');
		}
	}
);

接下来建立四个view：

顶部Top.js:

Ext.define('HT.view.Top',{
	extend:'Ext.Component',
	alias:'widget.top',//注意不要忘了写“widget”否则会找不到并且报错Uncaught TypeError: Cannot call method 'substring' of undefined
	padding: 10,
	html:'欢迎使用',
	region:'north'
});

底部Bottom.js:

Ext.define('HT.view.Bottom',{
	extend:'Ext.Component',
	padding: 10,
	alias:'widget.bottom',
	html:'版权所有   欢迎使用',
	region:'south'
});

左侧的导航栏：Accordion.js,采用布局方式问accordion

Ext.define('HT.view.Accordion',{
	extend:'Ext.panel.Panel',
	title:'系统设置',
	alias:'widget.accordion',
	//是否可以折叠
	collapsible: true,
	//是否可以通过拖动改变宽度
	split:true,
	width:200,
	//布局方式
	layout:'accordion',
	region:'west',
	layoutConfig: {          
        titleCollapse: true,    //设置为点击整个标题栏都可以收缩     
        animate: true,  //开启默认动画效果         
        activeOnTop: true   //展开的面板总是在最顶层        
    },
    items:[
    	{  
            title:'首页设置',
            html:'设置首页'
            
        },{  
            title:'导航栏设置',  
            html:'导航栏'  
        },{  
            title:'文章设置',  
            html:'文章设置'  
        },{
        	title:'留言设置',
        	html:'留言'
        }
    ]
});

中间用的tabpanel,Center.js:

Ext.define('HT.view.Center',{
		extend:'Ext.tab.Panel',
		//layout:'fit',
		//注意 加上widget.
		alias:'widget.center',
		region:'center',
		activeTab:0,
		items:[
		       {
		    	   title:'主页',
		    	   html:'欢迎使用后台管理系统 版本1.0'
		       }
		],
		initComponent:function(){
			this.callParent(arguments);
		}
	}
)

运行效果如下：