无法将网格添加到 extjs 中的 div答案

【问题标题】：Can't add a grid to a div in extjs无法将网格添加到 extjs 中的 div
【发布时间】：2014-05-28 15:22:40
【问题描述】：

如果我通过“renderTo”参数（参见下面的“b”）向我的面板添加一个按钮，它可以完美运行：

//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!')
    }
});

但是，如果，我用以下代码替换“b”（也就是说，我想用网格替换按钮，与 SimpleStore 和一些数据相连）...

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'
});

我收到此错误：

未捕获的类型错误：无法读取 null 的属性“dom”

在 ext-all-debug 的第 28211 行找到。代码如下所示：

if (!me.container) {

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

有人知道我想添加网格时出现什么问题吗？

我的 index.html 看起来像这样：

<script>

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


    Ext.onReady (function () {

          //application is built in here
    });


 </script>

这是一个小提琴：

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

如果我渲染到 Ext.getBody() 它工作正常，但如果我渲染到我自己的 myDiv 对象，它似乎有问题。

【问题讨论】：

你的代码是包裹在Ext.onReady还是Ext.application中？
是的......................................
你贴的代码好像没问题，问题肯定出在其他地方。分机版？其他控制台错误、警告？ Grid here 将自己呈现给现有的 div 没有问题。
ExtJS 4.2。没有其他错误
我想我需要一个叫做 ext-base.js 的东西

标签： javascript extjs

【解决方案1】：

我对我的问题的解决方案..

我将 renderTo 与 add 混淆了。

我应该创建一个面板，并使用 renderTo 将它放在 DOM 上的某个位置，然后我可以创建一个网格，然后面板可以“添加”它。

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);



});

【讨论】：