javascript - 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 plete code:

<!DOCTYPE html>
<html>
   <head>
      <link href=".0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
      <script type="text/javascript" src=".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>

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 plete code:

<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare./ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare./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>

Share Improve this question edited Feb 20, 2017 at 11:06 asked Feb 20, 2017 at 10:55 KishanCS 1,3752 gold badges19 silver badges41 bronze badges

get requires id not class. this may help:stackoverflow./questions/13379148/… – Suchit kumar Commented Feb 20, 2017 at 11:00
I would suggest you to start using selectors with .down or by the itemId instead of using Ext.get which in fact is a bad practice as long as you have to specify an id for the ponent to select. – qmateub Commented Feb 20, 2017 at 12:59

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

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

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

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./ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - get class using Ext.get() in extjs - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)