CODEWITHSUNDEEP
javascriptformsextjs
Dónal
Dónal

Reputation: 187399

Create simple ExtJS form

I'm trying to create a very simple modal form with Ext JS 2.3.0. The code I'm using is:

<html>
<head>
<link rel="stylesheet" href="ext-all.css"/>
<link rel="stylesheet" href="dash.css" />

<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug-TPF-212.js"></script>

<script type="text/javascript">
Ext.onReady(function () {

    var entitySearchForm = new Ext.form.FormPanel({
        title: "Basic Form",
        width: 425,
        frame: true,
        items: [
        new Ext.form.TextField({
            hideLabel: true,
            width: 275,
            allowBlank: false
        })],
        buttons: [{
            text: "Save"
        }]
    });

    var entitySearchWindow = new Ext.Window({
        layout: 'anchor',
        closable: true,
        resizable: false,
        draggable: false,
        modal: true,
        items: [entitySearchForm]
    });

    entitySearchWindow.show();
});
</script>

</head>
<body></body>
</html>

This causes the following form to appear:

enter image description here

There are a couple of problems with this:

I realise I'm using quite an old version of Ext JS, but unfortunately upgrading is not an option right now.

Upvotes: 2

Views: 8787

Answers (1)

John Kinzie
John Kinzie

Reputation: 361

Try running without dash.css. In my tests with just ext-all.css, the stripes are gone, the close button appears, and the save button looks like a button.

As for the location of the save button, the FormPanel uses the form layout by default. By using table layout instead, and making the save button an item the button shows up next to the textfield:

var entitySearchForm = new Ext.form.FormPanel({

    title: "Basic Form",
    layout:'table',
    width: 425,
    frame: true,
    layoutConfig: {columns: 3},
    items: [
    new Ext.form.TextField({
        hideLabel: true,
        width: 275,
        colspan: 2,
        allowBlank: false
    }), {
        xtype: 'button',
        text: 'Save',
        handler: function() {/* submit code */}
    }]
});`

Upvotes: 2

Related Questions