ビューポートとExt.panelとExt.form.panel_extjsの関係について

Ext.panel は多くの要素を保存できます。最も一般的なのは Ext.form.formPanel オブジェクトです。borderlayout レイアウトも使用できます
以下は私が書いた小さな例です。一番上のコンテナはビューポートではなくタブパネルです

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

//通常の形式
var frm = new Ext .form.FormPanel( {
defaultType: 'textfield',
labelAlign: 'right',
title: 'form1-center',
labelWidth: 50,
frame: true,
width: 120 ,
height:200,
region: 'center',
closeable: true, //この属性は、
項目のクローズを制御できます: [{
fieldLabel: 'text box'
}],
buttons: [{
text: 'Button'
}]
}); 同志諸君、リージョンとはリージョンを意味することに注意してください。 borderlayout レイアウト、中央位置
// 以下にグリッドを作成します
// グリッドの開始
var cm = new Ext.grid.ColumnModel([
{ header: 'number', dataIndex: ' id' },
{ header: 'name', dataIndex: 'name' },
{ header: 'description', dataIndex: 'descn' }
]);
[' 1', 'name1', 'descn1'],
['2', 'name2', 'descn2'],
['3', 'name3', 'descn3'] ,
[ '4', 'name4', 'descn4'],
['5', 'name5', 'descn5']
];
var ds = 新しい Ext.data。 Store({
プロキシ: new Ext.data.MemoryProxy(data),
リーダー: new Ext.data.ArrayReader({}, [
{ name: 'id' },
{ name : '名前' } ,
{ 名前: 'descn' }
])
});
ds.load()
var Grid = new Ext.grid.GridPanel({
ds: ds、
cm: cm、
タイトル: '中心-北'、
地域: '北'、
幅:200、
高さ:200
});
// グリッドの終点
// 同志、リージョンは北の位置にあるボーダーレイアウト レイアウトを意味することに注意してください
//Ext.panel には他のパネルを含めることができます
var fullForm = new Ext. Panel({
title: '私はとても上手です',
closeable: true,
border: true,
layout: 'border',//彼のレイアウトに注意してください
items : [グリッド、フレーム]
});