在extjs中使用Ext.get()获取类

时间:2017-02-20 10:55:42

标签: javascript html extjs

您好我是ExtJs的新手,请帮助我了解Ext.get()

这有效:

  Ext.get('tag2').hide(); // worked well on with Id
   <div id ="tag2">using id</div><!--given with id-->

现在这是问题

 Ext.get('tag2').hide()//hiding only id not class
 <div class ="tag2">using class</div><!--given with class-->

不上课。 看看完整的代码:

<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function(){
            Ext.get('tag2').hide()//hiding only id not class
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'show',
               listeners: {
                  click: function() {
                     this.hide();
                  },
                  hide: function() {
                     Ext.get('tag1').hide();
                     Ext.get('tag2').show();//not working hear
                  }
               }
            });
         });           
      </script> 
   </head>
   <body>
   <div class ="tag1">Test Div</div>
   <div class ="tag2">using class</div><!--given with class-->
   <div id ="tag2">using id</div><!--given with id-->
   <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

2 个答案:

答案 0 :(得分:4)

使用以下内容代替get。 获取接受ID,对于查询课程,您需要使用选择

function addListenerToElements (){
        var aTags = document.getElementsByClassName("classElements")
        for (var i=0;i<aTags.length;i++){
            aTags[i].addEventListener('click',myFunction);
        }
    }

    function myFunction() {
        console.log("something");
    }

答案 1 :(得分:1)

<强>已更新

Ext.get()正在使用ID来查找元素。 Ext.select(selector) - 使用它来按类选择器

访问DOM元素
<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function(){
             var tag = Ext.get('tag');
             var tagTwo = Ext.select('.tag2');
             console.log(tag);
             console.log(tagTwo);
             tag.hide(); // hide by ID
             tagTwo.hide(); // hide all divs with tag2 class value
         });           
      </script> 
   </head>
   <body>
   <div id="tag">Test Div</div>
   <div class="tag2">Test Div2</div>
   <div class="tag2">Test Div3</div>
   </body>
</html>