Question

我正在尝试使用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'
        }
    ]
});

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

由于

Answer 1

只需使用Ext.onReady()：

添加一个在DOM准备就绪时调用的函数，以及所有必需的函数   班级已被加载。

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

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

Answer 2

在你的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'
            }
        ]
    });
});

ExtJs表格渲染根本没有发生

2 个答案: