MVC架构批注,ExtJS的grid行编辑插件事件触发

By admin in 4858美高梅 on 2019年5月5日

     
 本来这些号是为着找专业(记录本身找专门的职业之间刷代码的所想所得,主假设假装自身有一个本事博客…),不过排序算法还没刷完就找到了劳作,所以就懒病继续发作就没写了。今后职业了,真是什么都不懂,为了记录工作中相遇的标题,必须再把它捡起来。

概述


重型的行使在付出和运转上都设有着不便。应用效益的调动和开垦人士的调动都会影响对品种的掌握控制。ExtJS4带来了一种新的应用结构。那种布局相连用于协会代码,也能立见成效的削减须求的代码量。

这一次ExtJS4的使用结构采纳了MVC的花样。在那种情势下,Models和Controllers第二次被引入了ExtJS。而明儿晚上就有了多数MVC式的布局,那个组织大部分是相差无几。这里是大家定义的MVC结构:

  • Model(模型)是字段及数量的集合(比如1个用户模型包括用户名字段和密码字段)。模型用于数据的展现,也能够经过关系关系涉及到别的的Model上。模型的劳作方式很像ExtJS叁的Record类,并平时和Stores一同行使将数据呈现到grids和别的零件中;
  • View(视图)是组件的的1体系型。grids、trees和panels都是视图;
  • Controller(调控器)用于将代码组合起来使应用运营。

在那篇作品中大家将确立1个简便的用户数量管理使用。通过这么些利用能够对ExtJS4的MVC结构有始发的询问。

ExtJS4的MVC结构提供了壹套结构性和壹致性的正规化。在付出中会开掘,Ext的MVC应用是由自定义类和框架代码构成的。按老规矩,先说下利用MVC结构开辟的好处:

  • 持有的使用使用同样的格局专门的学问,只要求一次学习;
  • 抱有的施用使用一样的形式职业,便于代码共享;
  • 能够基于ExtJS提供的开拓工具进行开垦优化。

 

1、ExtJs 4.x MVC格局的法则与功能

常见客户端应用一般倒霉实现不佳组织也倒霉维护,因为效益和人力的不停加码,这几个应用的层面迅猛就能够胜出掌握控制才干,ExtJS4带来了3个新的利用框架结构,不但能够组织代码,还足以减弱落成的开始和结果。

新的使用架构根据二个类MVC的格局,模型(Models)和调整器(Controllers)首次被引进。产业界有很各类MVC架构,基本千篇一律,ExtJS四的概念如下:

a.Model模型:模型是字段和它们的数目的集聚,比如User模型带有username和password字段,模型知道怎样持久化本人的数额,并且可以和别的模型关联,模型跟ExtJS
3中的Record类有点像(不同是,Record只是唯有的扁平结构,而Model能够nest),平时都用在Store中去体现grid和其它零件的数量。

b.View视图:视图是组件的一种,专注于分界面显示 – grid, tree, panel
都是view。

c.Controllers控制器:四个放权全数使您的app准确工作的代码的职务,具体一点应该是具备动作,比方怎么着渲染view,怎样起初化model,和app的其余逻辑。

请小心:MVC是3个框架,不是设计形式,越多的原委请参见:
百度健全

框架与设计情势固然一般,但却有所根本的例外。设计情势是对在某种遇到中反复现身的标题以及化解该难点的方案的叙说,它比框架更抽象;框架能够用代码表示,也能直接实施或复用,而对方式来讲唯有实例技能用代码表示;设计格局是比框架更加小的成分,二个框架中屡屡带有二个或多少个设计方式,框架连接针对某壹特定应用领域,但同样情势却可适用于各个应用。能够说,框架是软件,而设计格局是软件的知识。

简单来讲:设计格局是大智慧,用来对软件设计实行分工;框架格局是小技能,对具体难题建议化解方案,以抓实代码复用率,降低耦合度。

     
 方今的门类中要用到ExtJS,因为一向就不懂,所以就给本人安顿了一个简易的报表增加和删除查改的落到实处,之中蒙受了众多标题,渐渐化解吧,今后先说说在二个grid中,当使用了行编辑插件后,点击保存怎么着触发事件。

 

ExtJS 四 MVC架构讲明 – ExtJS4国语教程

Posted on
2012/07/02 by ishowshao

二、ExtJs 4 MVC框架搭建

     
 怎样在view面设置3个监听、触发监听,之后在调控器页面来拍卖这么些监听程序,进程如下:对于每二个类,由哪些来触发监听,能够再ExtJS自带的api文书档案中找到此类的伊芙nts项,里面有哪些事件,哪些事件就会接触监听。举个例子Ext.grid.plugin.Row艾德iting类,有beforeedit、canceledit、edit、validateedit各个事件,那么listener就足以监听那多样事件,阅读api文书档案可见它们分别监听什么风浪,在view页面插件配置项下编写如下代码:

文件结构


使用ExtJS的MVC形式开采应用须求选择统一的公文结构
。应用具备的类都坐落app目录下。按MVC结构,在app目录下供给树立model、view、store和controller等子目录。下图为大家的二个示范应用开拓产生后的目录结构:

4858美高梅 1

在这么些事例中大家封装了二个应用程序称为“account_manager”,ExtJS4的sdk遭遇置于ext-四.0目录中。如下为index.html的代码:

   1:  <html>

   2:  <head>

   3:      <title>Account Manager</title>

   4:      <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">

   5:      <script type="text/javascript" src="ext-4.0/ext-debug.js"></script>

   6:      <script type="text/javascript" src="app.js"></script>

   7:  </head>

   8:  <body></body>

   9:  </html>

ExtJS MVC架构解说

  • 本文地址
  • 本文PDF下载

广泛客户端应用普通不佳完成倒霉组织也不佳维护,因为效益和人工的无休止扩展,那个使用的规模急速就能够压倒掌握控制技能,ExtJS
四 带来了八个新的行使框架结构,不但能够团体代码,还足以减小落成的源委

新的采纳架构根据三个类MVC的模式,模型(Models)和调控器(Controllers)第一回被引入。产业界有很各个MVC架构,基本如出壹辙,ExtJS
四的定义如下:

  • Model模型
    是字段和它们的多少的汇集,举个例子User模型带有usernamepassword字段,模型知道如何持久化本身的数额,并且能够和别的模型关联,模型跟ExtJS
    3中的Record类有点像(分歧是,Record只是只是的扁平结构,而Model能够nest),平日都用在Store中去显得grid和其余零件的数据
  • View视图是组件的1种,专注于分界面显得 – grid, tree, panel 都是view
  • Controllers控制器
    1个停放全部使您的app准确职业的代码的岗位,具体一点相应是享有动作,比方怎么样渲染view,怎样开头化model,和app的别的逻辑

那篇教程军长成立一个轻便的保管用户数据的例证,做完那几个事例,你会学会怎么用ExtJS
四的架构把差不多的选拔组织到壹块。

动用框架结构是有关提供协会和壹致性,是有关真实的类和框架代码的,遵循约定能够带来众多主要的好处:

  • 各样应用都以壹律的劳作措施,所以您只须求上学二回
  • 能够很轻便的共享代码,因为具有应用专门的工作方式都毫无贰致
  • 能够创造属于本人的混淆的版本用于发表

二.一、文件结构

ExtJS 肆 应用都服从1个合并的目录结构,各样应有都平等
MVC中,全体类都放在app目录里面,这几个目录能够有子目录,代表的是命名空间(三个子目录对应3个命名空间),使用差别的目录存放views,models,controllers,stores。当大家完结例子的时候,目录结构应当和下图一律:

4858美高梅 2

ExtJS
SDK必须的文本在目录ext肆中,因而,index.html应当引进extjs必须的js和css,以及app.js文件

listeners: {
            edit: {
                fn: 'wobuzhidao',
                scope: 'controller'
            }
        }

 

4858美高梅,File Structure文件结构

ExtJS 四 应用都遵从一个统壹的目录结构,每一个应有都平等。实际情况可以参见ExtJS
4
入门,MVC中,全部类都放在app目录里面,那几个目录能够有子目录,代表的是命名空间(贰个子目录对应一个命名空间),使用不一致的目录存放views,models,controllers,stores,当大家成功例子的时候,目录结构应该和下部截图同样:

4858美高梅 3

在这一个事例中颇具文件都在'account_manager'目录中,ExtJS
SDK必须的公文在目录ext-4.0中,因此,index.html应当如下:

<html>
<head>
    <title>Account Manager</title>

    <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">

    <script type="text/javascript" src="ext-4.0/ext-debug.js"></script>

    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

二.贰、在app.js中创制应用

每种ExtJS
四的运用都从叁个Application类的实例早先,那几个实例包括应用的大局配置(举例使用的名字),这几个实例也担任掩护对整个模子、视图、调控器的引用的护卫,还有1个launch函数,会在具有加载项加载成功之后调用。

第三必要采取1个大局命名空间,全体ExtJS4应用都亟待有1个大局命名空间,以让抱有应用中的类安置到在那之中:

Ext.application({
    requires: ['Ext.container.Viewport'],  
    name: 'FWY',//定义的命名空间
    appFolder: 'app',//指明应用的根目录
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: '标题',
                    html : '内容'
                }
            ]
        });
    }
});    

  Listeners监听了edit事件,其管理函数名叫wobuzhidao,功用范围在调节器,调控器代码如下

从app.js开首创办应用


种种ExtJS四的MVC应用都以透过三个Appliaction类的实例运营。在Application中蕴藏应用的全局定义(比方动用名称),以及使用中所使用到的模子、视图和调整器的引用。别的,Application类还有二个launch函数。launch函数在页面加载成功后推行。

接下去我们将成立多个account_manager应用来管理用户账户新闻。首先要求为这几个动用定义2个大局的命名空间。全体ExtJS4的MVC应用应该只有叁个大局命名空间,应用中有所的类都置于那么些命名空间下。一般大家会给那几个命名空间定义二个相当短的名称,这里大家应用“AM”。

   1:  Ext.application({

   2:      name: 'AM',

   3:   

   4:      appFolder: 'app',

   5:   

   6:      launch: function() {

   7:          Ext.create('Ext.container.Viewport', {

   8:              layout: 'fit',

   9:              items: [

  10:                  {

  11:                      xtype: 'panel',

  12:                      title: 'Users',

  13:                      html : 'List of users will go here'

  14:                  }

  15:              ]

  16:          });

  17:      }

  18:  });

此间落成的职能比很粗略。首先,大家调用
Ext.application创制了三个Application类的实例,并将之命名叫“AM”。同时,这里活动创设了二个全局变量“AM”,并为Ext.Loader注册了3个命名空间。然后我们设置appFolder属性为app目录。最终我们设置了launch函数,并在函数中创建了含有二个panel的Viewport来填充整个显示器。

4858美高梅 4

Creating the application in app.js 在app.js中开创应用

各样ExtJS
四的应用都从2个Application类的实例开头,那个实例包蕴应用的大局配置(比方利用的名字),那些实例也承受维护对整人体模型子、视图、调控器的引用的保卫安全,还有一个launch函数,会在有着加载项加载成功之后调用。

让大家创制2个简约的Account
Manager应用管理用户帐户。首先要求选取二个大局命名空间,全体ExtJS四应用都亟需有2个大局命名空间,以让抱有应用中的类摆设到里面,这么些例子中我们选拔AM(Account
Manager)

Ext.application({
    requires: 'Ext.container.Viewport',
    name: 'AM',

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    }
});

第二大家调用了Ext.application创设了二个施用实例,并安装了使用名称”AM”,那样做会自行创设多少个全局变量”AM”,并自动注册命名空间”AM”到Ext.Loader,用类似的办法也设置了app作为appFolderMVC架构批注,ExtJS的grid行编辑插件事件触发。。另外在launch函数中,创造了一个Viewport,只含有一个撑满浏览器窗口的Panel

4858美高梅 5

二.3、定义3个调节器

调整器是使用的粘合剂,它们所作的作业正是监听事件并实行动作,继续大家的利用,成立3个调整器。创立app/controller/Students.js其一文件,并累加如下代码:

Ext.define('FWY.controller.Students', {
    extend: 'Ext.app.Controller',
    init: function() {
        console.debug("trigger controller init event");
    }
});    

接下去在app.js中增添对Students调控器的引用:

Ext.application({
...
controllers: [
    'Students'  //对应于controller文件夹下面的Students.js
],
...
});

当大家通过index.html查看应用,Students调节器会被电动加载(因为在app.js的Application中加进了引用),并且Students的init方法会在launch从前调用。

init办法是个极好的地点,能够用来设置哪些和view交互,平时都利用Controller的多少个主意control,control方法使得监听view的事件变的轻便,更新一下调整器,让它告诉大家panel何时渲染:

Ext.define('FWY.controller.Students', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },
    onPanelRendered: function() {
        console.debug('该panel被渲染了');
    }
});

大家已经更新了init方法,使用this.controll给视图设置监听器。这一个controll方法,使用新型的组件查询引擎(ComponentQuery)能够便捷方便的找到页面上的机件。假如你对ComponentQuery目生,能够查看ComponentQuery文书档案实行详尽询问。简要一点,ComponentQuery能够允许我们运用三个像样css选拔器的办法找到组件。

在例子的init方法中大家使用了’viewport >
panel’,能够解释为“查找Viewport间接后代中的全数Panel组件”,然后大家提供了叁个对象相称事件名称(那么些事例中只用了render)来提供响应函数。全体的影响正是不管哪个组件符合大家的选拔器,当它的render事件触发时,大家的onPanelRendered函数都会被调用。

wobuzhidao: function (editor, context, eOpts) {
        alert(context.record.get('age'));
    }

概念3个调整器(controller)


可以说调整器(controller)是把全体应用绑定在协同的胶水。它们(调控器)实践的行事是事件监听(常常来自view)并做出相应管理。

咱俩后续产生account_manager应用,接下去大家将开创二个调控器。新建3个js文件app/controller/Users.js,代码如下:

   1:  Ext.define('AM.controller.Users', {

   2:      extend: 'Ext.app.Controller',

   3:   

   4:      init: function() {

   5:          console.log('Initialized Users! This happens before the Application launch function is called');

   6:      }

   7:  });

将大家新建的调节器Users加多到应用中,为app.js加多属性如下:

   1:  Ext.application({

   2:      ...

   3:   

   4:      controllers: [

   5:          'Users'

   6:      ],

   7:   

   8:      ...

   9:  });

当大家因此index.html在浏览器中加载应用时,调控器Users也会被自动加载(因为咱们在上头的应用定义中做了设置),然后Users的init函数会被调用——在Application类的launch函数实践此前。

在调控器与视图(view)的交互中,init函数的功力丰硕重视,平常它会和调整器的另3个函数control一同使用。使用control函数相比易于完毕对视图事件的监听和响应。

我们调节下Users调控器,通过control函数来探视panel什么日期被render(渲染):

   1:  Ext.define('AM.controller.Users', {

   2:      extend: 'Ext.app.Controller',

   3:   

   4:      init: function() {

   5:          this.control({

   6:              'viewport > panel': {

   7:                  render: this.onPanelRendered

   8:              }

   9:          });

  10:      },

  11:   

  12:      onPanelRendered: function() {

  13:          console.log('The panel was rendered');

  14:      }

  15:  });

在上头的代码中,大家调节了users调节器的init函数,使用this.control为运用中的视图创立了监听。control函数使用新的ComponentQuery引擎轻巧便捷的贯彻了对页面上的组件的引用。(关于ComponentQuery的开始和结果请参考文档。轻松地说,就是行使css式的选拔器达成了对页面上组件的不慢合作)。

在上头的init函数中大家利用了“viewport >
panel”那样的言语。“viewport >
panel”是八个接纳器,它的意义是“找到Viewport的各类直接子Panel”。随后大家提供了3个目标,在那一个目的中包括事件名称(上例中即是render)及相应的管理函数。完结的功效是其余3个特出大家定义的采用器的组件触发了render事件后即会调用onPanelRendered函数。

前日运转下行使看看效果:

4858美高梅 6

并不是贰个很炫的行使,但它早已体现了使用MVC管理代码的益处。接下来大家给这么些应用增添三个报表,使它变得丰盈些。

 

Defining a Controller 定义八个调节器

调控器是使用的粘合剂,它们所作的作业便是监听事件并实施动作,继续大家的Account
Manager应用,创建三个调控器。创制app/controller/Users.js本条文件,并累加如下代码:

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log('Initialized Users! This happens before the Application launch function is called');
    }
});

接下去在app.js中增多对Users调整器的引用:

Ext.application({
    ...

    controllers: [
        'Users'
    ],

    ...
});

当大家透过index.html翻看应用,Users调控器会被电动加载(因为在app.js的Application中加进了引用),并且Usersinit方法会在launch前边调用

init格局是个极好的地点,能够用来安装哪些和view交互,平时都使用Controller的多个主意controlcontrol方式使得监听view的轩然大波变的轻巧,更新一下调节器,让它告诉大家panel何时渲染:

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

咱俩早就更新了init方法,使用this.controll给视图设置监听器。那几个controll措施,使用最新的零件查询引擎(ComponentQuery)可以相当的慢方便的找到页面上的零部件。假如您对ComponentQuery不掌握,能够查阅ComponentQuery文书档案进行详细询问。简要一点,ComponentQuery能够允许我们应用二个近乎css选用器的秘技找到组件。

在例子的init方法中大家应用了'viewport > panel',能够分解为“查找Viewport直接后代中的全部Panel组件”,然后我们提供了多个目的相称事件名称(这几个事例中只用了render)来提供响应函数。全体的影响正是不管哪个组件符合大家的选用器,当它的render事件触发时,大家的onPanelRendered函数都会被调用。

当大家运营应用程序,能够看出如下图所示:

4858美高梅 7

那不是最冲动的接纳,不过它显得给大家,开头①段有组织的代码是何等轻易。让我们增添有些剧情,加1个grid。

三、创建ExtJs4 MVC应用

     
 在这几个处理函数里,有三个参数,是从view页面监听程序的edit传过来的,通过查看api文档大家得以看到那五个参数,并且知道她们各自代表如何。以上代码落成了在grid里的plugin插件中,对行编辑设置了1个监听,当编辑保存后会触发edit事件,通过context参数的.record.get(‘age’)获取编辑行对应列的值。

概念多少个视图


近年来甘休大家的应用只有五个文本、极少的几行代码。将来大家想给那个动用增多2个报表来体现系统中的用户。是时候利用视图了。

视图只是三个组件,是接二连三自ExtJS现成组件的类。大家将定义叁个用户新闻列表类,新建文件app/view/user/List.js,代码如下:

   1:  Ext.define('AM.view.user.List' ,{

   2:      extend: 'Ext.grid.Panel',

   3:      alias : 'widget.userlist',

   4:   

   5:      title : 'All Users',

   6:   

   7:      initComponent: function() {

   8:          this.store = {

   9:              fields: ['name', 'email'],

  10:              data  : [

  11:                  {name: 'Ed',    email: 'ed@sencha.com'},

  12:                  {name: 'Tommy', email: 'tommy@sencha.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:  });

如上,这几个视图类也只是三个大致的平日类。大家只是继承了Grid组件,定义了一个别称,通过那些别称大家得以应用xtype调用这么些类(一般是如此用,还有别的用处)。同时大家还增加了列表需求利用的store和columns音讯。

接下去大家必要将以此视图增多到Users调控器中。咱们曾经选用’widget.’方式设置了类的小名,所以能够平昔运用“userlist”作xtype,就跟原先使用“xtype:
‘panel’”同样。

   1:  Ext.define('AM.controller.Users', {

   2:      extend: 'Ext.app.Controller',

   3:   

   4:      views: [

   5:          'user.List'

   6:      ],

   7:   

   8:      init: ...

   9:   

  10:      onPanelRendered: ...

  11:  });

接下来大家在使用的Viewport布局中调用那些类。那须要在app.js中修改launch函数:

   1:  Ext.application({

   2:      ...

   3:   

   4:      launch: function() {

   5:          Ext.create('Ext.container.Viewport', {

   6:              layout: 'fit',

   7:              items: {

   8:                  xtype: 'userlist'

   9:              }

  10:          });

  11:      }

  12:  });

此地还有有个别内需注意,在调控器的views数组中,大家设置了'user.List'
。那告诉了运用去调用视图像和文字件view/user/List.js,那样在应用加载时就可以直接使用那个文件了。这里运用了ExtJS四新扩张的的动态调用服务以从服务器中获得文件。以后再看看大家的acount_manager应用:

4858美高梅 8

Defining a View 定义3个视图

直到今后,大家的利用唯有很少代码,唯有多少个文件app.jsapp/controller/Users.js,未来大家想扩充3个grid突显全数系统中的用户,是时候更加好的公司一下逻辑并早先利用视图了。

视图也是组件,平时都是ExtJS现存组件的子类,现在打算开创用户表,先创设app/view/user/List.js,增添代码:

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    title : 'All Users',

    initComponent: function() {
        this.store = {
            fields: ['name', 'email'],
            data  : [
                {name: 'Ed',    email: 'ed@sencha.com'},
                {name: 'Tommy', email: 'tommy@sencha.com'}
            ]
        };

        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);
    }
});

大家的视图类正是贰个平凡的类,那么些例子中我们扩张了Grid零件,并安装了小名,那样大家得以用xtype的法子调用那么些组件,其它大家也增加了storecolumns的配置。

接下去大家供给增添这些视图到Users调控器。因为大家用'widget.'安装了外号,所以我们得以接纳userlist用作xtype,就如咱们选择此前运用的'panel'

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: ...

    onPanelRendered: ...
});

接下去修改app.js让视图在viewport中渲染,要求修改launch方法

Ext.application({
    ...

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'userlist'
            }
        });
    }
});

唯1需求注意的是大家在views数组中钦点了'user.List',这告诉应用去自动加载对应的文书,ExtJS四的动态加载系统会遵照规则从服务器自动拉取文件,比如user.List正是规则,把.替换成/正是文本存放路线。刷新一下页面:

4858美高梅 9

1、定义三个视图

直到以往,我们的行使唯有很少代码,只有八个文 件 app.js 和
app/controller/Students.js,以往大家想扩大2个grid彰显全部系统中的学生列表,修改3处:

调节表格


请小心,代码更新后onPanelRendered函数照旧被调用了。那表名我们自定义的列表类如故卓殊“viewport
>
panel”选取器。因为我们自定义的userlist类承继自Grid类,Grid类承继自Panel类。

那儿我们抬高到选择器中的监听依然被Viewport直属的Panel类或其子类所调用,我们得以选取那一点对大家的用户新闻列表的坚守做些强化。还是利用init函数,可是要改为监听用户新闻记录上的双击事件,使双击后能够对用户信息进行编写制定。调治调节器:

   1:  views: [

   2:          'user.List'

   3:      ],

   4:   

   5:      init: function() {

   6:          this.control({

   7:              'userlist': {

   8:                  itemdblclick: this.editUser

   9:              }

  10:          });

  11:      },

  12:   

  13:      editUser: function(grid, record) {

  14:          console.log('Double clicked on ' + record.get('name'));

  15:      }

对调控器Users我们做了之类调解:

修改了ComponentQuery的选用器,今后只是接纳‘userlist’;修改监听的事件为“itemdblclick”;调度事件管理函数为“editUser”。再次运维应用,双击记录时会在调整台上输出相应的新闻:

4858美高梅 10

利用运转的很好。但是大家不会满意于轻易的在调节台上输出音讯,大家期望能真的的编辑撰写用户新闻。这里要开创三个新的视图:app/view/user/Edit.js:

   1:  Ext.define('AM.view.user.Edit', {

   2:      extend: 'Ext.window.Window',

   3:      alias : 'widget.useredit',

   4:   

   5:      title : 'Edit User',

   6:      layout: 'fit',

   7:      autoShow: true,

   8:   

   9:      initComponent: function() {

  10:          this.items = [

  11:              {

  12:                  xtype: 'form',

  13:                  items: [

  14:                      {

  15:                          xtype: 'textfield',

  16:                          name : 'name',

  17:                          fieldLabel: 'Name'

  18:                      },

  19:                      {

  20:                          xtype: 'textfield',

  21:                          name : 'email',

  22:                          fieldLabel: 'Email'

  23:                      }

  24:                  ]

  25:              }

  26:          ];

  27:   

  28:          this.buttons = [

  29:              {

  30:                  text: 'Save',

  31:                  action: 'save'

  32:              },

  33:              {

  34:                  text: 'Cancel',

  35:                  scope: this,

  36:                  handler: this.close

  37:              }

  38:          ];

  39:   

  40:          this.callParent(arguments);

  41:      }

  42:  });

咱俩再次定义了多个ExtJS组件的子类。这一次是持续了Ext.window.Window。大家仍亟需动用initComponent函数为编制视图艾德it增添表单成分和按键。布局选拔了“fit”方式,窗体下唯有三个form面板,在form面板中有几个文本框用以编制姓名和邮件地址。最后还定义了多少个开关用以关闭窗体和保留改造。

下一场大家要做的就是把这些编辑视图增加到调控器,并将用户新闻加多到编辑视图。见代码:

   1:  Ext.define('AM.controller.Users', {

   2:      extend: 'Ext.app.Controller',

   3:   

   4:      views: [

   5:          'user.List',

   6:          'user.Edit'

   7:      ],

   8:   

   9:      init: ...

  10:   

  11:      editUser: function(grid, record) {

  12:          var view = Ext.widget('useredit');

  13:   

  14:          view.down('form').loadRecord(record);

  15:      }

  16:  });

首要看一下editUser函数。在这些函数中,大家利用了函数’Ext.widget’,其遵从周边于Ext.create(‘widget.useredit’)。然后大家再次利用ComponentQuery创设了到编辑视图的照耀。各个ExtJS4的零部件都有五个down函数以接到ComponentQuery的选拔器并快捷的查找选用器对应的隶属子成分。

双击列表中的行,效果如下图:

4858美高梅 11

Controlling the grid 对列表的决定

注意onPanelRendered主意如故被调用,因为大家的grid仍然知足'viewport > panel'采纳器,因为大家的视图承袭自Grid,从而持续自Panel

现今大家须要牢牢一下选用器,大家运用xtype作为接纳器替换在此之前的'viewport > panel',监听双击事件,以便继续做编辑用户音讯:

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: function() {
        this.control({
            'userlist': {
                itemdblclick: this.editUser
            }
        });
    },

    editUser: function(grid, record) {
        console.log('Double clicked on ' + record.get('name'));
    }
});

瞩目大家转移了组件查询选取器为'userlist',监听的事件改造为'itemdblclick',响应函数设置为'editUser',今后只是简短的日志出双击行的name属性:

4858美高梅 12

能够看出日志是不错的,但大家其实想做的是编制用户新闻,让我们今日做,创造三个新的视图app/view/user/Edit.js

Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.useredit',

    title : 'Edit User',
    layout: 'fit',
    autoShow: true,

    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        name : 'email',
                        fieldLabel: 'Email'
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

那回我们依然继续自贰个现成的类Ext.window.Window,依然选拔的initComponent艺术去内定复杂的itemsbuttons对象,大家使用了1个'fit'布局和1个表单,表单包括了要编写的用户新闻字段,最终我们创立了七个开关,2个用来关闭窗口,另贰个用于保存退换。

现今大家要做的正是在调控器加载这么些视图,渲染并且加载用户消息:

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List',
        'user.Edit'
    ],

    init: ...

    editUser: function(grid, record) {
        var view = Ext.widget('useredit');

        view.down('form').loadRecord(record);
    }
});

先是大家用Ext.widget措施创建了视图,那么些法子一致Ext.create('widget.useredit'),然后我们又1回借助组件查询找到了窗口中的表单,各个ExtJS肆中的组件都有3个down艺术,能够正视组件查询协助的选料器来赶快找到率性下层的组件。

双击表格中的1行能够看来:

4858美高梅 13

(1)、添加view/List.js视图

是时候越来越好的团体一下逻辑并开首使用视图了。

视图也是组件,平时都以ExtJS现存组件的子类,未来计划开创学生表,先创建
app/view/student/List.js ,增多代码:

Ext.define('FWY.view.student.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.studentlist',
    title : '学生信息列表',
    initComponent: function() {
        this.store = {
            fields: ['id','name', 'age','sex'],
            data  : [
                {id:1,name: 'zhangsan',    age: 18,sex:'boy'},
                {id:2,name: 'lishi',    age: 20,sex:'girl'}
        ]};
        this.columns = [
            {header: '编号',  dataIndex: 'id',  flex: 1},
            {header: '姓名',  dataIndex: 'name',  flex: 1},
            {header: '年龄', dataIndex: 'age', flex: 1},
            {header: '性别', dataIndex: 'sex', flex: 1}
        ];
        this.callParent(arguments);
    }
});

创建model和store


今天大家曾经办好了编写视图,也基本上可以张开编制和保留了。然而在做这个干活儿在此以前,大家还必要对大家的代码实行叁次重构。

今日的AM.view.user.List组件中,store是写在List类中。纵然未来使用也运营的很好,然则大家更倾向于将store独立出来,那样也有益大家对store中的数据开展管理。以往我们起首将store中从List视图中拆分出来放到app/store/Users.js中:

   1:  Ext.define('AM.store.Users', {

   2:      extend: 'Ext.data.Store',

   3:      fields: ['name', 'email'],

   4:      data: [

   5:          {name: 'Ed',    email: 'ed@sencha.com'},

   6:          {name: 'Tommy', email: 'tommy@sencha.com'}

   7:      ]

   8:  });

接下来大家还索要做两处小的调动。

首先在Users调控器中加多对store的调用:

   1:  Ext.define('AM.controller.Users', {

   2:      extend: 'Ext.app.Controller',

   3:      stores: [

   4:          'Users'

   5:      ],

   6:      ...

   7:  });

下一场更新app/view/user/List.js,添加对store的引用:

   1:  Ext.define('AM.view.user.List' ,{

   2:      extend: 'Ext.grid.Panel',

   3:      alias : 'widget.userlist',

   4:   

   5:      //we no longer define the Users store in the `initComponent` method

   6:      store: 'Users',

   7:   

   8:      ...

   9:  });

在调整器中引用store的目的是动态的调用store定义页,并为调用的store赋上3个大致的storeId。那使在视图中引用store越发有利于(在上例中只是加多了三个性格store: ‘Users’)。

到现在大家是将字段(name和email)定义在store中。这样也得以干活了,不过ExtJS四提供了2个很有用的类Ext.data.Model来支援大家。大家将运用Model再次重构大家的代码,Model定义于app/model/User.js中:

   1:  Ext.define('AM.model.User', {

   2:      extend: 'Ext.data.Model',

   3:      fields: ['name', 'email']

   4:  });

完了model的概念后,必要在调节器和store中增多对Model的引用,并从store去掉对应字段的宣示:

   1:  //the Users controller will make sure that the User model is included on the page and available to our app

   2:  Ext.define('AM.controller.Users', {

   3:      extend: 'Ext.app.Controller',

   4:      stores: ['Users'],

   5:      models: ['User'],

   6:      ...

   7:  });

   8:   

   9:  // we now reference the Model instead of defining fields inline

  10:  Ext.define('AM.store.Users', {

  11:      extend: 'Ext.data.Store',

  12:      model: 'AM.model.User',

  13:   

  14:      data: [

  15:          {name: 'Ed',    email: 'ed@sencha.com'},

  16:          {name: 'Tommy', email: 'tommy@sencha.com'}

  17:      ]

  18:  });

咱俩所做的重构工作不会立马产生效益,不过会促进下壹环节的行事。再一次刷新页面运维应用会发觉并无别的变动。可是是时候做到编写制定功用了。

4858美高梅 14

Creating a Model and a Store

今天大家有了表单,能够开首编制和保存用户音讯了,不过那以前需求做一丝丝重构。

AM.view.user.List制造了3个内联的Store,这样能够干活只是我们要求把Store分离出来以便大家在使用的别的地方能够引用并立异在那之中的音讯,大家把它投身它应有在的文本中app/store/Users.js

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    fields: ['name', 'email'],
    data: [
        {name: 'Ed',    email: 'ed@sencha.com'},
        {name: 'Tommy', email: 'tommy@sencha.com'}
    ]
});

当今大家需求做两处更动,首先大家需求让Users开头化的时候加载那个Store

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: [
        'Users'
    ],
    ...
});

接下来大家要把以前平昔在视图中内联的store改动掉,app/view/user/List.js,改成用id引用store

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    //we no longer define the Users store in the `initComponent` method
    store: 'Users',

    ...
});

调节器的代码中中引进了store,store会被活动加载到页面并予以五个storeId,那让视图中使用store变的轻易(这几个例子中,只要配置store: 'Users'就足以了)

近日大家只是在store中内联的概念了四个字段 (‘name’ 和
‘email’),那样能够干活,然则ExtJS四中有1个庞大的Ext.data.Model类,在编辑用户的时候我们得以依赖它,使用Model重构一下Store,在app/model/User.js中创设八个Model:

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

那正是概念大家的Model供给做的,今后内需让Store引用Model替换掉使用内联字段的点子,并且让调整器也引用Model:

//the Users controller will make sure that the User model is included on the page and available to our app
Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: ['Users'],
    models: ['User'],
    ...
});

// we now reference the Model instead of defining fields inline
Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',

    data: [
        {name: 'Ed',    email: 'ed@sencha.com'},
        {name: 'Tommy', email: 'tommy@sencha.com'}
    ]
});

咱俩的重构能够让接下去的劳作简单一下,不过不会潜移默化现存功效,大家刷新一下页面,检查一下是不是平常工作:

4858美高梅 15

(2)、修改controller/Students.js

大家的视图类正是二个不足为奇的类,这么些例子中大家增加了 Grid
组件,并安装了别名,这样大家能够用 xtype
的措施调用这一个组件,此外大家也增多了 store 和 columns 的配备。
接下来大家供给加多那一个视图到 Students调整器。因为我们用
‘widget.studentlist’ 设置了外号,所以大家得以选用 studentlist
作为xtype,就像大家利用以前使用的 ‘panel’

Ext.define('FWY.controller.Students', {
    extend: 'Ext.app.Controller',
    views: [
        'student.List'//添加view视图
    ],
    init: ...
    onPanelRendered: ...
});

在Model中保留数据


现行反革命大家有1个用户消息列表了,也足以双击记录打开编辑窗口了。接下来需求完毕的职责就是保存用户编辑结果。今后大家的用户音讯编辑窗口有八个表单和贰个保留按键“save”。接下来大家须要调度调节器的init函数,增添1个对“save”开关的监听:

   1:  Ext.define('AM.controller.Users', {

   2:      init: function() {

   3:          this.control({

   4:              'viewport > userlist': {

   5:                  itemdblclick: this.editUser

   6:              },

   7:              'useredit button[action=save]': {

   8:                  click: this.updateUser

   9:              }

  10:          });

  11:      },

  12:   

  13:      updateUser: function(button) {

  14:          console.log('clicked the Save button');

  15:      }

  16:  });

大家在调整器中增多了第三个ComponentQuery选用器:‘’useredit
button[action=save]’’。它和第一个选取器职业形式同样,首先依照xtype‘useredit’找到大家定义的用户消息编辑窗体,然后在窗体中查找action属性为‘save’的开关。在我们定义用户消息编辑窗体类时,大家给“save”开关设置action:’save’属性就给大家提供了三个得以长足稳定到这几个开关的艺术。

大家很心满意足看到在我们点击save按键时updateUser函数被调用并执行了。

4858美高梅 16

咱俩已经将save按钮点击事件的监听与管理完结了。接下来要做的正是圆满updateUser这个函数,真正实现用户信息的编辑。在updateUser函数中我们需要从表单中获取信息并保存到用户信息store中。让我们看看功能是怎样实现的:

   1:  updateUser: function(button) {

   2:      var win    = button.up('window'),

   3:          form   = win.down('form'),

   4:          record = form.getRecord(),

   5:          values = form.getValues();

   6:   

   7:      record.set(values);

   8:      win.close();

   9:  }

此地必要打断一下做些表达。通过开关的点击事件我们赢得了对‘save’开关的引用,不过我们真的须要的是带有数据的表单及用户消息编辑窗体。为了更加快的化解难题大家再次利用了ComponentQuery的采纳器,首先选取button.up('window')获取了用户信息编辑窗体,而后使用win.down('form')获取了表单。

这之后我们要做的工作就很简单了,获取加载到表单中的record,并用用户编辑后的信息更新record。最后关闭窗体,回到用户信息列表上。下图是应用运行后的结果,我们将第一条记录的姓名改为了“Ed Spencer”:

4858美高梅 17

Saving data with the Model 利用模型保存数据

今昔我们有了三个用户数据表,双击每1行都能张开三个编辑窗口,今后要做的是保存编辑退换,编辑窗口有3个编写制定表单,还有保存开关,未来大家立异一下调控器让保存按键有响应:

Ext.define('AM.controller.Users', {
    init: function() {
        this.control({
            'viewport > userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },

    updateUser: function(button) {
        console.log('clicked the Save button');
    }
});

我们在this.control艺术中追加了一个组件查询选拔器'useredit button[action=save]',这里说圣元(Synutra)下,这么些选用器和率先个干活办法同样,注意大家定义保存按键的时候增加了一个配置{action: 'save'},这些采纳器的情致便是选项xytpe是useredit的零部件下的持有action属性是save的按键

检查一下updateUser是还是不是被调用了:

4858美高梅 18

上海教室表明工作健康,接下去填充updateUser真的的逻辑。我们须求把多少从表单中抽取,再设置回store中:

updateUser: function(button) {
    var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();

    record.set(values);
    win.close();
}

让我们疏解一下这里都做了哪些。大家的响应函数接收到开关的引用,不过大家关切的是表单和窗口,通过按键和组件查询,可以找到关注的东西,这里首先用了button.up('window')找到了窗口,然后用win.down('form')找到了表单。

那事后大家收取表单关联的record并用表单中的输入值更新了record,最后关闭了窗口关注回到表格上,我们把用户名更动为'Ed Spencer'点击保存应该能够见见:

4858美高梅 19

(三)、修改app.js,加载视图

接下去修改 app.js 让视图在viewport中渲染,要求修改 launch 方法

Ext.application({
    ...
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'studentlist'
            }
        });
    }
});

唯1需求专注的是大家在views数组中钦定了 ‘student.List’
,那告诉应用去自动加载对应的文书,ExtJS4的动态加载系统会依附规则从服务器自动拉取文件,比方student.List正是平整,把.替换来/正是文本存放路线。刷新一下页面就可以看出效果

封存记录到服务器上


刚好的干活极粗略吗。大家还必要达成最终一步——完成与服务器端的交互。在此以前大家只是生硬地将用户音信写在store中,接下去大家将尝试选择Ajax获取用户消息:

   1:  Ext.define('AM.store.Users', {

   2:      extend: 'Ext.data.Store',

   3:      model: 'AM.model.User',

   4:      autoLoad: true,

   5:   

   6:      proxy: {

   7:          type: 'ajax',

   8:          url: 'data/users.json',

   9:          reader: {

  10:              type: 'json',

  11:              root: 'users',

  12:              successProperty: 'success'

  13:          }

  14:      }

  15:  });

此地大家去掉了data属性,取代他的是proxy属性。proxy是Extjs四中赢得和保存数据的一种艺术。ExtJS四中有种种情势的proxy,这里大家选取了比较轻松的ajax
proxy,大家报告它从’data/users.json’中获取信息。

从地点的代码中看看,大家给proxy提供了多少个reader对象。reader的法力是解码服务器端反馈的数据集音讯。这一次大家应用的是JSON
Reader,并安装了它的root和successProperty属性。最终我们还必要创制2个’data/users.json’文件,将大家在此以前使用的数码复制进去:

   1:  {

   2:      success: true,

   3:      users: [

   4:          {id: 1, name: 'Ed',    email: 'ed@sencha.com'},

   5:          {id: 2, name: 'Tommy', email: 'tommy@sencha.com'}

   6:      ]

   7:  }

在store中的另一处改变是将autoLoad属性设置为true。那象征stroe会主动向proxy发出请求加载数据。未来我们刷新页面重新加载应用并不能够观看其余变化。不过实际上获取数据的办法已经不1致了。

小编们要做的结尾一件事正是将对数据所做的变动再次来到到服务器上。在大家那几个事例中我们是使用静态的JSON文件在劳务器端存款和储蓄数据,所以我们无法旁观别的数据库的成形。但是起码大家得以印证应用是在正规干活的。首先大家要求对store的proxy做出一点小的调解告诉它将更新音信发送到另七个url:

   1:  proxy: {

   2:      type: 'ajax',

   3:      api: {

   4:          read: 'data/users.json',

   5:          update: 'data/updateUsers.json'

   6:      },

   7:      reader: {

   8:          type: 'json',

   9:          root: 'users',

  10:          successProperty: 'success'

  11:      }

  12:  }

笔者们还是会从users.json中获取数据,可是具备的换代都会发送到updateUsers.json。那只会重返四个虚构的附和,让我们领略应用在正规运维。updateUsers.json中的内容是{"success": true}。然后还要做的便是告诉Store在编写制定实现后联手三回记录,为此大家还要在updateUser函数中增加1行代码:

   1:  updateUser: function(button) {

   2:      var win    = button.up('window'),

   3:          form   = win.down('form'),

   4:          record = form.getRecord(),

   5:          values = form.getValues();

   6:   

   7:      record.set(values);

   8:      win.close();

   9:      this.getUsersStore().sync();

  10:  }

现行反革命大家的那一个示例应用已经做到了。我们再运营这几个动用2次,编辑一条记下,点击保存按键,然后查看request是不是科学的发送给了updateUser.json文件:

4858美高梅 20

以身作则应用account_manager的源码可在ExtJS四的文书档案中找到,所在目录是examples/app/simple。

作者注:本文译自Extjs4.0文书档案中的《MVC
Architecture》一文。限于在下的英文水准及对Ext的知情,所以难免某个不足之处。但是是抱着团结学习也造福大家的情绪,一得之见勉强翻译了全文。尽管有不通之处还请马上指正。

Saving to the server 保存到服务器

很简短吗。让大家增添和劳务器端的并行完毕那几个例子。现在大家依然应编码了两行表格的数目,今后让我们因此ajax加载:

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});

此地大家去除了'data'属性,替换成proxy,代理是让Store或然Model加载和保留数据的一个主意,有AJAX,JSONP,HTML伍的localStorage本地存款和储蓄等。这里我们接纳了一个简易的AJAX代理,让它通过URAV四L
'data/users.json'加载数据。

咱们还要给代理附加了3个reader,reader是用来把服务器重返的数额解码成Store能知晓的格式,此次大家选拔了JSON
reader,并且钦赐了root和successProperty配置(JSON
reader的事无巨细陈设看文书档案),最后大家创制一下数据文件data/users.json,输入内容:

{
    success: true,
    users: [
        {id: 1, name: 'Ed',    email: 'ed@sencha.com'},
        {id: 2, name: 'Tommy', email: 'tommy@sencha.com'}
    ]
}

其余的退换就是大家给Store设置了autoLoad属性并安装为true,那意味Store生成之后会自行让Proxy加载数据,刷新一下页面应该是看到和前边同样的结果,不一致的是明天不是在程序中应编码数据了

最后的事情是将改换传回服务器端,那么些事例中大家运用静态的JSON文件,未有选拔数据库,但丰富表明大家例子的了,首先做一小点变公告诉proxy用于更新的url:

proxy: {
    type: 'ajax',
    api: {
        read: 'data/users.json',
        update: 'data/updateUsers.json'
    },
    reader: {
        type: 'json',
        root: 'users',
        successProperty: 'success'
    }
}

依然从users.json读取数据,但是更换会发送到updateUsers.json,这里大家做三个模拟的对答回包以让我们通晓程序能够精确专门的工作,updateUsers.json只须要包罗{"success": true},其余要做的正是让Store在编辑之后进行共同,必要在updateUser函数中加进一行代码:

updateUser: function(button) {
    var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();

    record.set(values);
    win.close();
    this.getUsersStore().sync();
}

现今我们能够运营一下整整例子,检查是还是不是各样作用都健康,编辑表格中的1行,看看能还是不能准确的把请求发送给updateUser.json

4858美高梅 21

贰、增添对列表的操纵

分三步成功对对编辑窗体的主宰

Deployment 发布

新出台的Sencha SDK Tools
点此下载
让ExtJS4的接纳发布变的轻易。那么些工具得以令你转移重视清单,并扭转二个最小化版本

详见介绍可以查阅 ExtJS
入门

(一)、为grid绑定双击事件

在意 onPanelRendered 方法仍旧被调用,因为我们的grid还是满意 ‘viewport
> panel’ 采取器,因为大家的视图承袭自 Grid ,从而持续自
Panel。以后大家要求牢牢一下选取器,我们运用xtype作为选拔器替换从前的
‘viewport > panel’ ,监听双击事件,以便继续做编辑用户音信:

Ext.define('FWY.controller.Students', {
    extend: 'Ext.app.Controller',
    views: [    
        'student.List'
    ],
    init: function() {
        this.control({
            'studentlist': {
                itemdblclick: this. editStudent//添加行双击事件
            }
        });
    },
    editStudent: function(grid, record) {
        console.log('Double clicked on ' + record.get('name'));
    }
});

留神大家转移了组件查询选用器为 ‘studentlist’ ,监听的轩然大波改变为
‘itemdblclick’ ,响应函数设置为
editStudent,未来只是轻易的日志出双击行的name属性。

Next Steps 下一步

此处我们成立了叁个格外简单的例证,可是基本效率都包含了,你能够开始举1反3开垦别的职能了,记得遵从开辟情势,代码组织措施,以上代码的例证在Ext
JS 四 SDK中,examples/app/simple目录中

(2)、创建view/student/Edit.js视图

可以看到日志是天经地义的,但大家实际上想做的是编写制定用户消息,让我们前几天做,成立多个新的视图
app/view/student/Edit.js

Ext.define('FWY.view.student.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.studentedit',
    title : '修改学生信息',
    layout: 'fit',
    autoShow: true,
    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: '姓名'
                    },
                    {
                        xtype: 'textfield',
                        name : 'age',
                        fieldLabel: '年龄'
                    },
                    {
                        xtype: 'textfield',
                        name : 'sex',
                        fieldLabel: '性别'
                    }
                ]
            }
        ];
        this.buttons = [
            {
                text: '保存',
                action: 'save'
            },
            {
                text: '取消',
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});
(三)、修改调节器加载视图

接下去我们要做的正是在调控器加载那么些视图,渲染并且加载用户音信:

Ext.define('FWY.controller.Students', {
    extend: 'Ext.app.Controller',
    views: [
        'student.List',
        'student.Edit'//添加edit视图
    ],
    init: ...
    editStudent: function(grid, record) {
        var view = Ext.widget('studentedit');//注册组件,显示窗口
        view.down('form').loadRecord(record);//加载数据到表单中
    }
});

第3大家用 Ext.widget 方法成立了视图,那一个方法同样
Ext.create('widget.studentedit'),然后大家又一遍借助组件查询找到了窗口中的表单,每一种ExtJS四中的组件都有三个
down措施,能够依据组件查询援救的精选器来急忙找到肆意下层的零件,双击表格中的壹行能够见见弹窗效果。

三、创制Store和Model实行重构

当今大家有了表单,能够起首编写制定和保存用户音讯了,可是那从前要求做一小点重构。
FWY.view.student.List 创制了四个内联的 Store
,那样能够干活只是大家必要把 Store
分离出来以便我们在动用的其余任务能够引用并立异在那之中的新闻,我们把它献身它应有在的文书中
app/store/Students.js

Ext.define('FWY.store.Students', {
    extend: 'Ext.data.Store',
    fields: ['id','name', 'age','sex'],
    data: [
        {id:1,name: '张三',    age: 30,sex:'男'},
        {id:2,name: '李四',    age: 20,sex:'女'}
    ]
});

于今大家需求做两处更改,首先大家供给让 Students 起初化的时候加载这一个Store :

Ext.define('FWY.controller.Students', {
    extend: 'Ext.app.Controller',
    stores: ['Students'],//加载store
    ...
});

接下来我们要把前边一直在视图中内联的store改造掉,

Ext.define('FWY.view.student.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.studentlist',
    store: 'Students',//引用Store
    ...
});

调节器的代码中中引进了store,store会被活动加载到页面并予以二个storeId,这让视图中使用store变的轻易(那个例子中,只要配置
store: ‘Students’ 就足以了) 今后大家只是在store中内联的定义了四个字段
(id,name,age,sex),那样能够干活了。

更进一步重构:

ExtJS四中有一个精锐的
Ext.data.Model类,在编写制定用户的时候大家能够依靠它,使用Model重构下Store,在
app/model/Student.js中创制一个Model:

Ext.define('FWY.model.Student', {
    extend: 'Ext.data.Model',
    fields: ['id','name','age','sex']
});

那正是概念我们的Model供给做的,将来亟待让Store引用Model替换掉使用内联字段的形式,并且让调控器也援引Model:

//修改控制器,引用Model
Ext.define('FWY.controller.Students', {
    extend: 'Ext.app.Controller',
    stores: ['Students'],
    models: ['Student'],
    ...
});
//修改store,引用Model
Ext.define('FWY.store.Students', {
    extend: 'Ext.data.Store',
    model: 'FWY.model.Student',
    data: [
        {id:1,name: '张三1',    age: 30,sex:'男'},
        {id:2,name: '李四1',    age: 21,sex:'女'}
    ]
});

四、利用模型保存数据

于今我们有了叁个用户数据表,双击每⼀1行都能开荒三个编写制定窗口,未来要做的是保留编辑更换,编辑窗口有3个编辑表单,还有保存按钮,未来大家立异一下调整器让保存开关有响应:

Ext.define('FWY.controller.Students', {
    init: function() {
        this.control({
            'viewport > studentlist': {
                itemdblclick: this.editStudent
            },
            'studentedit button[action=save]': {//获取studentedit视图中的button配置action=‘save’的按钮事件
                click: this.updateStudent
            }
        });
    },
    updateStudent: function(button) {
        console.log('clicked the Save button');
    }
});    

接下去填充 updateStudent 真正的逻辑。大家必要把多少从表单中收取,再
设置回store中:

updateStudent: function(button) {
    var win    = button.up('window'),
    form   = win.down('form'),
    record = form.getRecord(),
    values = form.getValues();
    record.set(values);
    win.close();
}

5、保存到服务器

让大家扩张和服务器端的并行落成那一个事例。今后我们照旧应编码了两行表格的数
据,今后让我们透过ajax加载:

Ext.define('FWY.store.Students', {
    extend: 'Ext.data.Store',
    model: 'FWY.model.Student',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'data/students.json',
        reader: {
            type: 'json',
            root: 'students',
            successProperty: 'success'
        }
    }
});

此地大家去除了 ‘data’ 属性,替换到 proxy
,代理是让Store只怕Model加载和保存数据的三个方法,有AJAX,JSONP,HTML5的localStorage本地存款和储蓄等。这里我们应用了二个归纳的AJAX代理,让它通过UQashqaiL
‘data/students.json’ 加载数据。

咱俩还要给代理附加了三个reader,reader是用来把服务器重回的数码解码成Store能分晓的格式,此番大家运用了JSON
reader,并且钦定了root和 successProperty 配置(JSON
reader的事无巨细布署看文书档案),最终大家成立一下数据文件 data/students.json
,输入内容:

{
    success: true,
    users: [
        {id: 1, name: 'zhang',    email: 'zhang@126.com'},
        {id: 2, name: 'lishi', email: 'lishi@126.com'}
  ]
}

任何的改换便是我们给Store设置了 autoLoad 属性并设置为 true
,那表示Store生成之后会活动让Proxy加载数据,刷新⼀一下页面应该是见到和后面同样的结果,分歧的是前几天不是在程序中留存硬编码数据了,最终的事情是将转移传回服务器端,这些事例中我们利用静态的JSON文件,未有采取数据库,但丰盛表明我们例子的了,首先做一丢丢变动报告proxy用于立异的url:

proxy: {
    type: 'ajax',
    api: {
        read: 'data/students.json',
        update: 'data/updateStudents.json',
    },
    reader: {
        type: 'json',
        root: 'students',
        successProperty: 'success'
    }
}

反之亦然从 students.json 读取数据,可是改换会发送到 updateStudents.json
,这里大家做⼀个模拟的答疑回包以让大家理解程序能够正确工作,
updateStudents.json
只供给包括{"success":true},别的要做的就是让Store在编写之后张开联合,供给在
updateStudent 函数中增添一行代码:

    updateStudent: function(button) {
    var win    = button.up('window'),
    form   = win.down('form'),
    record = form.getRecord(),
    values = form.getValues();
    record.set(values);
    win.close();
    this.getStudentsStore().sync();//将数据同步到store中
}

最后附上本篇的代码:点击下载

–本篇完–

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有