创建简单的ExtJS的形式

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

<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

有几个问题与此：

保存按钮看起来不像一个按钮（尽管它的行为像一个）。我想保存按钮，看起来像一个按钮，有大约100像素的宽度和出现在文本框（中下它代替）
有两个短窄条纹，一个在文本字段的任何一方的权利。我怎样才能摆脱这些？
形式没有关闭按钮，即使我指定closable: true

我意识到我使用的Ext JS的一个很老的版本，但遗憾的是升级不是现在的选项。

来源

2011-11-14 Dónal

2.3.0？你有我的同情心。 –

尝试不使用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 */} 
    }] 
});`

来源

2011-11-15 05:19:21

非常感谢，表格布局运行得更好。你知道是否可以在文本字段和按钮之间留出一个小空间，以便它们不会互相挤压？ –

我不知道它是否可以在2.3，但在3.4'layoutConfig'表格布局有一个属性，'tableAttrs'，看起来像它允许指定的cellpadding等性能。另外，可以在'cellCls'中指定一个特定于单元格的CSS类。请参阅：http://docs.sencha.com/ext-js/3-4/#!/api/Ext.layout.TableLayout –

谢谢，我会检查那些 –

创建简单的ExtJS的形式

回答

相关问题