Extjs 学習ノート 7 Layout_extjs

Extjs レイアウト ブラウザ 。

Extjs3.1.0 バージョンは 17 種類をサポートしています。いくつかの重要なものを選択して簡単に説明します。写真はもう掲載しません。パネルのレイアウトの設定方法も同様で、パネルのレイアウト構成項目を設定します。
1. AbsoluteLayout
は、Panel の内部コンポーネントの位置を決定してレイアウトできます。 x、yで指定します。

使用例:

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

new Ext.Panel({
layout: 'absolute',
title: 'AbsuluteLayout',
renderTo: document.body,
frame: true,
defaultType: 'textfield',
幅 : 400、
高さ: 250、
項目: [{
x: 0、y: 5、
xtype: 'label'、
text: '送信先:'
},
{
x: 60, y: 0,
name: 'to'
}, {
x: 0, y: 35,
xtype: 'ラベル' ,
テキスト: '件名:'
}, {
x: 60, y: 30,
名前: '件名'
},
{
x: 0 、y: 60、
xtype: 'textarea'、
name: 'msg'
}]
});

2. AccordionLayout
Accordion は、名前が示すように、アコーディオンのようなもので、一部のコンポーネントが開き、一部が閉じられます。このエフェクトはサイドバーとして使用すると便利です。

使用例:

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

new Ext.Panel({
title: 'Accordion Layout',
layout: 'accordion',
renderTo: document.body,
defaults: { // 含まれる各パネルに適用されます
bodyStyle: 'padding:15px'
},
layoutConfig: {
// レイアウト固有の設定はここにあります

titleCollapse: true,
animate: true,
activeOnTop : false
},
items: [{
title: 'パネル 1',
html: '

パネルの内容!

', {
title : 'パネル 2',
html: '

パネルの内容!

'
}, {
title: 'パネル 3',
html: ' '
}]
});
3. AnchorLayout
この種のレイアウトは、特に GridView などのコントロールを含むページをレイアウトする場合に非常に便利です。AnchorLayout は実際には Winform フォームのデフォルトのレイアウト メソッドに似ていますが、特定のコンポーネントとページ境界線 (右境界線と下境界線) の間の距離 (絶対ピクセルまたは相対比率) のみを修正します。 アンカー属性の設定については、アンカー属性設定 API ドキュメントで非常にわかりやすく説明されているので、そのまま抜粋します。

anchor: String

この設定オプションは、アンカー属性の子項目に適用されます。このレイアウトによって管理されるコンテナ (つまり、layout:'anchor' で構成)。

この値は、AnchorLayout に追加される項目がアンカー固有の構成を受け入れる方法をレイアウトに指示します。水平アンカー値と垂直アンカー値 (たとえば、「100% 50%」) の 2 つの値を含む文字列であるアンカーのプロパティ。次のタイプのアンカー値がサポートされます:

パーセント。 : パーセンテージで表される 1 ～ 100 の任意の値。
最初のアンカーはコンテナ内でアイテムが占めるパーセンテージの幅で、2 番目はパーセンテージの高さです。例:

。 // 2 つの値を指定
anchor: '100% 50%' // コンテナの完全な幅と
// コンテナの 1/2 の高さ
// 1 つの値を指定
anchor: ' 100%' // 幅の値; 高さはデフォルトで autoOffsets : 任意の正または負の整数値
これは、最初のアンカーがコンテナの右端からのオフセットである生の調整です。 2 番目は下端からのオフセットです。例:

// 2 つの値を指定
anchor: '-50 -100' // アイテムをコンテナーの幅全体にレンダリングします
// マイナス 50 ピクセルと
// 完全な高さから 100 ピクセルを差し引いたものです。
// 1 つの値が指定されています
anchor: '-50' // アンカー値は右のオフセット値とみなされます
// 下部のオフセットはデフォルトで 0Sides になります。有効な値は 'right' (または 'r') と 'bottom' (または 'b') です。
コンテナには固定サイズまたはアンカーサイズ設定が必要です。

Mixed :
アンカー値を必要に応じて混合することもできます。たとえば、コンテナの右端からの幅のオフセットをレンダリングします。 50 ピクセルとコンテナの高さの 75% が次を使用します:

anchor: '-50 75%' ただし、アンカーの最初の属性である Offset を正の数に設定しても、効果がないようです。ドキュメントには「オフセット: 任意の正または負の整数値」と記載されています。

使用例:

コードをコピーします コードは次のとおりです。

new Ext.Panel({
layout: 'anchor',
title:'anchor',
renderTo: document.body,
items: [ {
title: 'アイテム 1',
html: ' コンテンツ 1',
幅: 800,
アンカー: '右 20%'
}, {
タイトル: 'アイテム 2',
html: 'コンテンツ 2',
width: 300,
アンカー: '50% 30%'
}, {
title: 'アイテム 3',
html: 'コンテンツ 3',
width: 600,
anchor:'-100 50%'
}]
});

4 BorderLayout
BorderLayout は、ページ上の領域を指定して領域をレイアウトします。少なくとも 1 つの中央領域が必要で、西、南、東、北の領域を補助ページとして設定できます。通常、中央が主な機能領域で、両側と下部はツールバーとして使用できます。

コードをコピーします コードは次のとおりです。

var myBorderPanel = new Ext.Panel({
renderTo: document.body,
width: 700,
height: 500,
title: 'ボーダーレイアウト',
layout: 'border',
items: [{
title : '南地域はサイズ変更可能',
region: 'south', // 地域の位置
height: 100,
split: true, // サイズ変更を有効にする
minSize: 75, // デフォルトは 50
maxSize: 150,
margins: '0 5 5 5'
}, {
// xtype: 'panel' デフォルトで暗黙的
title: 'West Regional折りたたみ可能です' ,
region: 'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // 折りたたみ可能にします
cmargins: '5 5 0 5 ', // 折りたたまれたときに上のマージンを調整します
id: 'west-region-container',
layout: 'fit',
unstyled: true
}, {
title : 'Center Region',
region: 'center', // 中央領域は必須ですが、幅/高さは指定されていません
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
});
5. ColumnLayout
ColumnLayout はパネルの幅を指定できます。Width はピクセルを指定し、columnWidth は 0 ～ 1 の数値である必要があります。両方を使用することもできます。両方を使用した場合、パーセンテージはページ全体の幅から固定幅列の残りの幅を引いたものになります。

使用例:

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

var p = new Ext.Panel({
title: '列レイアウト - 混合',
layout: 'column',
renderTo: document.body,
items: [{
title : '列 1',
columnWidth: .3,
html:'

Hello World

'
}, {
title: '列 2',
html:'

Hello

',
columnWidth: .6
}, {
title: '列 3',
columnWidth: .1,
html: '< div>Hello

Another Line

'
}]
}); この使用法は API ドキュメントと同じですと公式の例を参照してください。ただし、これらの列の幅はブラウザのサイズが変わっても変更できません。新しいブラウザの幅に適応するために毎回更新する必要があります。ただし、公式 Web サイトの例では、ブラウザをドラッグすると内部パネルのサイズが実際に変更されます。とても奇妙だ。知っている人がいたら、教えてください。

レイアウトの使い方も同様なのでこれ以上は書きません。重要なのは、実際のアプリケーションで柔軟に選択することです。