Ext JS renderTo div

Question

我无法在基本div中显示Ext JS组件。我知道它应该通过renderTo发生多少。但是当我尝试在Ext JS中提供div的id时，它不会发生。

这是链接 https://jsfiddle.net/m10v973y/

<div id="bla"></div>

Ext.define('KitchenSink.view.form.FieldTypes', {
    extend: 'Ext.form.Panel',
    xtype: 'form-fieldtypes',
    renderTo:"bla",

    frame: true,
    title: 'Form Fields',
    width: 400,
    bodyPadding: 10,
    layout: 'form',

    items: [{
        xtype: 'textfield',
        name: 'textfield1',
        fieldLabel: 'Text field',
        value: 'Text field value'
    }, {
        xtype: 'hiddenfield',
        name: 'hidden1',
        value: 'Hidden field value'
    },{
        xtype: 'textfield',
        name: 'password1',
        inputType: 'password',
        fieldLabel: 'Password field'
    }, {
        xtype: 'filefield',
        name: 'file1',
        fieldLabel: 'File upload'
    }, {
        xtype: 'textareafield',
        name: 'textarea1',
        fieldLabel: 'TextArea',
        value: 'Textarea value'
    }, {
        xtype: 'displayfield',
        name: 'displayfield1',
        fieldLabel: 'Display field',
        value: 'Display field <span style="color:green;">value</span>'
    }, {
        xtype: 'numberfield',
        name: 'numberfield1',
        fieldLabel: 'Number field',
        value: 5,
        minValue: 0,
        maxValue: 50
    }, {
        xtype: 'checkboxfield',
        name: 'checkbox1',
        fieldLabel: 'Checkbox',
        boxLabel: 'box label'
    }, {
        xtype: 'radiofield',
        name: 'radio1',
        value: 'radiovalue1',
        fieldLabel: 'Radio buttons',
        boxLabel: 'radio 1'
    }, {
        xtype: 'radiofield',
        name: 'radio1',
        value: 'radiovalue2',
        fieldLabel: '',
        labelSeparator: '',
        hideEmptyLabel: false,
        boxLabel: 'radio 2'
    }, {
        xtype: 'datefield',
        name: 'date1',
        fieldLabel: 'Date Field'
    }, {
        xtype: 'timefield',
        name: 'time1',
        fieldLabel: 'Time Field',
        minValue: '1:30 AM',
        maxValue: '9:15 PM'
    }]
});

Answer 1

您定义了一个类但从未创建过实例。所以你需要添加

Ext.create('form-fieldtypes', {
        renderTo: "bla"
    });

同样改变：

xtype: 'form-fieldtypes',

到

alias: 'form-fieldtypes',

更新了您的fiddle

Answer 2

对我有用的是将容器包装在：

中

Ext.onReady(function() {"your container goes here" });

一旦Ext JS准备好渲染Ext JS元素，就会调用

Ext.onReady()方法。

查看here了解详情。

我还必须从容器中删除width和height值。我无法使用这些声明渲染到div。