Results 1 to 9 of 9

Thread: Consideration - what is the best implementation approach

  1. #1
    Sencha User
    Join Date
    Aug 2016
    Location
    Israel
    Posts
    10

    Default Consideration - what is the best implementation approach

    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:

    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

    Code:
    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);
    },
    Code:
    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' });
    },

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    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:

    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Aug 2016
    Location
    Israel
    Posts
    10

    Default

    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...

  4. #4
    Sencha User
    Join Date
    Aug 2016
    Location
    Israel
    Posts
    10

    Default

    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); }

  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    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.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255
    Answers
    759

    Default

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

    Code:
    cellclick: function(stuff, .... e) {
        if (e.getTarget('.matcher')) {
            // Go
        }
    }
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Sencha User
    Join Date
    Aug 2016
    Location
    Israel
    Posts
    10

    Default

    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?
    shlomisderot

  8. #8
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255
    Answers
    759

    Default

    The second approach is better than the first.

    Both are not good solutions, better ones have been listed above.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  9. #9
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    We are simply trying to help you. Both solutions you want us to pick are wrong ways to do it, neither is an option.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

Similar Threads

  1. Replies: 0
    Last Post: 18 Nov 2013, 1:14 AM
  2. ST/Mobile performance consideration
    By BenPieper in forum Sencha Touch 2.x: Discussion
    Replies: 2
    Last Post: 30 Sep 2013, 11:53 PM
  3. Performance consideration: refs vs componentquery
    By jugg1es in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 23 Nov 2012, 4:49 AM
  4. ExtGWT consideration questions
    By mribbons in forum Community Discussion
    Replies: 9
    Last Post: 18 Oct 2009, 1:02 AM
  5. Form design consideration
    By hpet in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Jun 2008, 5:45 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •