日期:2014-05-16  浏览次数:20589 次

EXTJS哪个标签类似于label
我想在画面上只显示一行文字,并且可以控制这行文字所在画面任意位置,extjs的代码如何实现?这个标签应该包含在from和panel中。


------解决方案--------------------
Ext.form.Label

JScript code
<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>