What is the best way for my controller to access the appropriate view component in extjs?

Question

What is the best way for my controller to access the appropriate view component in extjs?

In my project, I have defined a Ext.grid.Panel named JobList, which includes an Ext button with the unique identifier myButton. The JobList also has its own controller. Within the controller, I have incorporated the following code:

Ext.define('App.controller.JobList', {
  extend: 'Ext.app.Controller',
  refs: [
    {ref: 'jobList', selector: '#jobList'},
    {ref: 'myButton', selector: '#myButton'}
  ],
  init: function(){
    this.control({
      'jobList': {
        select: this.selectJob
      }
    });
  },
  selectJob: function(){
    this.getMyButton().enable();
  }
});

Now, when I instantiate two instances of JobList using Ext.create and assign them the IDs jobList1 and jobList2, a problem arises. When I select a job on jobList2, it ends up enabling the myButton on jobList1 instead of on jobList2. How can I ensure that each instance of JobList correctly enables its own myButton?

javascript extjs model-view-controller extjs4

Answer 1

Answer №1

It is recommended to avoid referencing by itemId and instead use aliases for better organization:

// Ensure that in your App.view.JobList.js file, the following code is included
Ext.define('App.view.JobList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.job-list',
    // ...
    dockedItems: [{
        xtype: 'button',
        name: 'myButton',
        text: 'My button',
    }]
});

// Then in the App.controller.JobList.js:
    // ...
    'job-list': {
        selectionchange: function(model, selected) {
            var button = model.view.up('job-list').down('button[name=myButton]');
            button.setDisabled(Ext.isEmpty(selected));
        }
     }

To see a working example, visit:

Answer 2

It is recommended to avoid referencing by itemId and instead use aliases for better organization:

// Ensure that in your App.view.JobList.js file, the following code is included
Ext.define('App.view.JobList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.job-list',
    // ...
    dockedItems: [{
        xtype: 'button',
        name: 'myButton',
        text: 'My button',
    }]
});

// Then in the App.controller.JobList.js:
    // ...
    'job-list': {
        selectionchange: function(model, selected) {
            var button = model.view.up('job-list').down('button[name=myButton]');
            button.setDisabled(Ext.isEmpty(selected));
        }
     }

To see a working example, visit:

Answer 3

Answer №2

Utilizing a global controller allows you to capture events from all views that meet the specified criteria. To avoid issues like this, consider implementing the MVVM pattern in extjs5. Sencha has done an excellent job with MVVM, as each instance of a view has its own ViewController, preventing conflicts like the one described. If you prefer sticking to the MVC pattern, you will need to handle these situations manually. Refrain from using refs if your view class has multiple instances. Instead, retrieve other components by querying within your current component. For example:

Ext.define('App.controller.JobList', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
           'jobList': {
               select: this.selectJob
           }
        });
    },

    selectJob: function(selectionModel){
        //To access the grid, use the selectionModel linked to our grid in some way
        var grid = selectionModel.view.ownerCt; //or find a more elegant way to get the grid from selectionModel
        var button = grid.down('#myButton');
        button.enable();
    }
});

Answer 4

Utilizing a global controller allows you to capture events from all views that meet the specified criteria. To avoid issues like this, consider implementing the MVVM pattern in extjs5. Sencha has done an excellent job with MVVM, as each instance of a view has its own ViewController, preventing conflicts like the one described. If you prefer sticking to the MVC pattern, you will need to handle these situations manually. Refrain from using refs if your view class has multiple instances. Instead, retrieve other components by querying within your current component. For example:

Ext.define('App.controller.JobList', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
           'jobList': {
               select: this.selectJob
           }
        });
    },

    selectJob: function(selectionModel){
        //To access the grid, use the selectionModel linked to our grid in some way
        var grid = selectionModel.view.ownerCt; //or find a more elegant way to get the grid from selectionModel
        var button = grid.down('#myButton');
        button.enable();
    }
});

What is the best way for my controller to access the appropriate view component in extjs?

Answer №1

Answer №2

Similar questions

combine multiple select options values in a single function using jQuery

Trouble with mouseout listener in Wordpress causing Google Map to malfunction

error": "message": "Property 'name' cannot be read because it is undefined

Using a loop in a Vue.js slick slider: easy step-by-step guide

JavaScript is failing to add items to an array

What is the best way to display SVGs from an API response using next/image or the <img> tag in Next.js?

Combine Angular variable in JavaScript function

What is the best way to enhance a state's capabilities in Machina.js?

Looking to reload a div with a captcha in a contact form without the need to refresh the entire page

The significance of my values fluctuates within the datepicker, at times acknowledged and other times

Executing a pair of queries within the same table and integrating them within a unified route

Run the GetServerSideProps function every time the button is clicked

The dynamic duo of web development: React and Bootstrap JavaScript

Directly insert an image into your webpage by uploading it from the input field without the need to go through the server

Having trouble getting Bootstrap's Javascript to function properly in a Rails 6 webpacker configuration?

Viewify - displaying images in v-data-table cells reveals only a portion of the image

Despite being listed in the entry components, HelloComponent is not actually included in the NgModule

submit multiple images simultaneously

The best method for quickly loading a webpage that is over 20MB in size

Tips for avoiding the persistence of an old array on the screen after refreshing and showing the new, updated array