簡単な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ピクセルの幅を持ち、テキストボックスの右側に（その下にではなく）表示します。
テキストフィールドの両側に1つの短い狭い縞。どうすればこれらを取り除くことができますか？
フォームは、私は私がのExt JSのかなり古いバージョンを使用している実感が、残念ながらアップグレードは今オプションではありませんclosable: true

を指定していても、閉じるボタンを持っていません。

出典

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'にcellpaddingやその他のプロパティを指定できるように見える' tableAttrs'というプロパティがあります。また、セル固有のCSSクラスを 'cellCls'で指定することもできます。参照：http://docs.sencha.com/ext-js/3-4/#!/api/Ext.layout.TableLayout –

ありがとう、私はそれらをチェックします –

簡単なExtJSフォームを作成する

答えて

関連する問題