CODEWITHSUNDEEP
javascripthtmlformsextjs
Edgar
Edgar

Reputation: 1120

Put ExtJS form on javascript method call

I'm totaly net to javascript and ExtJS. So maybe someone can help me.

I want to display ExtJS made form on Web page when I call javascript method.

The code is: .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 = {});

where is my mistake? (do not say, that in my genetic code :D)

Upvotes: 0

Views: 474

Answers (1)

mindparse
mindparse

Reputation: 7215

First mistake is your use of Ext.onReady as this is an event which gets fired when the framework has finished loading.

Trying to use it within a function call like you have makes no sense, so just remove this altogether and just keep your form code.

Alternatively, you can still use Ext.onReady but it should be used in the main script block of your html file, that and your form code should be moved there.

I have got your form to display using this approach, you can see this working here

Fiddle above

Upvotes: 1

Related Questions