了解ExtJS框架语法

Question

我得到了一个使用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进行比较，但是以下操作到底是什么：

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

这些是class / div id，是否在代码或CSS文件中会提供更多信息？

Answer 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的核心概念。

Answer 2

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

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

Component的当前版本文档未列出属性el ，但是如果您返回3.4版 ，则会找到它。 它返回Ext.dom.Element的实例，该实例是表示组件的顶级DOM元素的包装。 当前支持的获取方法是调用getEl 。 但是，如果您查看当前版本的源代码 ，则会看到它正在返回.el属性。 因此，该属性仍然在幕后。

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