开源进销存PSI - ExtJS知识点(1)

引言

这一系列的博客源于PSI的QQ群中有同学抱怨JS代码中没有注释，于是我就决定动手增加注释。同时我也在想：很多关于ExtJS的疑问是和不太熟悉ExtJS的基础知识点相关的，所以我就决定动手写这一系列的博客。

注意：这些知识点仅仅局限于PSI代码中应用到了的，并不是ExtJS开发大全。

Ext.define

这个是我认为在ExtJS所有的知识点中最重要的，原因是几乎每个PSI的JS代码中它必出现。

通俗地讲，Ext.define就是定义一个新的class。因为JS本身没有class这个原生的类型，所以ExtJS内部模拟出了class体系，主要就是实现从一个class继承从而生成新的class。

Ext.define("PSI.App", {
    config: {
        userName: ""
    },
    // 下面的代码省略

config这个用法很特别，会让人有些疑惑。

1、在config里面的属性会自动生成一个get方法，例如上面的 userName，就会生成一个getUserName()方法。

下面是调用的例子：

// var me = this;

["当前用户：<span style=‘color:red‘>" + me.getUserName() + "</span>"]

2、config对应的用法是在创建这个class的时候，可以作为额外的参数传递给这个class，例如：

var app = Ext.create("PSI.App", {
            userName: "{$loginUserName}"
        });

特别注意的是需要用Ext.create方法来创建class，不能用new

上面的class，是需要通过create方法创建出实例来使用。Ext.defin也可以定义静态方法。

Ext.define("PSI.MsgBox", {
    statics: {
        showInfo: function (info, func) {
            Ext.Msg.show({
                title: "提示",
                msg: info,
                icon: Ext.Msg.INFO,
                buttons: Ext.Msg.OK,
                modal: true,
                fn: function () {
                    if (func) {
                        func();
                    }
                }
            });
        },
    // 下面的代码略

通过statics就能定义出静态方法。上面定义的静态方法的调用例子是：

PSI.MsgBox.showInfo("请选择要编辑的组织机构");

调用静态方法，不需要用Ext.create

通过extend来实现从一个已有的class继承，例如：

Ext.define("PSI.Inventory.InitInventoryEditForm", {
    extend: "Ext.window.Window",
    //下面的代码略

这就定义了一个class：PSI.Inventory.InitInventoryEditForm，其父类是 Ext.window.Window

原文：http://my.oschina.net/u/134395/blog/472632