A guide to accessing and managing events for the child inside a div element using extjs4

Question

A guide to accessing and managing events for the child inside a div element using extjs4

How can I dynamically switch between the divs with classes "icon-right" and "icon-left" when clicked? Here is an example of the HTML and ExtJS code involved:
    Html code:
        <div class="msg"> 
           <div> 
               <div class="sample"></div> 
           </div>
           <div> 
              <div class="icon-right"></div> 
           </div> 
        </div>
    Extjs code:
        var message = Ext.select('div:next(div.icon-right)');

        message.on('click', function () {
            alert('test msg');
        }, message);

I want to create functionality where clicking on a div with class "icon-right" changes it to "icon-left", and vice versa. How can this be achieved using JavaScript?

javascript jquery css html extjs

Answer 1

Answer №1

Would you be able to perform the following task:

Select all elements with the class 'icon-right', then move up to the nearest div element and attach a click event listener to it?

Answer 2

Would you be able to perform the following task:

Select all elements with the class 'icon-right', then move up to the nearest div element and attach a click event listener to it?

Answer 3

Answer №2

According to the provided information, Ext.select will yield either a CompositeElement or a group of DOM elements. It is recommended to use Ext.query which returns an HTMLElement and allows you to define the onclick event handler as follows:

var target = Ext.query(".icon-right").pop(); // retrieves the first div from the query
target.onclick = function(){ alert('clicked!'); }

If you prefer to use Ext event listeners, you should utilize the Ext.dom.Element class. An instance of this class is obtained through Ext.get, requiring an ID, DOM Node, or Existing Element as specified in the documentation. Once you have retrieved the element using Ext.get, you can then assign a listener using Ext.dom.Element.on just like in the code snippet provided.

Functional jsFiddle Example: http://jsfiddle.net/LcRWB/ (demonstrates both scenarios)

Answer 4

According to the provided information, Ext.select will yield either a CompositeElement or a group of DOM elements. It is recommended to use Ext.query which returns an HTMLElement and allows you to define the onclick event handler as follows:

var target = Ext.query(".icon-right").pop(); // retrieves the first div from the query
target.onclick = function(){ alert('clicked!'); }

If you prefer to use Ext event listeners, you should utilize the Ext.dom.Element class. An instance of this class is obtained through Ext.get, requiring an ID, DOM Node, or Existing Element as specified in the documentation. Once you have retrieved the element using Ext.get, you can then assign a listener using Ext.dom.Element.on just like in the code snippet provided.

Functional jsFiddle Example: http://jsfiddle.net/LcRWB/ (demonstrates both scenarios)

Answer 5

Answer №3

This solution seems promising.

let element = document.querySelector("[class=arrow-left]");
element.addEventListener('click', function() {
  console.log("Hello");
});

You may view a demonstration on codepen http://codepen.io/YvonneS/pen/jxRWyM/

Answer 6

This solution seems promising.

let element = document.querySelector("[class=arrow-left]");
element.addEventListener('click', function() {
  console.log("Hello");
});

You may view a demonstration on codepen http://codepen.io/YvonneS/pen/jxRWyM/

A guide to accessing and managing events for the child inside a div element using extjs4

Answer №1

Answer №2

Answer №3

Similar questions

Create a unique command that will run regardless of the success or failure of the command before

How to centrally position an image within a cropped parent container using CSS

Is there a way to eliminate the outline on a FormControl component in React-bootstrap when the input field is selected?

Store the output of the function in a variable

The `@import` statement fails to load styles even when the URL is perfectly accurate

When the page is loaded, populate FullCalendar with events from the model

In a perplexing twist, requests made to the Express app arrive with empty bodies despite data being sent, but this anomaly occurs

Having trouble with tabs in jQuery?

Intensive analysis of objects comparing their characteristics

Display the personalized list of user items on the MERN dashboard

Responsive div that reacts to scrolling

Developing a fresh instance in JavaScript

Efficient method for managing complex JSON object updates using setState in React

The function in an AngularJS controller is failing to execute

Animating CSS when closing a modal box

Why is Selectpicker failing to display JSON data with vue js?

Creating a static file for deployment: A step-by-step guide

Creating a triangle with SVG polygon: A step-by-step guide

Implementing a post request triggered by a button click in Node.js with Express

How to save HTML content in a variable for future use in Next.js