Can't add a grid to a div in extjs

Question

If I add a button to my panel via a 'renderTo' argument (See 'b' below), it works perfectly :

//create div in javascript
var extJSTest = document.createElement('div');

//append to main
mainPanel.appendChild(extJSTest);

//'get' panel through EXT (just adds a wrapper?)
var myDiv = Ext.get(extJSTest);


var b = Ext.create('Ext.Button', {
    text: 'Click me!!!!',
    renderTo: myDiv,
    handler: function() {
        alert('You clicked the button!')
    }
});

However, if, I replace the 'b' with the following code (That is, i want to replace the button with a grid, connected up with a SimpleStore and some data)...

var myData = [
    ['Apple',29.89],
    ['Ext',83.81]
];

var ds = new Ext.data.SimpleStore({
    fields: [
        {name: 'company'},
        {name: 'price'}
    ]
});
ds.loadData(myData);

var grid = new Ext.grid.GridPanel({
    store: ds,
    columns: [
        {header: "Company", width: 120, dataIndex: 'company'},
        {header: "Price", width: 90, dataIndex: 'price'}
    ],

    renderTo: myDiv,
    height: 180,
    width: 900,
    title: 'List of Packages'
});

I get this error :

Uncaught TypeError: Cannot read property 'dom' of null

Which is found at line 28211 in ext-all-debug. Code looks like this :

if (!me.container) {

    me.container = Ext.get(me.el.dom.parentNode);
}

Anyone know what the issue is when i want to add a grid?

Also my index.html looks like this :

<script>

    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*'
    ]);


    Ext.onReady (function () {

          //application is built in here
    });


 </script>

Here's a fiddle :

https://fiddle.sencha.com/#fiddle/693

If I render to Ext.getBody() it works fine, but if i render to my own myDiv object it seems to have problems.

Is your code wrapped in Ext.onReady or in Ext.application? — Saki
The code you posted seems OK, the problem must be elsewhere. Ext version? Other console errors, warnings? Grid here renders itself to an existing div w/o problems. — Saki

Oliver Watkins Oliver Watkins · Accepted Answer · 2014-06-02T11:05:50

My solution to my question..

I am confusing renderTo with add.

I should create a panel, and use renderTo to put it somewhere on the DOM, and then later I can create a grid and then the panel can 'add' it.

Ext.onReady (function () {


    var myDiv = Ext.create('Ext.Panel',{
        renderTo:Ext.getBody(),
    })


    var myData = [
    ['Apple',29.89],
    ['Ext',83.81]
    ];

    var ds = new Ext.data.SimpleStore({
        fields: [
            {name: 'company'},
            {name: 'price'}
        ]
    });


    ds.loadData(myData);

    var grid = new Ext.grid.GridPanel({
        store: ds,
        columns: [
            {header: "Company", width: 120, dataIndex: 'company'},
            {header: "Price", width: 90, dataIndex: 'price'}
        ],

        height: 180,
        width: 900,
        title: 'List of Packages'
    });

    myDiv.add(grid);


    //document.body.appendChild(myDiv);



});

Can't add a grid to a div in extjs

1 Answers