Trying to add ExtJS component to javascript code

Question

We are adding ExtJS to legacy code, which means we don't have the luxury of making it a pure ExtJS application.

I am having difficulty understanding the concepts of ExtJS Components and Elements.

Inbetween the EXT-JS comments here, I want to implements lots of GUI goodness!

Ext.onReady (function () {


    var div = document.createElement('div');



    //////////EXT-JS//////////////////////

    var myDiv = Ext.create('Ext.Panel',{

    })


    //add lots and lots of cool widgets here to myDiv!!!!!!!


    ///////////EXT-JS/////////////////////////////


    div.appendChild(myDiv); //:(

    document.body.appendChild(div);


});

The only precondition is that it follows the javascript code before and after.

The line div.appendChild(myDiv) does not appear to work because it is expecting a javascript node, and myDiv is a fancy ExtJS object (a component rather than an element?).

The error at this line i get is :

Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

I tried myDiv.render(div) and that also doesn't work (and it also breaks the legacy pattern).

fiddle :

https://fiddle.sencha.com/#fiddle/69d

Answer 1

Ext.create('Ext.Panel', ...) is not returning a DOM node, it's returning an instance of Ext.Panel.

The native DOM API obviously does not know how to handle an ExtJS object.

You can however use the renderTo configuration option when instantiating a component in order the specify it's container.

Note: You should not be using renderTo to nest ExtJS components.

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. - http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.AbstractComponent-cfg-renderTo

var yourPanel = Ext.create('Ext.Panel', {
    title: 'My Panel',
    width: 400,
    height: 400,
    renderTo: div
});