【原】基础篇:第七篇,Ext组件系列之--label组件的基本用法

本篇介绍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>



如图所示,当选择隐藏的时候就出现下图



当选择上图时,就又会出现