在Extjs中加载HTMLEDITOR内部的内容

我是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";

因此，当涉及到ext时，您必须理解为真正的基本概念：

如果您与jQuery合作，请忘记它，在Ext方面是不同的。EXT基本上具有以下概念的最低水平。一切都是一个组件，一个div作为面板，div作为容器，div作为标头。这就是为什么当您用XType {xtype:'panel';... }声明配置或使用new Ext.Panel({...})创建新组件时。为了让您在页面中添加component，您的页面需要container，在您创建一个容器后，其items: []属性接受您的儿童项目，例如您想要的编辑器。

我建议您从文档中阅读并查看课程的层次结构。

文档：

一个容器具有Ext.com的所有功能，但可以让您在其中嵌套其他组件。应用程序由许多组件组成，通常嵌套在彼此之间。容器允许您在其中渲染并安排孩子组件。大多数应用程序都有一个称为视口的顶级容器，该容器占用整个屏幕。其中的是儿童组件，例如，在邮件应用程序中，视口容器的两个孩子可能是消息列表和电子邮件预览窗格。

容器给出以下额外功能：

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

您要么需要存储对您创建的组件的引用，例如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");

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

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

这是一个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。

相关内容

最新更新

热门标签：