理解 ExtJS 框架语法答案

【问题标题】：Understanding ExtJS Framework Syntax理解 ExtJS 框架语法
【发布时间】：2018-08-12 23:56:30
【问题描述】：

我得到了一个使用 Sencha 的 ExtJS 框架的项目，没有移交或文档。我正在努力掌握它并理解以下语法，并为该框架的新手寻找网站/资源。

我一直在浏览代码，但不确定它到底在做什么，即：

if(val==1) {
        Ext.getCmp('status').setText('AWAITING APPROV');
    }
    switch(flag) {
        case 1: if(val==0) {
                    Ext.getCmp('complex_first').el.replaceCls('x-form-complex', 'x-form-simplex');
                } else {
                    Ext.getCmp('complex_first').el.replaceCls('x-form-simplex', 'x-form-complex');
                }
                break;
        case 2: if(val==0) {
                    Ext.getCmp('complex_second').el.replaceCls('x-form-complex', 'x-form-simplex');
                } else {
                    Ext.getCmp('complex_second').el.replaceCls('x-form-simplex', 'x-form-complex');
                }
                break;
    default: break;
    }

现在我对 jQuery 非常了解，因此可以用来与 ExtJS 进行比较，但以下具体是做什么的：

Ext.getCmp('status')
Ext.getCmp('complex_first').el.replaceCls('x-form-complex', 'x-form-simplex');
Ext.getCmp('complex_first').el.replaceCls('x-form-simplex', 'x-form-complex');

这些类/div id 是否在代码或 CSS 文件中可以提供更多信息？

【问题讨论】：

能否请您发布您的应用程序是在哪个版本的 Ext 中编写的？这可能很重要。您可以在应用程序控制台中使用Ext.versions 进行检查。

标签： javascript jquery css extjs

【解决方案1】：

在 Ext JS 应用程序中，页面上属于 Ext.Component 子级的所有内容（网格、面板、表单项等）都会使用静态 Ext.ComponentManager 注册。

这提供了一种以编程方式检索对这些组件的引用并对其执行操作的简单方法，而无需运行可能很复杂的 DOM 查询。

Ext.getCmp() 是 Ext.ComponentManager.get() 的别名，因此，在您的示例中，Ext.getCmp('status') 将检索使用 id status 创建的组件。您将能够在代码库中找到对它的引用。

一个组件，只有在被渲染之后，才会获得一个Ext.dom.Element 对象，允许你与DOM 元素进行交互。这可以通过 .getEl() 或直接通过 .el 属性访问。 Element 对象提供了额外的方法来与 DOM 交互，提供跨浏览器的兼容性等（大致相当于 jQuery 元素）

replaceCls() 将交换或添加 DOM 中的类。

我建议在尝试破译可能很复杂的代码库之前创建一个示例应用程序来掌握核心 Ext JS 概念。

【讨论】：

【解决方案2】：

docs 很好。确保寻找与您的项目相匹配的版本和工具包。除了文档之外，您还可以单击页面顶部或属性/方法级别的“查看源代码”以查看类或成员的源代码。在右栏中，它列出了类层次结构、所有子类、mixin 等等。

Ext.getCmp 通过 id 查找 Ext.Component。这将返回组件实例，它是一个 Ext 对象。您的代码传递给此方法的字符串（'status'、'complex_first'、'complex_second'）应与 JS 代码中提供给组件的 id 匹配。它也是渲染时赋予底层 DOM 元素的 id。

组件的当前版本文档没有列出属性el，但是如果您返回version 3.4，您会找到它。它返回一个Ext.dom.Element 的实例，它是代表组件的顶级DOM 元素的包装器。目前支持的方法是调用getEl。但是，如果您查看当前版本的 source，您会发现它正在返回 .el 属性。因此，该属性仍然存在于幕后。

replaceCls 是Ext.dom.Element 的一种方法，它用其他类替换此元素上的一个或多个 CSS 类。

【讨论】：