Extjs4 MVC

PS：第一篇我放了个图片前台结构的，有个单词写错了导致我model层总是报错，我把model写成modal了。呵呵，粗心的后果就是花费更多的时间去弥补我的粗心，这是被细心的人甩下的原因之一。

1、我们在model下的MVC.js文件中定义我们上一篇中grid的model，如下：

Ext.define('MVC.model.MVC', {
2     extend: 'Ext.data.Model',
3     fields: ['name', 'email']
4 });

2、在controller中声明我们定义的model，

?

models : ['MVC'],

　　这样，我们的view层就能够使用定义的model了，接下来在view层中使用model，日常使用中一般都用于我门的store既数据请求的model的定义，这跟我们j2ee项目中的model是一个思想。把我们view中的store改成如下：

this.store = {
2             model : 'MVC.model.MVC',
3             data  : [
4                 {name: '张三',    email: 'zs@cnblogs.com'},
5                 {name: '李四', email: 'ls@cnblogs.com'}
6             ]

接下来运行项目，结果与我们上一篇一样。这样我们的整个项目的mvc就基本清晰了。我看了一下4的docs，发现MVC中我们可以把store单独拿出来，mvc也是可以识别的，但是我一般都是跟grid定义在一起，因为本身controller占据了我们大部分的代码，view层比较清晰，所以哪里定义的grid，store放哪里我跟人比较好管理。

以后再写的话主要会集中在一些使用的细节方面，比如panel数据整体的设置等等，这些都跟model千丝万缕。

总之，Extjs，Great Framework！对了，宣传一下sencha touch framework，很不错，手机端框架，有兴趣的可以了解一下！

 

分类: Extjs4, Sencha Touch2

Extjs4, Sencha Touch2

 

Extjs4 MVC 添加model层

摘要: PS：第一篇我放了个图片前台结构的，有个单词写错了导致我model层总是报错，我把model写成modal了。呵呵，粗心的后果就是花费更多的时间去弥补我的粗心，这是被细心的人甩下的原因之一。1、我们在model下的MVC.js文件中定义我们上一篇中grid的model，如下：model1 Ext.define('MVC.model.MVC', {2 extend: 'Ext.data.Model',3 fields: ['name', 'email']4 });2、在controller中声明我们定义的model，models :阅读全文

posted @ 2012-11-03 21:43 liuqxFuture 阅读(104) | 评论 (0) 编辑

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: 'fi...阅读全文

posted @ 2012-11-03 21:12 liuqxFuture 阅读(4) | 评论 (0) 编辑

Extjs4 MVC Controller使用方法

摘要: 这篇文章主要说一下Extjs MVC模式中controller类的使用方法。很清楚，controller主要帮助我们实现页面中事件的控制，如下：1、实现对页面中某个元素触发某个事件：将上一篇中的controller改成如下：controller代码 1 Ext.define('MVC.controller.MVCS', { 2 extend: 'Ext.app.Controller', 3 4 init: function() { 5 this.control({ 6 'viewport > panel' : { 7 ...阅读全文

posted @ 2012-11-03 09:42 liuqxFuture 阅读(11) | 评论 (0) 编辑

Extjs MVC模式前台代码组织结构

摘要: 1、我们这个项目用MVC控制我们的index.jsp页面，创建完相关文件后结构如下：2、app.js作为我们单个页面的资源文件引进index.jsp中，然后在app.js文件中添加如下代码：Ext.Loader.setConfig({enabled:true});//开启动态加载Ext.application({ name: 'MVC', appFolder: 'mvc', controllers: ['MVCS'], launch: function() { Ext.create('Ext.container.Viewport'阅读全文

posted @ 2012-11-01 14:47 liuqxFuture 阅读(12) | 评论 (0) 编辑

Extjs MVC模式前台组织结构

摘要: 从最简单的写起，我也好长时间没用extjs了，但是不舍得扔了，正好写几篇文章回忆一下吧。1、首先当然是倒入extjs的文件了，然后项目整体结构如下：2、在webcontent下创建mvc文件，这样extjs可自动查找相应的文件。3、编辑index.jsp， 在文件中倒入如下两个文件： <linkrel="stylesheet"type="text/css"href="extjs-4.1.0/resources/css/ext-all.css"> <scripttype="text/javascript&qu阅读全文

posted @ 2012-11-01 12:59 liuqxFuture 阅读(8) | 评论 (0) 编辑

关于Extjs单独分个类

摘要: 用Extjs4也有段时间了，从最初的0到现在的0.2（1是满分），学到不少，也不舍得放弃了，工作中用了Ext的MVC模式，很好用，在这里单独分个类，有时间把以前写的几个MVC模式的例子放上来。我喜欢前台，喜欢设计出有美感的前台，ext我很喜欢，不过前两天到官网上看，好像需要付费了吧？如果是公益事业下方有免费下载地址。当前想的是第一个例子先写一个页面布局的，主要是看一下MVC模式的具体用法.阅读全文

posted @ 2012-10-24 12:51 liuqxFuture 阅读(5) | 评论 (0) 编辑