Question

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

我一直在查看代码并确切地确定它在做什么，即：

Ext.getCmp('status')

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

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

这些类/ div ids是代码还是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

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

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

组件的当前版本文档未列出属性el，但是如果您返回id，则会找到它。它返回version 3.4的实例，它是表示组件的顶级DOM元素的包装器。目前支持的方法是调用Ext.dom.Element。但是如果你查看当前版本的getEl，你会发现它正在返回.el属性。所以这个属性仍然在幕后。

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

了解ExtJS框架语法

2 个答案: