0

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

索引.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>

应用程序.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'
        }
    ]
});

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

谢谢

4

2 回答 2

1

只需使用Ext.onReady()：

添加一个要在 DOM 准备好并且所有需要的类都已加载时调用的函数。

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

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

于 2013-03-06T13:31:40.063 回答
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'
            }
        ]
    });
});
于 2013-03-06T13:32:09.170 回答