Extjs 에서 자주 사용 되 는 폼 소개 및 응용

16079 단어 Extjs상용 양식
목표:폼 패 널 이 폼 패 널 에 있 는 xtype 의 유형 을 알 아 보 는 응용 프로그램 을 만 드 는 방법 을 알 고 있 습 니 다.폼 패 널 이 어떻게 검증 되 고 바 인 딩 되 는 지 알 고 있 습 니 다.수치 종합 응용 폼 패 널(회전)내용 을 알 고 있 습 니 다.먼저,FormPanel 도 패 널 구성 요 소 를 계승 하 는 것 을 이해 해 야 합 니 다.그래서 패 널 의 속성 을 가지 고 폼 패 널 을 만 드 는 것 은 간단 합 니 다.var MyformPanel=new Ext.form.formpanel();폼 패 널 은 패 널 과 마찬가지 로 하나의 용기 로 만 나타 납 니 다.items 를 사용 하여 각 컨트롤 요 소 를 추가 하여 폼 패 널 을 풍부하게 해 야 합 니 다.defaults:{}.이 속성 은 items 에서 각 구성 요소 항목 의 공동 속성 을 추출 하여 xtype:폼 패 널 에서 매우 유용 합 니 다.매번 new 로 구성 요 소 를 만 들 필요 가 없습니다.구성 요소 의 종 류 를 정의 합 니 다.동시에 구성 요 소 를 불 러 온 후에 렌 더 링 합 니 다.
 
form Ext.FormPanel 
checkbox Ext.form.Checkbox 
combo Ext.form.ComboBox 
datefield Ext.form.DateField 
field Ext.form.Field 
fieldset Ext.form.FieldSet 
hidden Ext.form.Hidden 
htmleditor Ext.form.HtmlEditor 
label Ext.form.Label 
numberfield Ext.form.NumberField 
radio Ext.form.Radio 
textarea Ext.form.TextArea 
textfield Ext.form.TextField 
timefield Ext.form.TimeField 
trigger Ext.form.TriggerField
폼 검증 에 있어 Extjs 는 매우 강력 한 지원 을 제공 합 니 다.뒤의 인 스 턴 스 에서 인 스 턴 스 분석 설명 을 발견 할 수 있 습 니 다.첫째,폼 패 널 만 들 기
 
function Read2() { 
Ext.QuickTips.init(); 
var MyForm=new Ext.form.FormPanel({ 
title:'    ', 
width:300, 
x:300, 
y:50, 
floating:true, 
tools:[{id:'close'}], 
frame:true, 
bodyStyle:'padding:10px 0px 1px 1px', 
labelSeparator:':', 
labelAlign:'right', 
renderTo:Ext.getBody(),//         'id1' 
defaults:{xtype:'textfield',width:150,allowBlank:false,msgTarget:'side'},//       
items:[ 
{ 
fieldLabel:'    ', 
name:'username', 
id:'user', 
emptyText:'      ', 
blankText:'      ' 
}, 
{ 
fieldLabel:'    ', 
name:'userpassword', 
id:'password', 
inputType:'password',//     radiocheck text(  ) filepassword   
blankText:'     ' 

} 

], 
buttons:[{text:"  "},{text:"  ",handler:function(){alert("  ！");}}], 
buttonAlign:'center' 

}); 
}
주의:renderto:'id1'이 때 폼 패 널 이 효력 을 잃 었 습 니 다.어떻게 된 일 인지 오래 생각 하지 못 했 습 니 다.기본 폼 구성 은 설명(일반적으로 우 리 는 xtype 을 이용 하여 items 의 구성 요소 유형 을 설명 합 니 다)fieldset 의 응용
 
function Read3() { 
var MyformPanel=new Ext.form.FormPanel({ 
title:'fieldset   ', 
renderTo:Ext.getBody(), 
frame:true, 
width:350, 
x:400, 
y:50, 
floating:true, 
items:[ 
{ 
xtype:'fieldset', 
title:'    ', 
collapsible:true, 
autoHeight:true, 
autoWidth:true, 
defaults:{width:150,allowBlank:false,xtype:'textfield'}, 
items:[ 
{ 
fieldLabel:'    ', 
emptyText:'   ', 
blankText:'       ' 
}, 
{ 
fieldLabel:'    ', 
inputType:'password', 
blankText:'       ' 
} 
] 
} 
] 
}); 
}
 폼 패 널 의 기본 구성 요소 소개
 
function Read3() { 
2 Ext.QuickTips.init();//   tips 
3 Ext.apply(Ext.form.VTypes,{ 
4 password:function(val,field){//val        ，field        ，          
5 if(field.confirmTo){//confirmTo           ，            id  
6 var pwd=Ext.get(field.confirmTo);//  confirmTo   id   
7 return (val==pwd.getValue()); 
8 } 
9 return true; 
} 
}); 
var MyformPanel=new Ext.form.FormPanel({ 
title:'fieldset   ', 
renderTo:Ext.getBody(), 
frame:true, 
width:550, 
x:400, 
y:50, 
draggable:{ 
insertProxy: false,//             
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//     panel    
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:'    ', 
emptyText:'   ', 
id:'user', 
name:'userName', 
blankText:'       ', 
anchor:'95%' 
}, 
{ 
fieldLabel:'    ', 
inputType:'password',// password text checkbox rodio 
id:'password', 
name:'userpassword', 
value:'0717', 
blankText:'       ', 
anchor:'95%' 
}, 
{ 
fieldLabel:'    ', 
id:'password2', 
name:'userpassword2', 
inputType:'password', 
vtype:'password', 
vtypeText:'          ', 
confirmTo:'userpassword', 
anchor:'95%' 
}, 
{ 
xtype:"datefield", 
fieldLabel:"    ", 
anchor:"95%" 
}, 
{ 
fieldLabel:'    ', 
value:'http://www.cnblogs.com/chenjq0717', 
vtype:'url', 
vtypeText:'     url', 
id1:'myblog', 
name:'myblog', 
anchor:'95%' 
}, 
{ 
//alpha       ，      （   ，     ） 
//2.alphanum//         ，       
//3.email//email  ，      "[email protected]" 
//4.url//url    ，      http://www.langsin.com 
fieldLabel:'    ', 
vtype:'email', 
vtypeText:'       ', 
name:'email', 
anchor:'95%' 
}, 
{ 
xtype:"panel", 
layout:"column", 
fieldLabel:'  ', 
isFormField:true, 
items:[{ 
columnWidth:.5, 
xtype:"radio", 
boxLabel:" ", 
name:"sex" 
//inputValue 
},{ 
columnWidth:.5, 
checked:true, 
xtype:"radio", 
boxLabel:" ", 
name:"sex" 
}] 
}, 
{ 
xtype:"panel", 
layout:"column",//    table,       
fieldLabel:'  ', 
isFormField:true,//    ,  panel     fieldLabel 
items:[{ 
columnWidth:.5,//   50% 
xtype:"checkbox", 
boxLabel:"  ",//            
name:"" 
},{ 
columnWidth:.5, 
xtype:"checkbox", 
boxLabel:"  ", 
name:"" 
}] 
}, 
{ 
xtype:'combo', 
fieldLabel:'    ', 
name:'family', 
store:<%=getfamilyData() %>,//       
emptyText:'     ' 
}, 
{ 
xtype:"htmleditor", 
id:"myinfo", 
fieldLabel:"    ", 
anchor:"99%" 
} 
] 
} 
] 
}); 
}
폼 데 이 터 를 서버 submit submit:function(){this.getEl().dom.action='MyPages/GetForm.aspx',/제출 후 방향 을 바 꾸 는 페이지 this.getEl().dom.method='POST',/제출 자 this.getEl().dom.submit();/제출 실행},제출 버튼 버튼 추가:[{text:"확인",handler:login,formBind:true},{text:"취소",handler:reset}]제출 방법 추가:function login(){MyformPanel.form.submit();/제출}function reset(){MyformPanel.form.reset();/취소} 본 과 코드:폼 패 널 의 종합 응용
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext7.aspx.cs" Inherits="EXT1.Ext7" %> 
2 
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
4 
5 <html xmlns="http://www.w3.org/1999/xhtml" > 
6 <head runat="server"> 
7 <title>   ,Extjs          </title> 
8 <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
9 <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script> 
<script src="ext-3.2.0/ext-all.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function Read1() { 
Ext.QuickTips.init(); 
var MyForm=new Ext.form.FormPanel({ 
title:'    ', 
width:300, 
height:200, 
x:300, 
y:50, 
floating:true, 
tools:[{id:'close'}], 
draggable:{ 
insertProxy: false,//             
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//     panel    
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);//        
} 
}, 
frame:true, 
labelSeparator:':', 
labelAlign:'right', 
renderTo:Ext.getBody(),//         'id1' 
items:[ 
new Ext.form.TextField({ 
fieldLabel:'    ', 
allowBlank:false, 
blankText:'      ', 
msgTarget:'side' 
}), 
new Ext.form.TextField({ 
fieldLabel:'    ', 
allowBlank:false, 
inputType:'password', 
blankText:'     ', 
msgTarget:'side' 
}) 
] 
}); 
} 
function Read2() { 
Ext.QuickTips.init(); 
var MyForm=new Ext.form.FormPanel({ 
title:'    ', 
width:300, 
x:300, 
y:50, 
floating:true, 
tools:[{id:'close'}], 
frame:true, 
bodyStyle:'padding:10px 0px 1px 1px', 
labelSeparator:':', 
labelAlign:'right', 
draggable:{ 
insertProxy: false,//             
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//     panel    
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);//        
} 
}, 
renderTo:Ext.getBody(),//         'id1' 
defaults:{xtype:'textfield',width:150,allowBlank:false,msgTarget:'side'},//       
items:[ 
{ 
fieldLabel:'    ', 
name:'username', 
id:'user', 
emptyText:'      ', 
blankText:'      ' 
}, 
{ 
fieldLabel:'    ', 
name:'userpassword', 
id:'password', 
inputType:'password', 
blankText:'     ' 
} 
], 
buttons:[{text:"  "},{text:"  ",handler:function(){alert("  ！");}}], 
buttonAlign:'center' 
}); 
} 
function Read3() { 
Ext.QuickTips.init();//   tips 
Ext.apply(Ext.form.VTypes,{ 
password:function(val,field){//val        ，field        ，          
if(field.confirmTo){//confirmTo           ，            id  
var pwd=Ext.get(field.confirmTo);//  confirmTo   id   
return (val==pwd.getValue()); 
} 
return true; 
} 
}); 
var MyformPanel=new Ext.form.FormPanel({ 
title:'fieldset   ', 
renderTo:Ext.getBody(), 
frame:true, 
width:550, 
x:400, 
y:50, 
draggable:{ 
insertProxy: false,//             
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//     panel    
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);//        
} 
}, 
submit: function(){ 
this.getEl().dom.action = 'MyPages/GetForm.aspx', 
this.getEl().dom.method='POST', 
this.getEl().dom.submit(); 
}, 
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:'    ', 
//emptyText:'   ', 
id:'user', 
name:'userName', 
blankText:'       ', 
anchor:'95%' 
}, 
{ 
fieldLabel:'    ', 
inputType:'password',// password text checkbox rodio 
id:'password', 
name:'userpassword', 
value:'0717', 
blankText:'       ', 
anchor:'95%' 
}, 
{ 
fieldLabel:'    ', 
id:'password2', 
name:'userpassword2', 
inputType:'password', 
vtype:'password', 
vtypeText:'          ', 
confirmTo:'userpassword', 
anchor:'95%' 
}, 
{ 
xtype:"datefield", 
fieldLabel:"    ", 
anchor:"95%" 
}, 
{ 
fieldLabel:'    ', 
value:'http://www.cnblogs.com/chenjq0717', 
vtype:'url', 
vtypeText:'     url', 
id1:'myblog', 
name:'myblog', 
anchor:'95%' 
}, 
{ 
//alpha       ，      （   ，     ） 
//2.alphanum//         ，       
//3.email//email  ，      "[email protected]" 
//4.url//url    ，      http://www.langsin.com 
fieldLabel:'    ', 
vtype:'email', 
vtypeText:'       ', 
name:'email', 
anchor:'95%' 
}, 
{ 
xtype:"panel", 
layout:"column", 
fieldLabel:'  ', 
isFormField:true, 
items:[{ 
columnWidth:.5, 
xtype:"radio", 
boxLabel:" ", 
name:"sex" 
//inputValue 
},{ 
columnWidth:.5, 
checked:true, 
xtype:"radio", 
boxLabel:" ", 
name:"sex" 
}] 
}, 
{ 
xtype:"panel", 
layout:"column",//    table,       
fieldLabel:'  ', 
isFormField:true,//    ,  panel     fieldLabel 
items:[{ 
columnWidth:.5,//   50% 
xtype:"checkbox", 
boxLabel:"  ",//            
name:"" 
},{ 
columnWidth:.5, 
xtype:"checkbox", 
boxLabel:"  ", 
name:"" 
}] 
}, 
{ 
xtype:'combo', 
fieldLabel:'    ', 
name:'family', 
store:<%=getfamilyData() %>,//       
emptyText:'     ' 
}, 
{ 
xtype:"htmleditor", 
id:"myinfo", 
fieldLabel:"    ", 
anchor:"99%" 
} 
] 
} 
], 
buttons:[{text:"  ",handler:login,formBind:true},{text:"  ",handler:reset}] 
}); 
function login(){ 
MyformPanel.form.submit();//   
} 
function reset(){ 
MyformPanel.form.reset();//   
} 
} 
Ext.onReady(Read3); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="id1"> 
</div> 
</form> 
</body> 
<script type="text/javascript"> 
</script> 
</html>
자바 파일 경로 공백,"+",중국어 읽 기 처리 방법
txt 텍스트 에 데 이 터 를 쓰 고 읽 는 방법 을 자바 로 구현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage