日期:2014-05-16  浏览次数:20499 次

exjs 初学笔记(一)

??? 4年前玩过extjs ,如今重新捡回来,感觉还是有点手生,今天看了一下视频,记录一下。

?

???

Ext.onReady(function(){}) //加载事件

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

//创建函数别名

Ext.get("myb") //这个能获取页面id为myb的元素

//创建对象的几种方式
1. var win = new Ext.window.Window({
????width:400,
????height:300,
????title:'uspcat'
???});

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

3.
//先声明,后创建符合面向对象的原则
??Ext.define("myWin",{
???extend:'Ext.window.Window',
???width:400,
???height:300,
???title:'uspcat',
???initComponent: function() {
????this.callParent(arguments);
???}
??});

??var win = Ext.create("ux.myWin",{
????title:'my win'
???});

//动态加载
?Ext.Loader.setConfig({
??enabled:true,
??paths:{
???myApp:'code/ux' //命名空间,extjs 会动态加载该空间下的控件
??}
?});

在code/ux 目录下有个mywin.js 内容如下
??Ext.define("ux.myWin",{
???extend:'Ext.window.Window',
???width:400,
???height:300,
???config: {
????? price: 50 
???},
???newtitle: 'new uspcat',
???mySetTitle:function(){//自定义方法
????this.title = this.newtitle;
???},
???title:'uspcat',
???initComponent: function() {
    //初始化方法
????this.mySetTitle();
????this.callParent(arguments);
???}
??});

//如果在某个地方引用到了这个ux.myWin 则会动态加载 mywin.js
Ext.get("myb").on("click",function(){
???var win = Ext.create("ux.myWin",{
????title:'my win',
????price:600,
????requires:['ux.myWin'] //需要加载的控件
???});

??});

//给类的属性加方法 ,注意上面的mywin.js 里面有个   config: {
 //     price: 50 
 //  },属性 这个会自动生成get方法
Ext.get("myb").on("click",function(){
???var win = Ext.create("ux.myWin",{
????title:'my win',
????price:600,
????requires:['ux.myWin']
???});
???alert(win.getPrice())
??});

//这个到是挺有用的

//多重继承
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();

  //mixins 属性可以达到多重继承的功能