CODEWITHSUNDEEP
javascripthtmlextjs
KishanCS
KishanCS

Reputation: 1377

Load content inside HtmlEditor in Extjs

I am a learner of Extjs , How to load content inside Extjs html editor

This is the blank editor code 

<!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>

I tried this but don't work

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

Upvotes: 0

Views: 1352

Answers (3)

Bogdan M.
Bogdan M.

Reputation: 2181

So what you must understand as really basic concept when it comes to Ext:

if you have worked with jquery, forget it, it is different when it comes to Ext. Ext has basically the following concepts at its lowest levels. Everything is a component, a div as a panel, div as a container, a div as a header. That is why when you declare a config with xtype {xtype:'panel';... } or create a new component with new Ext.Panel({...}). For you to add a component in page first your page needs a container, after you have created a container, its items: [] property accepts you children items, for instance the editor you want.

I recommand you to read from docs and check out the hierarchy of classes.

Docs:

A Container has all of the abilities of Ext.Component, but lets you nest other Components inside it. Applications are made up of lots of components, usually nested inside one another. Containers allow you to render and arrange child Components inside them. Most apps have a single top-level Container called a Viewport, which takes up the entire screen. Inside of this are child components, for example in a mail app the Viewport Container's two children might be a message List and an email preview pane.

Containers give the following extra functionality:

Adding child Components at instantiation and run time Removing child Components Specifying a Layout Layouts determine how the child Components should be laid out on the screen. In our mail app example we'd use an HBox layout so that we can pin the email list to the left hand edge of the screen and allow the preview pane to occupy the rest. There are several layouts, each of which help you achieve your desired application structure. (Source: http://docs.sencha.com/extjs/6.0.1/modern/Ext.Container.html)

Upvotes: 1

Surya Prakash Tumma
Surya Prakash Tumma

Reputation: 2193

This is a Ext js component mostly native javascript code won't work, But in some cases it will work. You have a Ext js component and you need to set value, To do this first you need to get component access. At this point I am just putting Id for your component and accessing it via Ext.getCmp() method and setting value.

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

Note: As per coding standards avoid using ID.

Upvotes: 0

Theo
Theo

Reputation: 1633

You either need to store a reference to the component you created e.g. var myEditor = Ext.create('Ext.form.HtmlEditor',{...}); or provide an id as part of your config:

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

In the first instance as long as you have access to the myEditor variable you can just call myEditor.setValue("this is the content inside");

In the second instance you need to ask extjs to find the component first using the id you specified: Ext.getCmp('myEditor').setValue("this is the content inside");

If you only want to set the content once when you create the editor you could just include a value config:

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

Upvotes: 0

Related Questions