`
memory1897
  • 浏览: 6797 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Extjs4 MVC 添加view层

阅读更多

实例中我们通过view层望主界面中添加一个grid,

1、app.js改成如下:

app.js
复制代码
 1 Ext.Loader.setConfig({enabled:true});//开启动态加载
 2 Ext.application({
 3     name: 'MVC',
 4 
 5     appFolder: 'mvc',
 6     
 7     controllers: ['MVCS'],
 8 
 9     launch: function() {
10         Ext.create('Ext.container.Viewport', {
11             layout: 'fit',
12             items: {
13                 xtype: 'userlist'
14             }
15         });
16     }
17 });
复制代码

2.MVC/view/mvc/MVCS.js改成如下所示:

view/mvc/MVCS.js
复制代码
 1 Ext.define('MVC.view.mvc.MVCS' ,{
 2     extend: 'Ext.grid.Panel',
 3     alias : 'widget.userlist',
 4 
 5     title : '人员列表',
 6 
 7     initComponent: function() {
 8         this.store = {
 9             fields: ['name', 'email'],
10             data  : [
11                 {name: '张三',    email: 'zs@cnblogs.com'},
12                 {name: '李四', email: 'ls@cnblogs.com'}
13             ]
14         };
15 
16         this.columns = [
17             {header: 'Name',  dataIndex: 'name',  flex: 1},
18             {header: 'Email', dataIndex: 'email', flex: 1}
19         ];
20 
21         this.callParent(arguments);
22     }
23 });
复制代码

代码如上,alias为我们定义的grid声明了一个别名userlist,我们可以直接通过xtype:'userlist'生成我们定义的grid,app.js中我们的xtype既是。

3、我们在controller中声明我们使用的views,如下:

controller
复制代码
 1 Ext.define('MVC.controller.MVCS', {
 2     extend: 'Ext.app.Controller',
 3     
 4     views : ['mvc.MVCS'],
 5 
 6     init: function() {
 7         this.control({
 8             'userlist': {
 9                 itemclick: this.editUser
10             }
11         });
12     },
13 
14     editUser: function(grid, record) {
15         console.log('Double clicked on ' + record.get('name'));
16     }
17 });
复制代码

 

如上,我们在views中声明了我们的view,可添加多个,声明方式为view文件夹下的路径:mvc.MVCS,这样我们的controller就能够找到我们的views,并在controller中直接使用我们定义的别名找到我们的元素。我们在controller中通过this.control.为我们的grid定义了单击事件,运行效果如下:

最终,我们实现了view层的添加并对view层进行了事件的添加,下一篇回忆一下modal层的添加。

分享到:
评论

相关推荐

    EXTJS简单MVC实例

    只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载

    extjs4 mvc extjs

    是用extjs mvc写的,controller里面会配置model store view,然后mode和store的关系,相信大家也很清楚了,store里面会用到model,当然也可以不用,和原来的extjs3.x是一样的,用field来表示,其实是换汤不换药而已...

    Extjs4.0 mvc模式开发

    本工程采用ExtJs4.0 开发,采用mvc开发模式,分为controller view model store。

    ExtJs4.0 mvc 模式

    本实例采用Extjs4.0 开发,按照mvc模式分为,controller view model store

    Extjs6.0开发之mvvm与mvc的使用案例

    附件是我实际开发的一个模块,...ps:本模块共有3个模块,其中两个模块采用mvc,一个采用mvvm (因为觉得麻烦,所以model层没有划分很细,不过我个人比较喜欢这种开发方式,主要看controll和view model的设计思路)。

    MVC3+Spring.net+NHibernate+ExtJs的简单架构

    对于MVC3、Spring.net、NHibernate、ExtJs等单个的技术点使用起来,并不是很复杂,出问题比较多的还是配置相关的问题;下面我们来一步一步的实现4个框架的融合配置;首先我们来谈谈4个框架的各自负责的事情::...

    Learning ExtJS(PACKT,4ed,2015)

    The new version 5 is packed with new themes and the MVVM architecture that allows you to connect the model layer to the view and automatically update the model when the view is modified and vice ...

    Learning ExtJS, Fourth Edition (Ext JS 5+)

    Ext经典书籍的升级版,使用Ext JS 5,讲解了MVC、MVVM(Model-View-ViewModel) 模式,讲解的非常清楚,Ext JS 6 也适用

    RESTful-API后台系统架构设计(Java).doc

    展现层: Spring MVC - MVC Framework Java Server Pages (JSP) - View Generation ExtJS - Javascript UI Widget Framework Spring Security - Security Framework Jackson - JSON Generation / Parser Jersey - ...

    Ext Js权威指南(.zip.001

    9.6.2 视图的运行流程:ext.view.abstractview与ext.view.view / 466 9.6.3 选择模型的工作流程 / 475 9.6.4 选择模型的配置项、属性、方法和事件 / 480 9.6.5 视图的配置项、属性、方法和事件 / 482 9.6.6 ...

    Ext JS 6 By Example(PACKT,2015)

    It provides a complete rich set of GUI controls, has an excellent API for AJAX and REST, and helps users to organize their code with Model View ViewModel (MVVM) or the MVC architecture, and supports ...

    SenchaCmd-3.1.0.192-windows.exe

    需要注意的是,生成的EXTjs 是商业体验版本,如果你购买了,那么你需要下载ext js的zip包,并且使用-SDK命令来制定SDK的路径,这样,就不会去默认下载SDK而是按照你本地的文件来生成了。 命令如下: sencha -sdk /...

    基于MVCS模式的组件化手机Web前端的研究与应用

    本文以MVC模型为架构,ExtJS组件为基础,数据存储(Store)为数据容器,构建了MVCS (Model-View-Controller-Store)模型,并以书籍信息系统为例,说明使用该模型完成组件化手机Web前端设计的方法和实现步骤,展示了...

Global site tag (gtag.js) - Google Analytics