Question

如果我通过' 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'
});

我收到此错误：

未捕获的TypeError：无法读取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对象，它似乎有问题。

Answer 1

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

我将 renderTo 与添加混淆。

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

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



});

无法在extjs中为div添加网格

1 个答案: