【原】基础篇:第七篇,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>

 

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

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