Question

我是Extjs的学习者，如何在Extjs html编辑器中加载内容

这是空白的编辑器代码

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.form.HtmlEditor', {
            width: 580,
            height: 250,
            renderTo: document.getElementById('editorId')
         });
      });
   </script>
</head>
<body>
   <div id = "editorId"></div>
</body>
</html>

我尝试了这个，但没有工作

document.getElementById("content").innerHTML ="this is the content inside";

Answer 1

所以当你谈到Ext时，你必须理解为真正的基本概念：

如果您使用过jquery，请忘记它，它与Ext有所不同。 Ext在其最低级别基本上具有以下概念。一切都是组件，div作为面板，div作为容器，div作为标题。这就是为什么当您使用xtype new Ext.Panel({...})声明配置或使用component创建新组件时。要在页面中首先添加container，您的页面需要items: []，在创建容器后，其TheSeries属性会接受您的子项，例如您想要的编辑器。

我建议你阅读文档并查看类的层次结构。

<强>文档：

Container具有Ext.Component的所有功能，但允许您在其中嵌套其他组件。应用程序由许多组件组成，通常彼此嵌套。容器允许您在其中呈现和排列子组件。大多数应用程序都有一个名为Viewport的顶级Container，占据整个屏幕。其中包括子组件，例如在邮件应用程序中，Viewport Container的两个子组件可能是消息列表和电子邮件预览窗格。

容器提供以下额外功能：

在实例化和运行时添加子组件删除子组件指定布局布局确定如何在屏幕上布置子组件。在我们的邮件应用示例中，我们使用HBox布局，以便我们可以将电子邮件列表固定到屏幕的左侧边缘，并允许预览窗格占用其余部分。有几种布局，每种布局都可以帮助您实现所需的应用程序结构。（来源：http://docs.sencha.com/extjs/6.0.1/modern/Ext.Container.html）

Answer 2

您需要存储对您创建的组件的引用，例如var myEditor = Ext.create('Ext.form.HtmlEditor',{...});或提供ID作为配置的一部分：

     Ext.create('Ext.form.HtmlEditor', {
        width: 580,
        height: 250,
        id:'myEditor',
        renderTo: document.getElementById('editorId')
     });

首先，只要您有权访问myEditor变量，就可以调用myEditor.setValue("this is the content inside");

在第二个实例中，您需要让extjs首先使用您指定的ID找到该组件：Ext.getCmp('myEditor').setValue("this is the content inside");

如果您只想在创建编辑器时设置一次内容，则只需包含值config：

     Ext.create('Ext.form.HtmlEditor', {
        width: 580,
        height: 250,
        value:'this is the content inside',
        renderTo: document.getElementById('editorId')
     });

Answer 3

这是一个Ext js组件，大部分原生的javascript代码都不起作用，但在某些情况下它会起作用。你有一个Ext js组件，你需要设置值。首先，你需要获得组件访问权限。在这一点上，我只是为您的组件添加Id并通过Ext.getCmp（）方法和设置值访问它。

 Ext.create('Ext.form.HtmlEditor', {
        width: 580,
        height: 250,
        id:'testid',
        renderTo: Ext.getBody()
     });
  Ext.getCmp('testid').setValue('some value');

注意：根据编码标准，请避免使用ID。

在Extjs中加载HtmlEditor内的内容

3 个答案: