Ext JS 4- HBOX、VBOXなどを使用してフォームでフィールドをレイアウトする
質問
ウィンドウ(MVCスタイルアプリ)内にシンプルなext JS 4フォームがあります。以下の例は、4つのフィールドを示しています。この例は簡素化されていますが、今ではこれらのフィールドを取り出して、HboxとVbox(およびおそらく他のもの)を使用してレイアウトする必要があります。
たとえば、最初の2つのフィールドを使用して、フォームの上部にHboxを入れて、フォームの上部に水平に表示し、残りのフィールドを取得してその下のVボックスに入れます。 hboxそうなので、垂直に表示しますか?
(私の実際のフォームにはより多くのフィールドがあり、他のさまざまなHbox/Vboxがありますが、始めたいだけです):
Ext.define('ESDB.view.encounter.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.encounteredit',
title : 'Edit Encounter',
layout: 'fit',
width: 700,
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'ID'
},
{
xtype: 'displayfield',
name: 'cid',
fieldLabel: 'cid#'
},
{
xtype: 'displayfield',
name: 'addedDate',
fieldLabel: 'Added'
},
{
xtype: 'displayfield',
name: 'clientID',
fieldLabel: 'Client#'
}
}
]
}
私はレイアウトのさまざまな例を見ました Senchaページ , Sencha Docs, 、 そして最後に もう1つ - この最後のものには近くに見えるものがあります - フォームツリー、2つの列にフィールドセット、それはアイテム[]とそこにいくつかのレイアウトコードを含むフォームを表示し、私はそれを部分的に機能させることができましたが、そうではありませんでしたそれをHBOX/VBOXスタイルのレイアウトに変換できます。 Hboxに設定すると、HBOXに高さがないため、フィールドが表示されません。
解決
例があります:
Ext.define('ESDB.view.encounter.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.encounteredit',
title : 'Edit Encounter',
layout: 'fit',
width: 700,
autoShow: true,
items: [{
xtype: 'form',
items: [
{
xtype: 'panel',
border: false,
layout: 'hbox',
items: [
{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'ID',
flex: 0.5
},
{
xtype: 'displayfield',
name: 'cid',
fieldLabel: 'cid#',
flex: 0.5
}
]
},
{
xtype: 'displayfield',
name: 'addedDate',
fieldLabel: 'Added'
},
{
xtype: 'displayfield',
name: 'clientID',
fieldLabel: 'Client#'
}
]
}]
});
アップからダウンまでのブロックを表示したい場合は、レイアウトを変更する必要はありません。最初のディスプレイフィールドは2つの最初のレイアウトを使用してパネルにラップしました(最初の行のみを分割する必要があるため)。
他のヒント
1つのパネルに2つのレイアウトを混ぜることはできません。そのため、さまざまなルールに従ってサブパネルを使用してフィールドをレイアウトする必要があります。これらのサブパネルは、フォームレイアウトを備えた通常のパネルだけでなく、フォームパネルをフォームパネルにする必要はありません(したがって、フィールドラベルが取得されます)。フォームフィールドの列のようなレイアウトを実現するために、私は日常的に同様のことを行いました(これはextjsであまりサポートされていません):トップフォームパネルにはVboxレイアウトがあり、Hboxレイアウトとサブパネルを備えたサブパネルがありました。フィールドを含むフォームレイアウトを備えたサブパネル(またはフィールドセット)。列のレイアウトも場合によっては役立つ場合があります。
PS最後に言及した例(フィールドセット付き2列)は、実際には、フォームレイアウトを備えた2つのフィールドセット(サブパネル)を含む列レイアウトを備えたフォームパネルです。そのため、上記の説明と同様に構成されています。