extjs4之mvc开发

mvc开发模式是提供给大家一个编程的规范方便业务的开发和维护

model  view  controller 一般我们还会多出一层store作为数据存储器

解除过mvc思想的朋友相比都清楚每一层都是干嘛的在这里我们的view一般就是提供各种组件的,而具体的控制我们就是放在controller,在这里我们

一般还会有一个加载文件app.js这个文件一般负责加载各种文件的,

实现的业务是在一个Viewport的左侧导航栏里加载一个树,点击树节点在中部跳到指定的连接

宿主文件test.jsp

1 <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css" />
2 <script type="text/javascript" src="extjs/ext-all.js"></script>
3 <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
4 <script type="text/javascript" src="js/erp/erpapp.js"></script>
5 <!-- <script type="text/javascript" src="js/erp/view/index.js"></script> -->
6 </head>
7 <body>
8 <iframe id='contentIframe' name='contentIframe' style='height:100%;width:100%' frameborder="no"></iframe>
9 </body>

erpapp.js文件

 1 Ext.onReady(function() {
 2     //开启悬浮提示功能
 3     Ext.QuickTips.init();
 4     //开启动态加载
 5     Ext.Loader.setConfig({
 6         enabled : true,
 7     });
 8     //创建应用程序的实例
 9     Ext.application({
10         //
11         name : 'erp',
12         appFolder : 'js/erp',
13         controllers : ['BaseController'],
14         autoCreateViewport : true
15     });
16 });

在这个文件里我们主要就是开启动态加载功能,以及提供相应的controller

BaseController.js

 1 Ext.define('erp.controller.BaseController',{
 2     extend : 'Ext.app.Controller',
 3     views : ['Viewport','TreePanel'],
 4     stores : ['TreeStore'],
 5     model : ['TreeModel'],
 6      //通过init函数来监听视图事件,控制视图与控制器的交互
 7     init: function() {
 8         //init函数通过this.control来负责监听
 9         this.control({
10                         //被监听的组件的别名
11             'treepanel': {
12                 //监听鼠标点击事件,点击后调用changePage方法
13                 itemclick: this.changePage,
14             }
15         });
16     },
17     changePage:function(view, rec,item,index,e){
18          console.info(rec);
19          console.info(view);
20         var url = rec.get('url');
21         var title = rec.get('text');
22         console.info('lll'+url);
23         Ext.getDom('contentIframe').src = url;
24         Ext.getCmp('mainContent').setTitle(title);
25     }
26 });

这个文件需要注意的是我们提供的那些model view 等等都是文件名,因为开启了动态加载功能extjs会自动的加载这些类

Viewport.js

 1 Ext.define('erp.view.Viewport', {
 2     extend : 'Ext.container.Viewport',
 3     // 布局方式:border
 4     layout : 'border',
 5     items : [ {
 6         collapisble : true,
 7         region : 'north',
 8         border : false,
 9         height : 80,
10         html : '<br><center><font size=5>Tender1.1.2 </font><font size=3>竞标平台</font></center>',
11     }, {
12         title : 'Management',
13         region : 'west',
14         width : 180,
15         split : true,
16         collapisble : true,
17         //这里是修改的部分
18         items:[{
19              xtype: 'treepanel'
20         }]
21     }, {
22         id : 'mainContent',
23         title : 'Welcome',
24         layout : 'fit',
25         region : 'center',
26         collapisble : true,
27         contentEl: 'contentIframe'
28     } ]
29 });

这个文件就是我们的布局文件,在这里我们强调一下快,

 //这里是修改的部分
18         items:[{
19              xtype: 'treepanel'
20         }]

这其实是加载的树,我们xtype后面跟的是树那个文件的全小写,好像必须这样,我以为是树属性里的alias : 'widget.treepanel'起的作用,但去掉它照样是一样。

TreePanel.js

 1 Ext.define('erp.view.TreePanel', {
 2     extend : 'Ext.tree.Panel',
 3     width : 240,
 4     border : false,
 5     hrefTarget : 'mainContent',
 6     alias : 'widget.treepanel',
 7     rootVisible : false,
 8     store : 'TreeStore',
 9     bodystyle : {
10         background : '#ffc',
11         padding : '10px'
12     }
13 });

在这个文件里我们定义一棵树,并为其提供相应的store

TreeStore.js

Ext.define('erp.store.TreeStore', {
    extend : 'Ext.data.TreeStore',
    defaultRoodId : 'root',
    requires : 'erp.model.TreeModel',
    model : 'erp.model.TreeModel',
    proxy : {
        type : 'ajax',
        url : 'a',
        reader : 'json',
        autoLoad : true
    }
});

这个就是数据存储器store的文件,那个url的内容是个a,不用太惊讶,那个仅仅是个后台的地址,因为是springmvc做后台的,我们也可以让他加载一个json文件,只要返回相应格式的json数据就行了。

TreeModel.js

 1 Ext.define('erp.model.TreeModel',{
 2     extend : 'Ext.data.Model',
 3     fields :[
 4              {name : 'id' , type : 'varchar'},
 5              {name : 'pid' , type : 'varchar'},
 6              {name : 'text' , type:'varchar'},
 7              {name : 'leaf', type : 'boolean',defaultValue : true},
 8              {name : 'url' , type : 'varchar'}
 9     ]
10     
11 });

到这里基本的编码就差不多了。

posted @ 2016-09-09 07:56 奋斗,坚持 阅读(...) 评论(...)  编辑 收藏