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方法调用上

1 个答案: