CODEWITHSUNDEEP
javascripthtmlextjs
KishanCS
KishanCS

Reputation: 1377

get class using Ext.get() in extjs

Hello I am very new to ExtJs please help me knowing Ext.get()

This works:

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

Now this is the problem

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

Doesn't work on class. Take a look the complete code:

<!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>

Upvotes: 2

Views: 4079

Answers (2)

Andrew Koshkin
Andrew Koshkin

Reputation: 481

UPDATED

Ext.get() is using ID to find element. Ext.select(selector) - use this to access DOM element by class selector

<!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>

Upvotes: 1

BarathVutukuri
BarathVutukuri

Reputation: 1313

Use the following instead of get. Get accepts the id, for querying classes, you need to use select.

    Ext.select('.tag2').hide();

Upvotes: 5

Related Questions