当前位置:编程学习 > JS >>

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

最近自学的Extjs4,今天试着用MVC做了个类似后台管理系统的界面,正在逐步完善中,有做的不好的地方希望能提出建议,
完整代码我会在完全做完之后传上
首先建立相应的文件目录如下

controller:放控制器的文件夹
model:放模型类/实体类,这里暂时没有用到
store:存放数据的,暂时为用到
view:放视图类的
建完目录结构,接下来建立首页:index.html:
[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:
[javascript] 
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:
[javascript]
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:
[javascript]
Ext.define('HT.view.Top',{ 
    extend:'Ext.Component', 
    alias:'widget.top',//注意不要忘了写“widget”否则会找不到并且报错<a href="http://blog.csdn.net/lc448986375/article/details/8014401" style="color: rgb(0, 0, 0); text-decoration: none; font-family: 'Microsoft YaHei'; line-height: 30px; "><span style="font-size:10px;">Uncaught TypeError: Cannot call method 'substring' of undefined</span></a> 
    padding: 10, 
    html:'欢迎使用', 
    region:'north' 
}); 

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

左侧的导航栏:Accordion.js,采用布局方式问accordion
[javascript]
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:[ 
        {   
补充:web前端 , JavaScript ,

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,