加载中…【ExtJs 教學】DisplayField 表單組件
(2013-12-19 09:44:02)
标签：
extjs |
分类： ExtJs |
DisplayField組件是ExtJs 3.0
之後出現的新組件，基本上於Field組件一樣，其用途是顯示那一些不需要校驗和提交的文本資料(也就是你不Submit給服務器的資料)。當然你也可以動態控制他的值，使用setValue(),
getValue()方法。
在查找DispalyField組件…我們可以使用 baseForm 的 findField 方法來查找，如果有設定id屬性當然可以使用Ext.getCmp('id')來查找。
在查找DispalyField組件…我們可以使用 baseForm 的 findField 方法來查找，如果有設定id屬性當然可以使用Ext.getCmp('id')來查找。
<html >
< head>
< meta http-equiv="content-type" content="text/html; charset=utf-8" / >
< script type="text/javascript" src="../js/shared/include-ext.js">< / script >
</ head>
<body >
< script language="javascript" >
Ext.onReady(function(){
var myForm = new Ext.form.FormPanel({
title : 'Display Form Demo',
width :500,
height :300,
renderTo :Ext.getBody(),
buttonAlign :'center',
frame :true,
padding :5,
layout : {
type : 'form',
align : 'stretch'
}, items:[ {
xtype :'displayfield',
name :'txt1' ,
autoWidth :true,
fieldLabel :'文字字段1',
value :'字段1',
labelAlign :'right'
}, {
xtype :'textfield',
name :'txt2' ,
autoWidth :true,
autoHeight :true,
fieldLabel :'文字字段2',
value :'字段2',
labelAlign :'right'
} ]
,buttons :[ {
xtype :'button',
text :'SetValue()',
handler :function(){
myForm.form.findField( "txt1").setValue('新的值');
Ext.MessageBox.show({
title :'button1',
msg :'設定完成',
icons :Ext.MessageBox.INFO,
buttons :Ext.Msg.OK
});
}
}, {
xtype :'button',
text :'getValue()',
handler :function(){
var msg = myForm.form.findField("txt1").getValue();
Ext.MessageBox.show({
title :'button1',
msg :'目前的txt1的值是：' + msg,
icons :Ext.MessageBox.INFO,
buttons :Ext.Msg.OK
});
}
}, {
xtype :'button',
text :'load',
handler :function(){
myForm.form.submit({
url :'dataProcess.ashx',
params :{ act:'submit' },
success :function(form,action){
//do something
},
failure:function(form,action){
//do something
}
});
}
},{
xtype :'button',
text :'submit',
handler :function(){
myForm.form.load({
url :'dataProcess.ashx',
params :{ act:'load' }
});
}
} ]
});
});
</ script >
</ body >
</ html>
http://1.bp.blogspot.com/-F-QyB_FCun8/UmoEds-2_JI/AAAAAAAADTI/sCvRIDOVUCo/s640/2013-10-25+%E4%B8%8B%E5%8D%88+01-37-11.jpg教學】DisplayField 表單組件" TITLE="【ExtJs 教學】DisplayField 表單組件" />
Youtube Demo 視頻
優酷 Demo 視頻
喜欢
0
赠金笔