将 ExtJS 表单放在 javascript 方法调用上

Question

我完全不了解 javascript 和 ExtJS。所以也许有人可以帮助我。

我想在调用 javascript 方法时在网页上显示 ExtJS 制作的表单。

代码是： .html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Car Wiki</title>
    <link rel="stylesheet" type="text/css" href="extJSLib\extjs-4.1.1\resources\css\ext-all.css">
    <script type="text/javascript" src = "extJSLib\extjs-4.1.1\ext-all-dev.js"></script>

    <link rel ="stylesheet" type="text/css" href="mainPageStyle.css">

    <script type = "text/javascript" src="mainPageScript.js"></script>
</head>
<body>
<div class="mainForm" >

    <div id="mainPanel">
        <script>mainModule.testMethos();</script>
    </div>


</div>
</body>
</html>

mainPageScript.js

    (function(exports){

    exports.testMethos = function()
    {
        var formPanel = Ext.create('Ext.form.Panel',{
            title: 'Search Form',
            width:300,
            height:200,
            layout: 'anchor',

            defaults:
            {
                anchor:'80%'
            },


            renterTo: document.body,
            items:[
                {
                    xtype: 'textfield',
                    fieldLabel: 'Car Name',
                    name: 'carName',
                    labelAlign: 'top',
                    cls: 'field-margin',
                    flex:1
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Car Model',
                    name:'carModel',
                    labelAlign:'top',
                    cls:'field-margin',
                    flex: 1
                }
            ]
        });
    };

} )(this.mainModule = {});

我的错误在哪里？（不要说，在我的遗传密码中：D）

Answer 1

第一个错误是您使用了 Ext.onReady，因为这是一个在框架完成加载时触发的事件。

像您一样尝试在函数调用中使用它是没有意义的，所以只需完全删除它并保留您的表单代码。

或者，您仍然可以使用 Ext.onReady，但它应该在 html 文件的主脚本块中使用，并且您的表单代码应该移到那里。

我已经使用这种方法显示了您的表单，您可以看到它有效 here

Fiddle above

将 ExtJS 表单放在 javascript 方法调用上

Put ExtJS form on javascript method call

javascript

html

forms

extjs