extjs4 记录

1.Ext.define时调用父类构造函数(来自官方文档) extjs4.0之后的方法


 constructor: function (config) {
         this.callParent(arguments);
        //this.superclass().initComponent.call(this,config);//4.0以前的方式
}

http://stackoverflow.com/questions/1721935/better-way-to-call-superclass-method-in-extjs

这个问题里有人提到了这种方法.那我们如果在父类中需要这个config配置参数呢.待续

这里又扯出了call()方法...obj1.method1.call(obj2,argument1,argument2)
这里理解为obj2调用obj1的method1方法

2.Ext.override和Ext.extend

Ext.override文档如是说

Overrides members of the specified target with the given values.
If the target is a class declared using Ext.define, the override method of that class is called (see Ext.Base.override) given the overrides.
如果目标参数是一个使用Ext.define定义的类,那么就会调用对象的覆盖方法.
If the target is a function, it is assumed to be a constructor and the contents of overrides are applied to its prototype using Ext.apply.
如果目标参数是一个函数,那么就会调用Ext.apply来在函数原型中覆盖此方法
If the target is an instance of a class declared using Ext.define, the overrides are applied to only that instance.
如果目标参数是一个实例,那么就只有这个实例的方法会被覆盖修改.
In this case, methods are specially processed to allow them to use Ext.Base.callParent.
在这种情况下,在方法内部也可以访问父类的方法.

 var panel = new Ext.Panel({ ... });
 Ext.override(panel, {
     initComponent: function () {
         this.callParent();
     }
 });

If the target is none of these, the overrides are applied to the target using Ext.apply.
其他情况,直接调用Ext.apply来处理
Please refer to Ext.define and Ext.Base.override for further detail

源码如下:

override: function (target, overrides) {
            if (target.$isClass) {//是类
                target.override(overrides);
            } else if (typeof target == 'function') {//是一个方法
                Ext.apply(target.prototype, overrides);
            } else {
                var owner = target.self,name, value;
                if (owner && owner.$isClass) { // if (instance of Ext.define'd class)
                    for (name in overrides) {
                        if (overrides.hasOwnProperty(name)) {
                            value = overrides[name];
                            if (typeof value == 'function') {
                                //<debug>
                                if (owner.$className) {
                                    value.displayName = owner.$className + '#' + name;
                                }
                                //</debug>
                                value.$name = name;
                                value.$owner = owner;
                                value.$previous = target.hasOwnProperty(name)
                                    ? target[name] // already hooked, so call previous hook
                                    : callOverrideParent; // calls by name on prototype
                            }
                            target[name] = value;
                        }
                    }
                } else {
                    Ext.apply(target, overrides);
                }
            }
            return target;
        }
    });

而在Ext.Base.override中有一句 As of 4.1, direct use of this method is deprecated. Use Ext.define instead: 这货已过时,使用Ext.define....所以不能在实例上直接调用override了.

Ext.extend()已被声明抛弃

并且子类继承下来的是父类中通过superclass.prototype方式定义的属性（包括用此方法定义的函数）,而不继承superclass中的定义的属性和方法，如果子类中的方法名与父类中相同则会覆盖。在一片博文中提到有Ext.extend是对类进行继承,而Ext.override是对实例进行操作.并且在extend内部使用了override.并且Ext.extend 的继承只会覆写构造函数 prototype 中的对象

详见http://blog.youkuaiyun.com/jerrysbest/article/details/6639460

但是在Ext.Class中有这个这个属性,那么我们在配置一个类的时候就可以来制定该类继承自哪个类.文档说明是:The parent class that this class extends.文档代码如下

Ext.define('Person', {
    say: function(text) { alert(text); }
});
Ext.define('Developer', {
    extend: 'Person',
    say: function(text) { this.callParent(["print "+text]); }
});

那我们在继承修改一个类的时候使用Ext.override.

在继承,定自定义类时,使用Ext.define().同时Ext.create()和Ext.define()都是ClassManager.create()的简略写法.

3.看到callParent()了,看文档的时候又看到了callSuper().这两方法居然用于bug修复.简直屌爆了.

比如说,你有一个方法有一个bug,怎么去修复呢,写另一个类,override有问题的类,覆盖有bug的方法,在方法最后调用callSuper(),再次调用的时候就会调用新写的方法.代码如下:

(function(){
	 Ext.onReady(function() {
		Ext.define("Mybug",{
			constructor:function(){
				alert("我来报错了");
				this.callParent();
			}
		});
		Ext.define("Myfix",{
			override:"Mybug",
			constructor:function(){
				alert("我修复了");
				this.callSuper();
			}
		});
		var bug = new Mybug();
	});
})(); 

这时,弹出的是我修复了...
callParent方法的最后一句描述是

To override a method and replace it and also call the superclass method, usecallSuper. This is often done to patch a method to fix a bug.

有一个问题,如果这样修复了bug,查看源代码时,如果没有注意到这个就会被有bug的代码所误导....

4.关于LoadMask的构造函数

妹的,发现一个坑...关于LoadMask遮罩层.按照手册上的写法

var myMask = new Ext.LoadMask(myPanel, {msg:"Please wait..."});

会提示

"Ext.LoadMask: LoadMask now uses a standard 1 arg constructor: use the target config"

这是什么玩意啊,手册都不靠谱啊.好吧,像下面这样写就好了,只有一个参数的构造函数.....

var myMask = new Ext.LoadMask({target:loadingConetnt,msg:"求到码的"});

当然这样写也是可以的啦,就是不要照着文档敲就好了.

var myMask = Ext.create("Ext.LoadMask",{
			target:loadingConetnt,
			msg:"求到码的"});

5.关于       所用的 getAttributeNode() 已不赞成使用。请使用 getAttribute() 替代。

在调用Ext.Msg.alert("xx","xx");时出现该提示.查看代码,在ext-all-dev.js(4.2.1) 31237行

isFocusable: function (/* private - assume it's the focusEl of a Component */ asFocusEl) {
            var dom = this.dom,
                tabIndexAttr = dom.getAttributeNode('tabIndex'),//就是这一句
                tabIndex,
                nodeName = dom.nodeName,
                canFocus = false;
            // Certain browsers always report zero in the absence of the tabIndex attribute.
            // Testing the specified property (Standards: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-862529273)
            // Should filter out these cases.
            // The exceptions are IE6 to IE8. In these browsers all elements will yield a tabIndex
            // and therefore all elements will appear to be focusable.
            // This adversely affects modal Floating components.
            // These listen for the TAB key, and then test whether the event target === last focusable
            // or first focusable element, and forcibly to a circular navigation.
            // We cannot know the true first or last focusable element, so this problem still exists for IE6,7,8
            // See Ext.util.Floating

看到下面的注释就明白了,果然是为了兼容低版本的IE啊.网上有关于getAttributeNode()和getAttribute() 的区别的用法.链接https://www.imququ.com/post/getattribute-and-getattributenode.html

6.关于Ext.get()和Ext.fly()的区别

fly节省内存,单例的flyweight对象,每次获取新对象只是改变其中的dom引用.get则是每次创建新对象.

详见http://www.cnblogs.com/fsjohnhuang/articles/2467800.html

7...手册  4.2.1.883 Ext.util.TaskManagerView 的实例代码显示不对,原因是<code>标签位置写错了.

8.关于grid的标题行的最右边的那个下拉菜单.需要去掉的话.

需要设置

enableColumnHide:false     //不显示隐藏列菜单项
sortableColumns:false         //不显示排序菜单项,需要排序的列需要在columns配置项中配置sortable:true

代码

var mainStore = Ext.create('Ext.data.Store', {
                fields: ['name', 'sex', 'job', 'sortid'],
                data: [
                    {'name': 'mrz', 'sex': '男', 'job': '大堂经理', 'sortid': '1'},
                    {'name': 'mrzplus', 'sex': '男', 'job': '服务员', 'sortid': '2'},
                    {'name': 'mrzmin', 'sex': '男', 'job': '接待生', 'sortid': '3'}
                ],
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json'
                    }
                }
            });
            var mainPanel = Ext.create('Ext.grid.Panel', {
                title: '制图',
                html: '主题',
                flex: 2,
                store: mainStore,
                columns: [
                    {text: '姓名', dataIndex: 'name', flex: 2,sortable :true},
                    {text: '性别', dataIndex: 'sex', width: 40,sortable :true},
                    {text: '职位', xtype: 'templatecolumn', dataIndex: 'sortid', flex: 4, tpl: '{job}',sortable :true}
                ],
                enableColumnHide:false,
                sortableColumns:false
            });

现在就是没有右边的那个下拉菜单了,每列还是可以排序的.不知道有没有其他方法呢.