Extjs_extjs でよく使われるフォームの紹介と応用

function Read3() {
2 Ext.QuickTips.init();//初期化のヒント
3 Ext.apply(Ext.form.VTypes,{
4 password:function( val,field){//val はここでのテキスト ボックスの値を指し、field はこのテキスト ボックス コンポーネントを指します。誰もがこの意味を理解する必要があります
5 if(field.confirmTo){//confirmTo はカスタム構成パラメータです。通常、別のコンポーネント
6 の ID 値を保存するために使用されます var pwd=Ext.get(field.confirmTo);//confirmTo
7 の ID 値を取得します return (val==pwd.getValue()) ;
8 }
9 return true;
var MyformPanel=new Ext.form.FormPanel({
title:'fieldset application',
renderTo:Ext.getBody()、
frame:true、
width:550、
x:400、
y:50、
ドラッグ可能:{
insertProxy: false,/ /ドラッグ時に元の位置を点線で表示しません
onDrag: function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true) ;
this.y = pel.getTop(true);//ドラッグ時のパネルの座標を取得します
var s = this.panel.getEl().shadow;
if (s){ 🎜>s.realign (this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this .panel.setPosition( this.x, this.y);// 最終位置に移動
}
},
plain:true,
floating:true,
items:[
{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'user',
title:'ユーザー情報',
collapsible:true,
autoHeight :true,
autoWidth:true,
labelSeparator:':',
labelAlign:'right',
labelWidth:70,
defaults:{width:150,allowBlank:false,xtype :'textfield'},
items:[
{
fieldLabel:'username',
emptyText:'陈杰强',
id:'user',
name:'userName ',
blankText:'ユーザー名を入力してください',
anchor:'95%'
},
{
fieldLabel:'ユーザーパスワード',
inputType:'パスワード' ,// パスワードテキストチェックボックス robio
id:'password',
name:'userpassword',
value:'0717',
blankText:'ユーザーパスワードを入力してください',
anchor :'95%'
},
{
fieldLabel:'パスワードの確認',
id:'password2',
name:'userpassword2',
inputType:'password' 、
vtype :'password'、
vtypeText:'2 回入力されたパスワードは矛盾しています'、
confirmTo:'userpassword'、
anchor:'95%'
}、
{
xtype :"datefield",
fieldLabel:"生年月日",
anchor:"95%"
},
{
fieldLabel:'私のブログ',
値:' http://www.cnblogs.com/chenjq0717'、
vtype:'url'、
vtypeText:'有効な URL ではありません'、
id1:'myblog'、
name:'myblog ',
anchor:'95%'
},
{
//アルファには文字のみを入力でき、その他 (数字、特殊記号など) は入力できません
//2.alphanum //文字と数字のみを入力でき、その他は入力できません
//3.email//メール認証、必要な形式は「langsin@gmail.com」です
// 4.url//url 形式の検証。必要な形式は http://www.langsin.com です。
fieldLabel:'email'、
vtype:'email'、
vtypeText:' 有効な電子メールではありません',
name:' email',
anchor:'95%'
},
{
xtype:"panel",
layout:"column",
fieldLabel:'gender',
isFormField:true,
items:[{
columnWidth:.5,
xtype:"radio",
boxLabel:"male",
name :"性別"
/ /inputValue
},{
columnWidth:.5,
checked:true,
xtype:"radio",
boxLabel:"女性",
name:"sex"
}]
},
{
xtype:"panel",
layout:"column",//マルチを実装するテーブルにすることもできます-columnlayout
fieldLabel:'hobby' ,
isFormField:true,//非常に重要です。そうでない場合、デフォルトではパネルに fieldLabel が表示されません。
items:[{
columnWidth:.5,//幅は 50% です
xtype: "checkbox",
boxLabel: "Football", //チェックボックスの右側に表示されるテキスト
name: ""
},{
columnWidth:.5、
xtype: "checkbox"、
boxLabel:"バスケットボール"、
name:""
}]
}、
{
xtype :'combo',
fieldLabel:'ユーザーの出身地',
name:'family',
store:<%=getfamilyData() %>,//バックグラウンド変数を呼び出します
emptyText : '出身地を選択してください'
},
{
xtype :"htmleditor",
id:"myinfo",
fieldLabel:"個人的な説明",
anchor:" 99%"
}
]
}
]
});
}