ExtJS 2.0 実践的で簡潔なチュートリアルのレイアウト概要_extjs

ExtJS のレイアウト基本クラスは Ext.layout.ContainerLayout であり、他のレイアウトはこのクラスを継承します。 ExtJS のコンテナ コンポーネントには、レイアウトとlayoutConfig 構成プロパティが含まれます。これらの 2 つのプロパティは、コンテナで使用されるレイアウトとレイアウトの詳細な構成情報を指定するために使用されます。コンテナ コンポーネントのレイアウトが指定されていない場合は、ContainerLayout が使用されます。このレイアウトは、単純に要素をコンテナーに配置するだけです。一部のレイアウトでは、layoutConfig 構成が必要ですが、一部のレイアウトは、layoutConfig 構成を必要としません。コードを見てください:

コードをコピー コードは次のとおりです:

Ext.onReady( function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items: [{columnWidth:. 5,
title:"パネル 1"},
{columnWidth:.5,
title:"パネル 2"}]
});

上記のコードでは、パネルを作成します。 パネルは、パネルが列レイアウトを使用することを指定するためにレイアウトを使用します。このパネルの子要素は 2 つのパネルであり、どちらのパネルにも列レイアウトに関連する構成パラメータ属性 columnWidth が含まれており、その値は両方とも 0.5 です。つまり、各パネルは幅の半分を占めます。上記のプログラムを実行すると、次のような結果が生成されます。

Ext の一部のコンテナ コンポーネントは、カード レイアウトを使用する TabPanel、フォーム レイアウトを使用する FormPanel、列レイアウトを使用する GridPanel のテーブルなど、使用するレイアウトを指定しています。 、など、これらのコンポーネントを使用する場合、これらのコンテナ コンポーネントに別のレイアウトを指定することはできません。
ExtJS2.0 には、border、column、fit、form、card、tabel などのレイアウトが合計 10 個含まれています。以下では、これらの各レイアウトについて簡単に説明します。