Extフォームレイアウト例 code_extjs

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

Ext.onReady(function(){
Ext .QuickTips. init();
//最初の文の目的は、必要なコンポーネントのプロンプト情報を提供することです。
Ext.form .Field.prototype.msgTarget. = 'under';
//2 番目の文の目的は、コントロールのエラー メッセージの表示位置を設定することです。
var tdate = new Ext. form.DateField({
fieldLabel: 'Date',
emptyText: '日付を選択してください',
format: 'Y-m-d',
disabledDays: [0, 7]
});
var txt = new Ext .form.TextField({
fieldLabel: '名前を入力してください',
allowBlank: false,
emptyText: 'Empty',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'//エラー メッセージ用に 10 個のスペースを残します。
}); var htmlEdt=new Ext.form.HtmlEditor({
fieldLabel:'オンライン エディタ',
enableAlignments:true,
enableColors:true,
enableFont:true,
enableFontSize:true,
enableFormat:true,
enableLinks :true,
enableLists:true,
enableSourceEdit:true
}); : '名前を入力してください'、
allowBlank: false、
emptyText: 'empty'、
maxLength: 50、
minLength: 10、
bodyStyle: 'padding-left:5px' ,
anchor: '90%'
//エラー プロンプト用に 10 個のスペースを残します
});
var frm1 = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 100,// タイトルの幅の変更に注意してください
title: 'form1',
frame: true,
width: 700,
url: 'sender/data .aspx',
items: [{
layout: 'column',//正しい点はここです。これは、次の項目が列「Column」によって並べ替えられることを意味します
items: [{
columnWidth: .5,
layout: 'form' , //最初の列のコンテンツはフォームに従って上から下に並べ替えられます
items: [txt2]
},
{
columnWidth: .5,
layout: 'form' , //2 列目のコンテンツはフォームに従って上から下に並べ替えられます
items: [txt, tdate]
}]
}, htmlEdt]
});
frm1.render("frm");