Work with extjs controller

Question

I have a question regarding ExtJS controllers. My code:

Ext.define('app.controller.Clients.Clients', {
    extend: 'Ext.app.Controller',
    stores: ['Clients.Clients'],
    models: ['Clients.Clients'],
    views: ['Clients.Clients'],
    init: function() {
        this.control({
            'gridClients button[action=deleteClient]': {
                click: this.onButtonClickDelete
            },
            'gridClients button[action=refreshClients]': {
                click: this.onButtonClickRefresh
            },
            'gridClients button[action=printClients]': {
                click: this.onButtonClickPrint
            }
        })
    },
    onButtonClickDelete: function(button, e, options) {
        alert('DELETE?');
    },
    onButtonClickRefresh: function(button, e, options) {
        alert('REFRESH?');
    },
    onButtonClickPrint: function(button, e, options) {
        alert('PRINT?');
    }
});

I'm going to refer to a grid named 'gridClients', and I'd like to know if there is any way to create a variable inside the driver file...

I'm going to refer to a grid named 'gridClients', and I would like to know if there is any way to create a variable inside the driver file, to refer to that grid.

Example, I would like something similar to:

Var Grid = Ext.ComponentQuery.query (#gridClients) [0];

And use it like this:

OnButtonClickRefresh: function (button, e, options) {
         Grid.getStore (). Load ();
     }

I really do not know where to declare that var...

Alexander · Accepted Answer · 2017-05-04 20:32:56Z

1

In a controller, you are expected to work with the refs. Example:

Ext.define('app.controller.Clients.Clients', {
    extend: 'Ext.app.Controller',
    stores: ['Clients.Clients'],
    models: ['Clients.Clients'],
    views: ['Clients.Clients'],
    init: function() {
        ...
    },
    refs:[{
        ref:'clientsGridExample',
        selector: '#gridClients'
    }],
    OnButtonClickRefresh: function (button, e, options) {
         this // inside a controller, these functions are scoped to controller
             .getClientsGridExample() // refs are automatically converted to getter methods
             .getStore().load(); // Do whatever you want to do
    }
});

answered May 4, 2017 at 20:32

Alexander

20.3k21 gold badges86 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leo Yanes Over a year ago

Great! It works, thanks for showing me the use of 'refs', after reading the documentation a bit, I understand its use.

Nikolai Lopin · Accepted Answer · 2017-05-04 20:31:19Z

It's pretty clear, if you check the Ext.app.Controller documentation.

You can set refs in your controller and use generated getter to get the grid you need. For example, if you have ref with value clientsGrid, getter getClientsGrid() will be created by ExtJS.

`

Ext.define('app.controller.Clients.Clients', {
    extend: 'Ext.app.Controller',
    stores: ['Clients.Clients'],
    models: ['Clients.Clients'],
    views: ['Clients.Clients'],

    refs: [
        { ref: 'grid', selector: '#gridClients' }
    ],    

    init: function() {
        this.control({
            'gridClients button[action=deleteClient]': {
                click: this.onButtonClickDelete
            },
            'gridClients button[action=refreshClients]': {
                click: this.onButtonClickRefresh
            },
            'gridClients button[action=printClients]': {
                click: this.onButtonClickPrint
            }
        })
    },
    onButtonClickDelete: function(button, e, options) {
        this.getGrid().doSomething();
    },
    onButtonClickRefresh: function(button, e, options) {
        alert('REFRESH?');
    },
    onButtonClickPrint: function(button, e, options) {
        alert('PRINT?');
    }
});

`

Makha · Accepted Answer · 2017-05-04 20:26:38Z

0

Inside the OnButtonClickRefresh listener you can get the grid like this:

var grid = button.up("grid");

Link to the fiddle

answered May 4, 2017 at 20:26

Makha

3374 silver badges17 bronze badges

Collectives™ on Stack Overflow

Work with extjs controller

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related