Extjs学习笔记(二) 特性

  @JS 类的声明,和对象的创建

类的创建，实际是创建一个function。使用时要先new

 

function user(){
    //this 相当于 高级语言的public
    this.Name = 'uspcat';
    this.age = 26;
    //var 就相对于高级语言当中的private
    var email = "yfc@126.com"

    //以下相当于java中的geter
    this.getEmail = function(){
        return email;
   }
}

 

使用:

var u = new user();
alert(u.getEmail())

 

   方法二：

var person = {
    name:'yfc'
    ,age:26
};

使用
alert(person.name+"  "+person['age'])

 

  @原始方法用EXTJS创建一个window

var win = new Ext.window.Window({
                width:400,
                height:300,
                title:'uspcat'
            });
        win.show();

 

 

@ 利用一个按钮触发window窗体,了解EXTJS的事件机制

<button id="myb">
Show
</button>

 1.得到那个按钮的dom对象
 2.为按钮对象添加单击的事件
 3.单击的时候调用对象win的show方法
        Ext.get("myb").on("click",function(){
            win.show();
        });

 

  @用EXTJS4.0的create来创建window

1.Ext.create() = Exr.ClassManager.instantiate()

2.alias

var o = {
    say : function(){
    alert(11111);
     }
 }
var fn = Ext.Function.alias(o,'say');
//使用
fn();

官方例子:

Ext.Class:

alias : String []

List of short aliases for class names. Most useful for defining xtypes for widgets

Ext.define('MyApp.CoolPanel', {
    extend: 'Ext.panel.Panel',
    alias: ['widget.coolpanel'],
    title: 'Yeah!'
});

// Using Ext.create
Ext.widget('widget.coolpanel');
// Using the shorthand for widgets and in xtypes
Ext.widget('panel', {
    items: [
        {xtype: 'coolpanel', html: 'Foo'},
        {xtype: 'coolpanel', html: 'Bar'}
    ]
});

 

 

 

Ext.Base

Create aliases for existing prototype methods. Example:

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()

   

Ext.Function

alias ( Object /Function object, String methodName ) : Function

Create an alias to the provided method property with name methodName of object . Note that the execution scope will still be bound to the provided object itself.

Parameters

• object : Object /Function
• methodName : String

Returns

• Function

  aliasFn

 

@利用define自定义类并且集成(extend)window
    //初始化的方法
    initComponent: function() {
        this.callParent(arguments);
    }

    //定义新类
		Ext.define("ux.myWin",{
		   //继承Window
			extend:'Ext.window.Window',
			width:400,
			height:300,
			 //关键字
			config: {
			   price: 500
			},
			newtitle: 'new uspcat',
			mySetTitle:function(){
				this.title = this.newtitle;
			},
			title:'uspcat',
			initComponent: function() {
				this.mySetTitle();
				this.callParent(arguments);
			}
		});

 

  @requires  JS的异步加载

(function(){
    //声明命名空间
	Ext.Loader.setConfig({
		enabled:true,
		paths:{
			myApp:'02/ux' //加载此目录下JS文件
		}
	});

 

创建：

var win = Ext.create("ux.myWin",{
				title:'my win',
				price:600,
				requires:['ux.myWin']
			});

 

@config 自动的get和set

在config中的属性可以自动生成geter和seter。并且属性第一字母会自动大写！

//定义新类
		Ext.define("ux.myWin",{
		   //继承Window
			extend:'Ext.window.Window',
			width:400,
			height:300,
			 //关键字
	config: {//**************
			   price: 500
			},



			newtitle: 'new uspcat',
			mySetTitle:function(){
				this.title = this.newtitle;
			},
			title:'uspcat',
			initComponent: function() {
				。。。。。
			}
		});
//----------------
    调用：
     var win = new ....
     alert(win.getPrice());//**************

 

 

 

@mixins 类的混合

Ext.define("say",{
			cansay:function(){
				alert("hello");
			}
		});
		Ext.define("sing",{
			sing:function(){
				alert("sing hello 123");
			}
		});
		Ext.define('user',{
		    //关键字
                mixins :{//**************
		say : 'say',
		sing: 'sing'
			}});
		             //创建类
		var u = Ext.create("user",{});
		u.cansay();
		u.sing();