转自：https://www.cnblogs.com/kelly/archive/2009/06/05/1496897.html

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

 

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

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

来源：