ExtJs学习(2)

最新推荐文章于 2019-03-13 20:38:00 发布

WangZhaoRui90

最新推荐文章于 2019-03-13 20:38:00 发布

阅读量288

点赞数

分类专栏： ExtJS基础篇文章标签： extjs extjs4

本文链接：https://blog.csdn.net/WangZhaoRui90/article/details/53486376

版权

ExtJS基础篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习大纲 :

1.JS类的声明和对象的创建.
2.原始方法用extJs创建一个window.
3.利用一个按钮触发window窗体,了解一下extJs的事件机制.
4.用extJs4.0的create来创建window.
1)起别名
2)使用create创建
5.利用difine自定义类并且集成(extend)window.
6.requires JS的异步加载.
7.config 自动的 get 和 set.
8.mixins 类的混合.

目录结构 :

这里写图片描述

代码及知识点:

两个文件
practice_02.js
basic_02.html

1、

//JS创建类的两种方法
//第一种:一个类就是一个function
function user(){
    //this 是可以在外部访问的,它相当于Java语言里的 public
    this.name = "wzr";
    this.age = 27;
    //var 是内部的,它相当于Java语言里的private,在外部是访问不到的,想要访问要通过函数来做.
    var email = "123@163.com";
    this.getEmail = function(){
        return email;
    }
}
var u = new user();
alert("用户 "+u.name+" 今年 "+u.age+" 岁 !");
alert("用户 "+u.name+" 今年 "+u.age+" 岁 !"+" 他的 email 是  "+u.getEmail());
//第二种:
var person = {
    name:"wzr",
    age:27
}
alert(person.name + "  "+person.age);

2 、
3、

(function(){
    Ext.onReady(function(){
        var win = new Ext.window.Window({ title:'我是一个弹窗', width:400, height:300 });
        win.show(); // 注意 ExtJs 是严格区分大小写的,所以show()首字母必须小写.
        //1.得到按钮的dom对象
        //2.为按钮添加一个单击的事件
        //3.单击的时候调用win的show方法
        Ext.get("mybtn").on("click",function(){ //Ext的get方法:得到dom对象,参数为对象的id. win.show(); });
    })
})();

Ext.get(“mybtn”).on() 这是一个ExtJs的时间监听机制,以后会学到,这里先知道有这么一个事就好.

basic_02.html中添加一个按钮

<body>
    <button id="mybtn">SHOW</button>
</body>

4
1) 起别名

(function(){
    Ext.onReady(function(){
        var o = { //这里是一个Object对象,对象里有一个 say 方法
            say : function(){
                alert("我是方法say");
            }
        }
        var fn = Ext.Function.alias(o,"say");
        fn();
    })
})();

Ext.Function里的alias()方法就是起别名的方法,它有两个参数,第一个是一个Object对象,第二个是一个字符串String(需要起别名的对象),返回值就是别名.之后我们在用到这个方法的时候就可以直接用这个别名了而不是用o.say()这个种方式,另外一个非常重要的地方就是,当我们给一个方法起了别名之后,那么,以后我们在整个项目的任何一个js文件中都可以直接调用这个本应在一个对象内部的方法。此处存疑,本人暂时无法证明这种说法。

2) 用create创建

//完整类名
var myWin = Ext.create('Ext.window.Window',{
            title:'我是一个create出来的弹窗',
            width:400,
            height:300
        })
myWin.show();

Ext.create(”,{}) create方法第一个参数是一个类名,第二个参数是类的属性值,返回的是所创建对象的名字.
API上还提供了另外几种create创建类的方法,大同小异.

 // alias 别名
 var window = Ext.create('widget.window', {
     width: 600,
     height: 800,
     ...
 });

 // alternate name 备用名
 var window = Ext.create('Ext.Window', {
     width: 600,
     height: 800,
     ...
 });

 //单个对象与xclass属性:
 var window = Ext.create({
     xclass: 'Ext.window.Window', // 任何有效的'name' (以上)
     width: 600,
     height: 800,
     ...
 });

5、
6、

define( String className, Object data, Function createdFn ) : 定义或覆盖一个类
Parameters 参数解析 :

~ className(String) : 类名
你所创建的类的名字 ;
命名空间的字符串格式，例如： ‘My.def.MyWindow’, ‘FeedViewer.plugin.CoolPager’ 我们强烈建议遵循这个简单的约定： - 根和类的名称是’FeedViewer’ ,’CoolPager’骆驼拼写法 - 其他一切用小写

~ data : Object
键 - 值对创建的这个类的属性。
属性名称可以是任何有效的字符串，除了那些保留的关键字.下面列出：
    - extend：用于继承
    - mixins : 混入 ,实现多继承
    - statics : 定义静态方法，属性不能被子类继承
    - config : 定义类的配置项，会把config里的每个属性加上get和set方法
    - alias : 类的别名
    - self : 自身
    - singleton : 设置该类为单例模式
    - alternateClassName : 备用名，与alias差不多
    - override 重写
    - requires：需要使用到的类名数组，在动态加载时会根据该属性去下载类，注意需要的类是在当前类之前被加载
    - uses：与requires类似但是被引用的类可以在该类之后才加载
    - constructor：构造器属性，一般用来初始化类的配置和调用其父类的方法

~ createdFn : Function
可选的回调后执行的类的创建，执行范围(this)将创建新的类本身。

Returns 返回值 :
~ Ext.Base
Ext.define创建的所有类的根。
Ext.Base是所有Ext类构造块。Ext中所有的类从Ext.Base继承。所有其他类都继承这个类的所有原型和静态成员。

- - - - - - - - - - - - - – - - - - - - - - - - - - - - - - - - - - - - - - - (1) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

*********************第一种,最基本的定义一个类**************************

Ext.define('My.def.MyWindow',{
    width:400,
    heigth:300,
    title:'我是自定义的第一个类',
    func : function(){
        Ext.Msg.alert("我是这个类的方法属性");
    }

});
var myWin = Ext.create('My.def.MyWindow');
myWin.func();
alert(myWin.title+" 我的宽是  "+myWin.width+" 我的高是 "+myWin.heigth);

这里写图片描述

- - - - - - - - - - - - - – - - - - - - - - - - - - - - - - - - - - - - - - - (2) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
定义了覆盖，包括override 属性。汇集处理指定的类，以扩展或修改该类内容的覆盖。这可能是简单的设置默认的属性值，或者是它可以扩展和/或更换的方法。这也可以扩展静态变量之类的。
简单的说就是对已有的类的扩展或者对类中某一属性进行修改.
重写的用途之一是管理大类里面的片段。

******************************************** 第二种对已有类的扩展 extend ******************************************
Ext.define('My.def.MyWindow2',{
    extend : 'Ext.window.Window',
    width:400,
    heigth:300,
    title:'我是自定义的第二个类,也是第一个真正的窗口!',
    constructor: function (config) {
         this.callParent(arguments); // 调用Ext.window.Window的构造
    },
    say : function(sth){
        return sth;
    }
})
var myWin2 = Ext.create('My.def.MyWindow2');    
Ext.Msg.alert("title",myWin2.title + "   "+myWin2.say('Hello Define !'));

这里写图片描述

这种我们自己定义的类一般多会提取出来放到一个单独的 js 文件中,这样可以让我们的项目更加的工整、干净、有条理。当然我们需要把我们这个类所在的 js 文件引入.如我的:

file: practice - -> def_class - -> MyWindow2.js

(function(){
    Ext.Loader.setConfig({
      enabled: true, // 启用异步加载模式
      paths: { 'My.def': '../my/def' // '类名前缀':'所在路径' }
    });
//或者用setPath设置匹配路径  
//Ext.Loader.setPath('My.def', '../my/def');   //'类名前缀','所在路径' 

    Ext.onReady(function(){     
        var myWin2 = Ext.create('My.def.MyWindow2',{ title:'测试 requires', requires:[ 'My.def.MyWindow2' ] }); 
        Ext.Msg.alert("title",myWin2.title + " "+myWin2.say('我挪窝了 !'));
    })
})();

在Ext.onReady() 之前加入Ext.Loader.setConfig(),记住,一定要在onReady()之前。
Ext.Loader 可以解释成预加载。
在create创建的时候，我们用 requires 引入类 My.def.MyWindow2 此处可以是类的全名、别名等，这样页面加载的时候就会有一个引入 MyWindow2.js 的请求。

这里写图片描述

最后效果如下：
这里写图片描述

可是这样又出现了另一个问题，就是我们的类名和文件名必须相同，那么一个 js 文件中我们就只能写一个类了。之前我曾让类名和文件名不相同,结果是出不来效果 , 所以我得到了以上的结论 , 不知是否正确 , 有大神了解请指出,在此多谢!

file：MyWindow2.js 中：

Ext.define('My.def.MyWindow2',{
    extend : 'Ext.window.Window',
    width:400,
    heigth:300,
    title:'我是自定义的第二个类,也是第一个真正的窗口!',
    constructor: function (config) {
         this.callParent(arguments); // 调用Ext.window.Window的构造
    },
    say : function(sth){
        return sth;
    }
})

7
file : MyWindow2.js

Ext.define('My.def.MyWindow2',{
    extend : 'Ext.window.Window',
    width:400,
    heigth:300,
    config: {
         price: 500  //价格
    }, 
    title:'我是自定义的第二个类,也是第一个真正的窗口!',
    constructor: function (config) {
         this.callParent(arguments); // 调用Ext.window.Window的构造
    },
    say : function(sth){
        return sth;
    }
})

创建类的时候加入 config

file : practice_02.js

var myWin2 = Ext.create('My.def.MyWindow2',{
    title:'测试  requires',
    price:600,
    requires:[
        'My.def.MyWindow2'
    ]
}); 
alert(myWin2.getPrice());

给 price 赋值 600 , 然后用 myWin2.getPrice() , 结果如图 :
这里写图片描述

(function(){
    Ext.onReady(function(m){
        Ext.define('My.def.Music',{ config: { name: '歌'//价格 } });
        Ext.define('My.def.Sing',{ can:function(m){ return "我能唱 "+m; } });
        Ext.define('My.def.Musician',{ ability:function(abt){ return abt; } });
        Ext.define('My.def.Singer',{ extend:'My.def.Musician', mixins:{ sing:'My.def.Sing', music:'My.def.Music' } });

        var singer = Ext.create('My.def.Singer'); 
        alert(singer.can('歌')+singer.ability("改变世界!"));
    })
})();

效果如下 :
这里写图片描述

第二节练习到此结束!

WangZhaoRui90

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs学习(2)

1.JS类的声明和对象的创建. 2.原始方法用extJs创建一个window. 3.利用一个按钮触发window窗体,了解一下extJs的事件机制. 4.用extJs4.0的create来创建window. 1)起别名 2)使用create创建 5.利用difine自定义类并且集成(extend)window. 6.requires JS的异步加载. 7.config
复制链接

扫一扫