0

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

何が欠けているのか誰にもわかりませんか？

ありがとう

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 に答える