用Ext实现js方法的继承,以及扩展Ext组件的开发

 

用Ext实现js方法的继承,以及扩展Ext组件的开发

2012-11-15 10:11  1871人阅读  评论(0)  收藏  举报

  分类：

 

web js（29） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

[javascript]  view plain  copy

1. Ext.namespace("Ext.ux");  
2.   
3. Ext.ux.MyTree = Ext.extend(Ext.tree.TreePanel, {  
4.    animate: true,  
5.    enableDD: false,  
6.    border: false,  
7.    rootVisible: true,  
8.    autoScroll: true,  
9.    height: 500,  
10.    initComponent: function()  
11.    {  
12.     this.root = new Ext.tree.AsyncTreeNode({  
13.        id: "root",  
14.        text: "菜单树"  
15.       });  
16.     this.loader = new Ext.tree.TreeLoader({  
17.        dataUrl: "BBM/getTree.action",  
18.        listeners: {  
19.         "beforeload": function(treeLoader, node)  
20.         {  
21.          treeLoader.baseParams.id = (node.id != "root"  
22.            ? node.id  
23.            : "");  
24.         }  
25.        }  
26.       });  
27.     Ext.ux.MyTree .superclass.initComponent.call(this);  
28.    }  
29.   })  
30.   
31. Ext.reg("myTree", Ext.ux.MyTree );  
32. /*Ext.onReady(function() 
33.   { 
34.    Ext.BLANK_IMAGE_URL = "../resources/images/s.gif"; 
35.    Ext.QuickTips.init(); 
36.    Ext.form.Field.prototype.msgTarget = "side"; 
37.    var viewport = new Ext.Viewport({ 
38.       layout: "fit", 
39.       items: { 
40.        id: "菜单树", 
41.        region: "center", 
42.        xtype: "myTree" 
43.       } 
44.      }) 
45.   })*/  

       其中的innitComponemt需要superclass.initComponent.call(this);子类.superclass.initComponent.call(this);来调用父类的初始化方法.

        通过查看Ext组件继承关系,我们会在原代码里找到,基类调用this.initComponent()来初始化组件.initEvents()来初始化事件.

所以我们可以继承父类组件,重写initComponent、initEvents,并且用this.来增加属性或函数或绑定事件,如果重名则会覆盖原有属性或函数.

        另外在源代码里我们又找到Ext.reg("textarea",Ext.form.TextArea);这是给组件注册xtype的名称.有了xtype我们就可以更方便的使用自己的组件了.