wangyuelucky的博客_extjs

观察者模式和中介者模式的区别（以ExtJS 的事件处理为例）

首先，Ext JS4.2中，事件的处理分两大类。一类是，普通的事件处理，另一类是MVC结构中，Controller对所有Domain、Class、Object的事件处理。第一类采用的是观察者模式，第二类采用的是中介者模式。这两种模式，非常容易搞混淆。他们都是为了解决消息传递的问题。3. 中介者模式涉及两个概念，中介和客户。它解决的是客户之间消息传递的问题。中介者的场景，类似于扣扣群或者中介所。扣扣

中介者模式

观察者模式

extjs

原创 2015-01-31 13:20:51 6374 阅读

Extjs 事件机制

Ext版本：4.2.1从原生的浏览器事件处理开始HTML元素如下：<input id ='test' type='button' value='click me'>事件处理如下：/** 浏览器原生的事件机制 */ var e = document.getElementById("test

event

extjs

observable

原创 2015-01-30 10:08:16 862 阅读

extjs 文件加载、解析流程

extjs版本：4.2.1在html中添加应用的启动脚本，如下：<script src="app.js"></script>2. 用户访问html的时候，会去加载app.js文件，app中定义了应用的名字，根路径等信息，并且调用Ext.application()方法，如下：Ext.application({ name

class

extjs

loader

原创 2015-01-16 15:44:39 1791 阅读

extjs loader success callback源码

首先，Loader有几个重要的属性queue: [] 存放所有主文件类信息，包括他的依赖文件信息，结构如下： [{requires: 'Seed.view.MainGrid' &

extjs

loader

success

原创 2015-01-16 11:02:23 1343 阅读

Class.registerPreprocessor('loader')

ext/src/class/Loader.js文件中： Class.registerPreprocessor('loader', function(cls, data, hooks, continueFn) { &n

class

extjs

loader

原创 2015-01-13 15:43:44 893 阅读

ExtClass.process()源码

ext/src/class/Class.js文件中：process: function(Class, data, onCreated) { // 处理拦截事件 var preproces

class

extjs

preprocessor

原创 2015-01-13 15:13:58 778 阅读

sencha cmd metadata

明天元旦，首先祝自己元旦快乐！15年惊喜不断！时间真快，匆匆四年，http://down.51cto.com/data/156763 正题：sencha 5.0.3sencha cmd 实现了7种元数据输出命令，如下图：调用方式如下：注：不指名JDK的路径，需要在项目根目录下运行cmd参考：http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_r

cmd

ext

sencha

metadaa

原创 2014-12-31 09:27:22 777 阅读

sencha app refresh

版本说明：Ext 4.2.1cmd 5.0.31. sencha app refresh的作用是，重新生成bootstrap.js文件，如下图所示：2. bootstrap.js 三个作用：添加各个基础命名空间或者类名的映射路径 Ext.Loader.addClassPathMappings()将类名和备用名，对应起来 Ext.ClassManager.addNameAlternateMappin

cmd

ext

refresh

sencha

原创 2014-12-30 15:09:23 1472 阅读

Ext.class源码

需要把Ext.define格式的假类，转化成真正的类(或function)。Ext.define()方法中调用ClassManager的create()方法，该方法会调用new Class(也就是Ext.Class)Ext.Class的定义如下：/** * @method constructor

class

ext

原创 2014-12-24 10:39:02 1183 阅读

Ext.ClassManager源码

ext/src/class/ClassManager.js// todo 源码分析重要：包含了Ext.define的定义Ext.apply(Ext, { * the class

define

ext

classmanager

原创 2014-12-24 10:22:32 1458 阅读

Ext.Loader源码

ext/src/class/Loader.js主要方法，require，如下：require: function(expressions, fn, scope, excludes) { var e

ext

loader

原创 2014-12-24 09:53:59 1216 阅读

Ext.application源码

ext/src/Ext-more文件中：/** * Loads Ext.app.Application class and starts it up with given configuration after the * page i

application

ext

原创 2014-12-24 09:45:40 375 阅读

当GridPanel添加新的条目的时候，第一个可编辑Cell自动Focus

Ext版本：4.2需求描述：系统中有大量的可编辑列表，用户可以动态的添加条目。每当添加条目的时候，新添加的条目的第一个可编辑单元格，自动获取焦点。如下图所示：第一思路，就是监听GridPanel的add事件，一旦Grid添加条目就触发Focus事件。查看API发现，Grid根本就没有监听Store内容变化的事件。大多数是监听Grid包含组件的事件和view的事件。如下图：所以，只能转变思路。监听S

event

extjs

gridpanel

原创推荐 2014-11-05 16:21:51 2709 阅读

Ext异步加载的小细节

1. 问题描述：Ext文件异步加载、解释、执行的问题。因为这里涉及了EXT面向对象，所以需要对EXT类的定义有深入的理解（本文略）。2. 一个简单的异步加载思路/** * 定义需要加载的模块的文件路径 */ loadUserModule = function (callback) { var

ext

异步加载

原创 2014-10-11 11:01:02 957 阅读

Ext4.2 在controller中监听DOM Element

在组件中，定义原生的html:在controller中的监听方法：

dom

controller

ext4

原创 2014-07-25 09:08:23 819 阅读 2点赞

通过rowexpander插件展现一对多关联数据

先看效果样品和审核记录是一对多的关系，通过XTemplate来展现数据。如果后台的数据是JSON格式的，这个事情就简单了，但是如果后台的数据是XML的，并且通过Model之间的hasmany关系来配置，就复杂一些了。解决方案：model.Sample.jsExt.define("Soims.model.Sample", { extend:&

extjs

rowexpander

原创 2014-07-24 16:13:19 1523 阅读

override Ext.grid.plugin.RowExpander的方法不起作用

Ext版本4.2覆盖方法：Ext.override(Ext.grid.plugin.RowExpander, { setCmp: function (grid) { var me = t

ext

override

原创 2014-07-24 15:29:20 1573 阅读

extjs form isvalid的bug

版本：ext4.2.1问题：在Form中嵌套girdEditor，只要编辑过grid，那么Form的isDirty()永远是ture。Form代码：Ext.define("Soims.view.application.SampleInfoForm", { extend: 'Ext.form.Panel',

bug

form

ext4

原创 2014-06-24 09:35:55 2900 阅读

extjs4 textfield width

extjs4.2 控制form表单中field等组件的宽度。首先，确保form的layout是‘anchor’的。然后，在代码中配置anchor属性，如下图：initComponent: function () { this.items = [{ &nb

layout

ext4

原创 2014-06-17 14:23:41 5587 阅读

extjs 枚举类型

枚举类代码：Ext.define('Soims.model.application.ApplicationState', { statics: { // 关键 Unknown: { value:&

static

enum

ext4

原创 2014-06-11 09:32:45 1608 阅读

EXT4.2 TreeStore数据一次性加载和解析

目前，不知道为什么，TreeStore只支持按节点异步加载数据。2.0的时候，可以根据配置选择是异步加载还是一次性加载。当然，数据可以一次请求（root）的时候都传递给前台，但是TreeStore只解析第一层节点。所以，面临两个问题：1. 非根节点的expand事件，会去触发load方法，从后台加载数据解析，也就是异步。2. root请求，只解析一层，其他层的JSON数据，不能被解析成NodeIn

数据

ext4

Treestore

原创 2014-05-19 09:04:23 5067 阅读

ext store remove old datas load new datas优化

ext4.2需求：清空store1的数据，并把store2的数据加载到store1中。速度太慢，需要优化。原始代码：var start1 = new Date().getTime(); anlyGridStore.removeAll(); var start2 = new Date().getTime(); console.log(start2-st

ext4 store

原创 2014-05-12 15:01:22 705 阅读

ext4 form loadrecord disable validate

ext版本：4.2需求：在数据record绑定到form的时候，Ext会触发field的change事件和validate事件。以至于，新建的空表单界面，会出现验证不通过的样式，如下图：解决思路：在form loadRecord之前，禁止field的change()事件，loadRecord之后，开启field的change()事件。load

ext4

原创 2014-05-12 13:42:03 489 阅读

Ext4 controller中Ajax的scope会污染this指针

login: function (loginId, password, callback) { Ext.Ajax.request({ url: UserService + '/Login', success: this.onLoginSuccess, method: 'POST', sc

extjs controller

原创 2014-03-25 20:20:46 633 阅读

从Extjs defer看浏览器阻塞和计时器

ext版本2.11.今天同学让我检查一段代码，大意如下：// do something 0

setTimeout

extjs

阻塞

defer

原创推荐 2014-01-13 10:27:39 3468 阅读

extjs EditorGridPanel

ext版本2.1系统中，大量用到了EditorGridPanel对grid的Cell进行编辑，如下图：EditorGridPanel原生的处理方式，对我们是不合适的：1. 用户输入值验证不通过，单元格没有特殊的高亮标示，跟普通的field的处理方案不统一。2. 单元格只有在点击编辑的情况下，才触发自定义的验证方法。3. 对于非负数等的验证，是通过禁止'键/鼠'操作来实现的，对于单元测试是一个障碍。

editor

extjs

gridpanel

原创 2014-01-07 15:54:40 1033 阅读

extjs 对象重写类的方法

在ext项目代码中，随处可见自定义类、对象。对象可以覆盖类的方法，如下：var field = new Ext.form.NumberField({ allowBlank: false, allowNegative: false, allowDecimals: false, validateValue: function (v) { // 方

方法

对象

类

extjs

重写

原创 2014-01-06 15:58:07 1485 阅读

再谈Ext Store.each

好久之前转发过一篇关于Ext Store.each方法的文章。http://wangyuelucky.blog.51cto.com/1011508/1064777 只是把API给弄了过来，还有一个小例子。这就是我当时对于ext或者js的理解。今天，刚好又用到Store.each方法，再来写两句自己的东东。其实each的真正定义是在 Ext.util.MixedCollection中，源码如下：ea

js

ext

store

each

原创 2014-01-06 09:12:45 774 阅读

Extjs RadioGroup

ext版本2.11. 单选按钮组实例化代码如下：this._radioIsSingleSource = new Ipms.component.RadioGroup({ fieldLabel: '单一来源', allowBlank: false, width: 100, items: [{ readOnl

extjs radiogroup

原创 2014-01-02 09:35:40 903 阅读

extjs GridPanel SelectionModel 相互关联

ext版本为2.11. 自定义GridPanel类Ipms.OrderGridPanel = function (id, title, iconCls) { // ..

extjs

gridpanel

selectionmodel

原创 2013-12-31 09:48:22 651 阅读 1点赞 1评论

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

技术人生

观察者模式和中介者模式的区别（以ExtJS 的事件处理为例）

Extjs 事件机制

extjs 文件加载、解析流程

extjs loader success callback源码

Class.registerPreprocessor('loader')

ExtClass.process()源码

sencha cmd metadata

sencha app refresh

Ext.class源码

Ext.ClassManager源码

Ext.Loader源码

Ext.application源码

当GridPanel添加新的条目的时候，第一个可编辑Cell自动Focus

Ext异步加载的小细节

Ext4.2 在controller中监听DOM Element

通过rowexpander插件展现一对多关联数据

override Ext.grid.plugin.RowExpander的方法不起作用

extjs form isvalid的bug

extjs4 textfield width

extjs 枚举类型

EXT4.2 TreeStore数据一次性加载和解析

ext store remove old datas load new datas优化

ext4 form loadrecord disable validate

Ext4 controller中Ajax的scope会污染this指针

从Extjs defer看浏览器阻塞和计时器

extjs EditorGridPanel

extjs 对象重写类的方法

再谈Ext Store.each

Extjs RadioGroup

extjs GridPanel SelectionModel 相互关联