Consideration - what is the best implementation approach

[[email protected]]

The motivation is to render cell grid as a clickable anchor using template,

The two implementation that suggested are:

1. Within the cell renderer function create a fly component to hold the data and provide ID to access that data,
Her the code:

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    var ctrl = this.getController();

    var cmp = new Ext.Component({
        listeners: {
            click: function(){
                ctrl.editTemplateClick(record);
            }
        },
    });
    
    // disposing the fly component
    this.on('destroy', function() {
        cmp.destroy();
    });

   return Ext.String.format('<a href="#" onclick="Ext.getCmp(\'{0}\').fireEvent(\'click\'); return false;">XXX</a>', cmp.id);
}

This is to avoid re-scan the whole components using afterrender function, and still to be able to call services (functions) belong to the view control

the second approach,

2. Within the cell renderer function return anchor, than scan the grid in afterrender function

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    return Ext.String.format('<a href="#" data-id="{0}" class="trainLink">Train</a>', record.data.Id);
},

afterrender: function(component, eOpts) {
    component.getEl().on('click', function(ev, elem) {
        var id = parseInt(elem.getAttribute('data-id'));
        var record = this.component.getStore().getById(id);
    }, null, { delegate: 'a.trainLink' });
},

[mitchellsimoens]

You are over-engineering a solution here, you don't need a component at all. You can simply use the cellclick event which also gives you access to the record:

[[email protected]]

Oh, I forgot to mention,
I don't want to use cellclick event because it apply to all cells, I want it to be just for specific cell...
Furthermore, I add to the cell anchor (clickable) depend on user authentication so cellclick not suitable, therefore I must to use this form of code...

[[email protected]]

Continues my last response...
Let say the code in renderer should be something like:

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if (!User.IsAllow) {
return null;
}
var ctrl = this.getController();

var cmp = new Ext.Component({
listeners: {
click: function(){
ctrl.editTemplateClick(record);
}
},
});

// disposing the fly component
this.on('destroy', function() {
cmp.destroy();
});

return Ext.String.format('<a href="#" onclick="Ext.getCmp(\'{0}\').fireEvent(\'click\'); return false;">XXX</a>', cmp.id); }

[mitchellsimoens]

STOP USING A COMPONENT! You are fighting the framework.

First, an anchor tag is optional, you can style the text to look like a link. If you still want to use it, all you have to do is stop the event. In the cellclick listener you can also check your User.isAllow same as you would in the renderer. Also, don't forget that your server should also do this permission checking as the client can easily be modified/hacked.

[evant]

A better implementation would be to check the event object via the cellclick event:

cellclick: function(stuff, .... e) {
    if (e.getTarget('.matcher')) {
        // Go
    }
}

[[email protected]]

Hello,
You are not getting... :-)
I'm not asking about how you will implement it,
I'm asking what better approach between the two above that I mentioned,

The first - create new Component - which is the smallest unit in extjs with listener for click event to access the controller services or;
The second - after the grid was render start to scan it and find the elements with the fit selector and manipulate it to enable to call the controller services?

[evant]

The second approach is better than the first.

Both are not good solutions, better ones have been listed above.

[mitchellsimoens]

We are simply trying to help you. Both solutions you want us to pick are wrong ways to do it, neither is an option.