ExtJs 表单渲染根本没有发生答案

【问题标题】：ExtJs Form Rendering not happening at allExtJs 表单渲染根本没有发生
【发布时间】：2013-03-06 12:44:42
【问题描述】：

我正在尝试使用 ExtJS 创建一个表单。文件放置正确，但没有进行渲染：

index.html

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs/ext-debug.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <div id="aa"></div>
</body>
</html>

app.js

Ext.create('Ext.form.Panel', {
    renderTo: document.getElementById('aa'),
    title: 'User Form',
    height: 130,
    width: 280,
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [
        {
            fieldLabel: 'First Name',
            name: 'firstName'
        },
        {
            fieldLabel: 'Last Name',
            name: 'lastName'
        },
        {
            xtype: 'datefield',
            fieldLabel: 'Date of Birth',
            name: 'birthDate'
        }
    ]
});

有人知道我错过了什么吗？

谢谢

【问题讨论】：

标签： html extjs4.1

【解决方案1】：

在您的 app.js 中，尝试在触发 onReady 事件时运行该代码，例如

Ext.onReady(function(){
    Ext.create('Ext.form.Panel', {
        renderTo: document.getElementById('aa'),
        title: 'User Form',
        height: 130,
        width: 280,
        bodyPadding: 10,
        defaultType: 'textfield',
        items: [
            {
                fieldLabel: 'First Name',
                name: 'firstName'
            },
            {
                fieldLabel: 'Last Name',
                name: 'lastName'
            },
            {
                xtype: 'datefield',
                fieldLabel: 'Date of Birth',
                name: 'birthDate'
            }
        ]
    });
});

【讨论】：

非常感谢格兰特，我想通了

【解决方案2】：

只需使用Ext.onReady():

添加一个在 DOM 准备好时调用的函数，所有必需的类已加载。

如果 DOM 准备好并且所有的类都已加载，则传递的函数是立即执行。

工作示例：http://jsfiddle.net/Ld5e6/

【讨论】：

非常感谢 CD 。明白了，没有触发 onReady()