本篇介绍Ext.form.Label组件的基本用法:
这里通过上一篇介绍的button按钮的click事件来测试Ext.form.Label组件的用法,首先点隐藏的时候将Ext.form.Label组件隐藏,而后又通过button 这个反复键来显示Ext.form.Label组件,详细看图片效果以及代码
如图所示,当选择隐藏的时候就出现下图
当选择上图时,就又会出现
下面看看代码:
<form id="form1" runat="server">
<div>
<div id="Bind_Label"></div>
<br />
<div id="Bind_Button"></div>
<script type="text/javascript">
function ready()
{
Label组件仅仅是作为一个标签使用，所以用法较为简单
var label = new Ext.form.Label
({
id:"labelID",
text:"测试label组件",
height:100,//默认auto
width:100,//默认auto
autoShow:true,//默认false
autoWidth:true,//默认false
autoHeight:true,//默认false
hidden:false,//默认false
hideMode:"offsets",//默认display,可以取值：display，offsets，visibility
cls:"cssLabel",//样式定义,默认""
disabled:true,//默认false
disabledClass:"",//默认x-item-disabled
html:"Ext",//默认""
//x:number,y:number,在容器中的x,y坐标
renderTo:"Bind_Label"//将组件的显示效果渲染到某个节点的ID
});
//测试label 这个是反复键 选择隐藏就设置为显示 反之就设置为隐藏
var btnEvent = new Ext.Button
({
id:"btnEvent",
text:"隐藏label组件",
renderTo:"Bind_Button"
});
var flag = 0;
btnEvent.on("click",function()
{
if(flag==0)
{
label.setVisible(false);
btnEvent.setText("显示label组件");
flag = 1;
}
else
{
label.setVisible(true);
btnEvent.setText("隐藏label组件");
flag = 0;
}
});
//比较常用的方法主要有 以下方法都较为简单 在本示例中你可以对所有的方法自行测试下就知道是什么意思了
addClass( string cls )
destroy()
disable()
enable()
focus( [Boolean selectText], [Boolean/Number delay] )
getBox( [Boolean local] )
getEl()
getId()
getItemId()
getPosition( [Boolean local] )
getSize()
getXType()
getXTypes()
hide()
isVisible()
isXType( String xtype, [Boolean shallow] )
setDisabled( Boolean disabled )
setHeight( Number height )
setPosition( Number left, Number top )
setSize( Number/Object width, Number height )
setText( String text, [Boolean encode] )
setVisible( Boolean visible )
setWidth( Number width )
show()
updateBox( Object box )
}
Ext.onReady(ready);
</script>
</div>
</form>
如图所示,当选择隐藏的时候就出现下图
当选择上图时,就又会出现
本文转自温景良博客园博客，原文链接：http://www.cnblogs.com/wenjl520/archive/2008/11/03/1325550.html，如需转载请自行联系原作者
