Utilizing ExtJS and its control feature

I am facing an issue with the following code block:

run: function(e, row){
    var me = this;

    var container = Ext.getCmp('centercontainer');

    try {
        container.removeAll();
    } catch(e) {  }

    // The code snippet below is actually called from another file, I've added it here for reference.
    me.panels = [{
        xtype: 'tabpanel',
        id: 'containertabpanel',
        items: [{
            itemId: 'package',
            title: me.PackageTitle
        },{
            itemId: 'excursion',
            title: me.ExcursionTitle
        }]
    }];

    // Reset
    container.setTitle(me.EditDestinationTitle + row.data.name);
    container.add(me.panels);
    me.tabs = container.getComponent('containertabpanel');

    // console.log(Ext.ComponentQuery.query('#containertabpanel > #package'))

    me.control({
        // Work with 
        // 'tab': {

        // Doesn't work
        'containertabpanel > package': {
            mouseover: me.doPackage
        }
    })

},

Is there a way to capture the click event of the "package" item in the tabpanel component? I noticed that using just the "tab" selector in this.control query works, but I'm unable to target only the "package" tab component.

Appreciate any assistance. Thank you.

javascriptextjsextjs4extjs-mvc

Answer №1

When setting up your tabpanel, make sure to include -

listeners:{
    click:{
        fn: function(){
           //add your custom click event handling code here
        }
    }
}

Answer №2

It seems like you're working with controller code and attempting to capture an item click on a panel within a tabpanel.

To achieve this, you can identify your panel using a unique property in the component query syntax. For example: button[myprop=blah]
This syntax will select any buttons on the page with the specified config:

{
    xtype:'button' 
    myprop:'blah'
}

In your situation, you could try using tab[itemId=package]

Additionally, make sure that the controller is listening for events triggered by the components. Verify if the event you are trying to listen for is actually fired (refer to the documentation). If needed, you can create custom events as well.

Answer №3

It is necessary for you to complete this task

me.control({
    // Deal with 
    // 'tab': {

    // It's not effective
    'containertabpanel > #package': {
        mouseover: me.doPackage
    }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The function type '() => JSX.Element' cannot be assigned to the type 'ReactNode'

I am encountering an issue while trying to display a component using an object. The code is throwing an error: const Login = () => <>login</> const publicRoutes = [ { path: '/login', component: Login } ] function AppR ...

javascriptreactjstypescripttypeerror

Is it possible to resize an image in a single direction?

Is there a way to scale in one direction only? Typically, the scale function will scale the canvas equally in both the x and y directions. But what if I want to scale, for example, a polyline or group of lines only in the x direction without affecting the ...

javascriptphpjqueryajaxcanvas

Encountering an issue with Angular's absence while attempting to minify the files

I utilized grunt along with usemin to merge and compress the following code: <!-- build:js /assets/vendor.js --> <script src="../public/bower_components/angular/angular.min.js"></script> <script src="../public/bower_components/angular ...

javascriptangularjsgruntjsuglifyjs

Conditionals causing issue with React Button disabled property functionality

Having a DIV with two child elements, namely buttons that should be disabled under certain conditions. Despite correct conditions being applied, the buttons remain enabled which is causing confusion. The code snippet in question is as below : < di ...

javascripthtmljqueryreactjs

selection menu and advancement gauge

While working on my code, I have a task where I need to make the progress bar move a specific amount when a name is clicked based on the option's value. <!DOCTYPE html> <html> <head> <title>testinggg</title> &l ...

javascriptjqueryhtmlcss

Encountered an unhandled promise rejection: TypeError - The Form is undefined in Angular 6 error

Whenever I attempt to call one .ts file from another using .Form, I encounter the following error: Uncaught (in promise): TypeError: this.Form is undefined The file that contains the error has imported the .ts file which I intend to pass values to. ...

javascriptangularangular6angular7

Silly problem arising from the animate feature in jQuery

Apologies for my poor English. I am facing an issue with the animate function of jQuery in my code snippet. It seems to work fine at line 2, but it doesn't work at line 3. Can someone help me understand why? $('.opac').hover(function(){ ...

javascriptjqueryjquery-animate

Leveraging the withWidth higher order component (HOC) provided by

I am currently using version 3.9.2 of Material UI and experimenting with the withWidth HOC in a server-side rendered application. When I disable Javascript in the debugger options of Chrome Developer Tools, everything functions as expected by displaying t ...

javascriptreactjsmaterial-uiserver-side-renderinghigher-order-components

What is the reason behind my difficulty in opening my dialog box modally using JavaScript?

I am looking to keep a dialog open while data is being fetched from the server. Here is the code I have written: (async()=>{ document.getElementById("dialog").showModal(); if(condition1 is true){ await server_call1(); } ...

javascript

What steps do I need to take to ensure this function runs sequentially? Perhaps my understanding of async and await is lacking

I have a function that is responsible for adding data to my database. However, I'm encountering some inconsistency where it works sometimes and fails other times. My suspicion is that the eDataBuilder function is taking too long to iterate through the ...

javascriptreactjs

When using NextJS with Redux Persist, the HTML does not get rendered in the initial server

I am currently utilizing ReactJS/NextJS along with Redux and redux-persist, as well as Ant Design. Recently, I have noticed that my html codes and other data are not rendering in the page's source. They do render in the browser and when inspected, but ...

javascriptreactjsnext.js

Adjusting the amount of rows and columns in a fluid manner with CSS grid (updated)

After conducting my research, it seems that the most effective way to set the final value of a CSS grid is either by directly specifying it or by creating/manipulating the css :root value. A similar query was previously raised here, although the answers p ...

javascriptcsscss-grid

Retrieving JSON data using Jquery (undefined)

When attempting to retrieve a value from JSON data, I am receiving 'undefined'. $.get( baseURL + 'vacation/show/' + name_surname, function( data ) { alert(data); // returns [{"id":"1","title":"Testas","start":"2015-03-04","end":"20 ...

javascriptjqueryjson

Having difficulty making changes to specific category fields in Magento 1.6

I've encountered an issue when trying to save specific fields in certain categories while editing them in Magento 1.6. The problem arises when attempting to edit the following fields within these categories: america/mini packages - description ameri ...

phpjavascriptmagentoe-commerce

Experiencing difficulties in displaying a React element that is being passed as a prop

One of my components looks like this: const Chip = (props) => { const ChipIcon = props.icon; let deleteButton = null; if (!props.readOnly) { deleteButton = <Delete style={styles.deleteButton} onTouchTap={props.onRemove} /& ...

javascriptreactjsmaterial-ui

The confusion arises from the ambiguity between the name of the module and the name of

In my current scenario, I am faced with the following issue : module SomeName { class SomeName { } var namespace = SomeName; } The problem is that when referencing SomeName, it is pointing to the class instead of the module. I have a requireme ...

javascripttypescript

I'm having trouble using Discord.js to set up a custom role with specialized permissions for muting users

module.exports = { name: "mute", description: "This command is used to mute members in a server", execute: async function (msg, arg) { const muteRole = await msg.guild.roles.cache.find((r) => r.name == "Mute ...

javascriptnode.jsdiscorddiscord.js

What is the best way to crop a page?

Running a React application, I am integrating a page from an external ASP.NET app. To achieve my goal of extracting only a section of the page rather than the entire content, I am unsure if it is feasible. Specifically, I aim to extract just the body of th ...

javascripthtmlreactjsreact-native

How to dynamically reference an input textbox ID using javascript or jquery

I have a button titled: GridView1__ctl2_AddButton0 While I can extract the middle part "ctl2" (and variations for each row), I am trying to use it to populate a textbox among many with similar names. GridView1__ctl2_txtStormTimeOn Currently, I could ac ...

javascriptjquery

A guide to effectively displaying JavaScript variables within a jQuery function

Initially, I believed this was a problem specific to WordPress, but after spending hours attempting to resolve it, I suspect that it may actually be a broader JavaScript issue. I've been grappling with this challenge for a few hours now and I'm ...

phpjavascriptjquery