Question

我正在尝试使用Ext JS 2.3.0创建一个非常简单的模态形式。我正在使用的代码是：

<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>

这会导致出现以下表单：

enter image description here

这有几个问题：

保存按钮看起来不像一个按钮（尽管它的行为类似于按钮）。我希望保存按钮看起来像一个按钮，宽度约为100px，显示在文本框的右侧（而不是在其下方）
有两条短窄条纹，一条在文本字段的两边。我怎么能摆脱这些？
即使我指定了closable: true

我意识到我使用的是相当旧版本的Ext JS，但遗憾的是升级现在不是一种选择。

Answer 1

尝试在没有dash.css的情况下运行。在我的ext-all.css测试中，条纹消失，关闭按钮出现，保存按钮看起来像一个按钮。

对于保存按钮的位置，FormPanel默认使用表单布局。通过使用表格布局，并将保存按钮设为项目，按钮显示在文本字段旁边：

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 */}
    }]
});`

创建简单的ExtJS表单

1 个答案: