Ext 4.1 Ext.define写法

本文主要介绍Ext.define的写法，包括类的定义，控件的自定义，构造函数的使用，还有静态函数的定义，需要一定的使用Ext的经验。

Ext.define主要用于定义或者重写一个类，在Ext中一个基本的类可以这样写：

Ext.define('AClassDefine.Class', //定义类名
{
name: 'a Property', //一个属性
title: 'other Property', //另外一个属性
fnShowMsg: function () {
    var me = this;    //定义一个变量存本身的this，以防其他地方调用作用域改变，照成this的混乱
    alert(me.name + me.title);
}
});

Ext.onReady(function () {
//    var obj = new AClassDefine.Class(); //创建类
    var obj = Ext.create('AClassDefine.Class'); //使用create的方法创建类
    obj.fnShowMsg(); //调用类的方法
});

 

Ext.define( String className, Object data, Function createdFn ) : Ext.Base

define继承Ext.Base,主要有3个参数

第一个参数是类名，

第二个参数是配置，

第三个参数是创建结束后的回调函数。

 

在实际的项目应用当中，为了保证网站整体的风格，必须要定一些公用的组件，比如说按钮大小固定，相应功能的按钮的图标要一致等等，下面是定一个公用的添加按钮的代码：

Ext.define("Custom.AddBigButton", {
    extend: "Ext.Button",
    stateful: false,
    minWidth: 50,
    text: "新增",
    icon: "new.png",
    iconAlign: 'top',
    scale: 'medium'
});
Ext.define("Custom.AddSmallButton", {
    extend: "Ext.Button",
    stateful: false,
    minWidth: 75,
    text: "新增",
    icon: "new_min.png",
    iconAlign: 'left',
    scale: 'small'
});

Ext.onReady(function () {
    Ext.create('Custom.AddSmallButton', { renderTo: Ext.getBody() });
});

效果如图：

 

 

有时候我们会在类的构造函数当中去配置类的属性，比如说一个公用窗口的title大小等等这些属性，下面的代码定义了一个公用的窗口，窗口里面有底部有2个按钮，中间有一个grid，我定义的时候在构造函数当中去创建他们：

Ext.define("Custom.editWindow", {
    extend: "Ext.window.Window",
    layout: "fit",
    width: 500,
    height: 400,
    frame: false,
    constrain: true,
    modal: true,
    autoScroll: false,
    resizable: false,
    closeAction: "hide",
    buttonAlign: "center",
    initComponent: function () {//构造函数
        var me = this;
        var btnSave = Ext.create('Ext.Button', { text: '保存' });
        var btnClose = Ext.create('Ext.Button', { text: '关闭' }); //创建2个按钮

        me.buttons = [btnSave, btnClose]; //添加到窗体的buttons中

        var listStore = Ext.create('Ext.data.Store', {//创建一个store
            fields: ['name', 'email', 'phone'],
            data: { 'items': [
                { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
                { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
                { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" },
                { 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254" }
            ]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
        var grid = Ext.create('Ext.grid.Panel', {//创建一个grid
            store: listStore,
            columns: [{ header: 'Name', dataIndex: 'name' },
                        { header: 'Email', dataIndex: 'email', flex: 1 },
                        { header: 'Phone', dataIndex: 'phone'}],
            height: 200,
            width: 400
        });

        me.items = [grid]; //将grid添加窗体的items中

        btnClose.on("click", function () { me.hideMe(); }); //关闭按钮绑定后面定义的hideme函数

        me.superclass.initComponent.call(me); //调用父类的构造函数
    },
    hideMe: function () {
        var me = this;
        me.hide();
    }
});
Ext.onReady(function () {
    //    Ext.create('Custom.editWindow').show();

    Ext.create('Custom.editWindow', { title: '我是标题' }).show(); //创建并设置属性
});

 效果如图：

在实际应用当中我们还会遇到另外一类的情况，公用而且经常调用的函数，而在C#等语言当中，我们会把他设置成静态函数，静态函数不用去实例化，就可以直接调用底下下的方法，在Ext.define中一样可以定义静态函数。在这里，我定义了一个名叫Jshelper的静态类，下面有个静态函数alert，代码如下：

Ext.define("JsHelper", {
    statics: {//标识这里面的是静态函数
        alert: function (title, content) {
            Ext.Msg.alert(content, content);
        }
    }
});
Ext.onReady(function () {

    JsHelper.alert("我是标题","我是内容");//直接通过名称调用
});

效果如图：

最后是源代码，不包含Extjs的包，要看效果自己去下载Extjs 点我下载源码