How to use nested methods in newly created class Ext.define

Question

Could you teach me how to call nested methods? Basic idea, i want to have a function inside a class that i can configure from outside by sending another folderSelector with different return path. But when right now i'm trying to do that extjs says to me:

[W] XTemplate evaluation exception: foldersSelector is not a function

Code example:

Ext.define('somepath.Some1', {
extend: 'somepath.SomeParent',
text: 'sometext',
foldersSelector: function(data){
 return data.folders;
},
initComponent:  function(){
   ...
   this.callParent();
}
renderer: function(data){
 bla bla bla / got data from somewhere
 ...
 ...
 foldersSelector(data);
    // with this.foldersSelector result the same!
}
});

parent class: 'Ext.grid.column.Column ' – Eldar Nezametdinov Dec 17 '16 at 13:54 — Eldar Nezametdinov, Dec 17 '16 at 13:54

pagep · Accepted Answer · 2016-12-18T17:36:08.213

1

You are missing this in your function. You need to call the function from the class object. Something like this:

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mypanel',


    height: 250,
    width: 400,
    title: 'My Panel',
    defaultListenerScope: true,


    listeners: {
        render: 'onPanelRender'
    },

    onPanelRender: function(component, eOpts) {
        // call using this
        this.folderSelector();
        // call using component
        component.folderSelector();
    },

    folderSelector: function(data) {
        console.log('Function')
    }

});

Fiddle https://fiddle.sencha.com/#view/editor&fiddle/1mpe

In your case, you are in the grid column, you can't call this because that's the grid. You have to get the column.

Ext.define('MyApp.view.MyColumn3', {
    extend: 'MyApp.view.SuperColumn',
    alias: 'widget.mycolumn3',

    id: 'myColumnId',

    foldersSelector: function (data) {
        console.log('I AM CALLED');
        return data + '-SOSO'
    },

    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
            // you have to get the column, there are many ways how to do so                
            var c = Ext.first('#myColumnId')
            return c.foldersSelector(value)
    }

    // option without the id
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {     
            // this is the grid
            var gridColumns = this.getColumns();
            // we know the column index
            var c = gridColumns[colIndex];
            return c.foldersSelector(value)
    }


});

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1mpo

edited Dec 18 '16 at 17:36

answered Dec 17 '16 at 12:58

pagep

3,488
1
26
47

your answer is good and it real works for view component, but i forgot to say that mine is child of Ext.grid.column.Column, that has renderer method. Should i mark this question as resolved and ask anoter one for Ext.grid.column.Column ?( – Eldar Nezametdinov Dec 17 '16 at 13:36
@EldarNezametdinov I have updated the answer with the solution for you – pagep Dec 17 '16 at 18:17
in case if i have many objects with the same id extjs will return an error : duplicate id . `id: 'myColumnId',` and `Ext.first('#myColumnId')` are so hard coded.. any other way to get column? I marked question as resolved because it's already very useful for others. I used this column in many grids so i can't have only one Id for many instanced columns. – Eldar Nezametdinov Dec 18 '16 at 17:00
that will be real strange to do all that stuff only for foldersSelector in one single class. For one instance i could put it inside and don't care about reusing of code. So, i'm creating many of them and want to reuse them. Right now I really don't know how to get column :( – Eldar Nezametdinov Dec 18 '16 at 17:06
i can't even use `text` or `title` or even your new `id` parameters in renderer function without searching this column :( that i don't know how to do – Eldar Nezametdinov Dec 18 '16 at 17:20
@EldarNezametdinov check this fiddle - it's without the id https://fiddle.sencha.com/#view/editor&fiddle/1mq2 btw why do you even have this function on that column? Do you use it anywhere else than in the renderer ? If you use it only in the renderer, you can simply define the function inside the renderer function http://stackoverflow.com/a/3212519/1768843 – pagep Dec 18 '16 at 17:34
THANK YOU SO MUCH, man! :) finally i can use this function) i can't define it inside because i'm sending another one function with the same name in constructor. sometimes i have this path: etc0.etc1.etc2, and sometimes other: etc2 with this function i can use path that i want for every grid.... – Eldar Nezametdinov Dec 18 '16 at 17:40
1

@pager, found more easiest way - meta and then column `meta.column` – Eldar Nezametdinov Dec 20 '16 at 08:15

How to use nested methods in newly created class Ext.define

1 Answers1