1. #1
    Sencha User
    Join Date
    Mar 2008
    Location
    Brasil
    Posts
    31
    Vote Rating
    3
    Erico is on a distinguished road

      0  

    Default [4.2.1.744] dynamic tooltip in action column not working

    [4.2.1.744] dynamic tooltip in action column not working


    The code below has stopped working on version 4.2.1.744

    Code:
    getClass: function(v,metadata,r,rowIndex,colIndex,store){
       this.items[0].tooltip = r.get("inf");
    }
    or

    Code:
    getTip: function(v,metadata,r,rowIndex,colIndex,store){
       return r.get("inf");
    }

    Alternatively, I am using the code below:

    Code:
    renderer: function(v,metadata,r,rowIndex,colIndex,store,view){
       metadata.tdAttr = 'data-qtip="' + Ext.htmlEncode(r.get("inf")) + '"';
    }

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,079
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    The following works:

    Code:
    getTip: function () {
        return 'sample tip';
    }
    as does

    Code:
    getTip: function (a, b, r) {
        return r.get('firstname');
        // using the example at the top of the ActionColumn API docs
    }
    What do you see if you console.log r.get("inf")?

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Location
    Brasil
    Posts
    31
    Vote Rating
    3
    Erico is on a distinguished road

      0  

    Default


    I use the code below, and the functions getClass and getTip not work

    (functions are defined within each item)

    Code:
    xtype: "actioncolumn",
    sortable: false,
    hideable: false,
    menuDisabled: true,
    draggable: false,
    groupable: false,
    dataIndex: "id",
    align: "center",
    width: 20,
    items: [{
        getClass: function(v,metadata,r,rowIndex,colIndex,store){
    //    this.items[0].tooltip = r.get("inf"); NOT WORK
        return "icon-action-column";
    },
    //getTip: function(v,metadata,r,rowIndex,colIndex,store){
    //    return r.get("inf"); NOT WORK
    //},
    //tooltip: "test tooltip", WORK
    handler: function(view,rowIndex,colIndex,item,e){
        var r = view.getStore().getAt(rowIndex);
        if(!Ext.isEmpty(r)) {
            myAction(r);
        }
    }
    }],
    renderer: function(v,metadata,r,rowIndex,colIndex,store,view){
        metadata.tdAttr = 'data-qtip="' + Ext.htmlEncode(r.get("inf") + '"'; //WORK
    //return v;
    }

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,079
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    For what it's worth the below is just a modification of the example from the ActionColumn API doc using the getTip and getClass configs. I tested in 4.2 and 4.2.1.818 Beta (latest nightly) with no issue:

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'employeeStore',
        fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
        data:[
            {firstname:"Michael", lastname:"Scott"},
            {firstname:"Dwight", lastname:"Schrute"},
            {firstname:"Jim", lastname:"Halpert"},
            {firstname:"Kevin", lastname:"Malone"},
            {firstname:"Angela", lastname:"Martin"}
        ]
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Action Column Demo',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [
            {text: 'First Name',  dataIndex:'firstname'},
            {text: 'Last Name',  dataIndex:'lastname'},
            {
                xtype:'actioncolumn',
                width:50,
                items: [{
                    icon: 'extjs/examples/shared/icons/fam/cog_edit.png',  // Use a URL in the icon config
                    //tooltip: 'Edit',
                    getClass: function (v, meta, record, rowIndex, colIndex, store) {
                        return record.get('firstname');
                    },
                    getTip: function (v, meta, record, rowIndex, colIndex, store) {
                        return record.get('firstname');
                    },
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        alert("Edit " + rec.get('firstname'));
                    }
                }]
            }
        ],
        width: 250,
        renderTo: Ext.getBody()
    });
    Screenshot from the developer tools showing that the Jim class was added using getClass
    jim-class.png

    Tip from getTip config
    jim-tip.png

  5. #5
    Sencha User
    Join Date
    Mar 2008
    Location
    Brasil
    Posts
    31
    Vote Rating
    3
    Erico is on a distinguished road

      0  

    Default


    I use version 4.2.1.744 as shown below

    extjs_version.jpg


    I've two records, the first with an address counter 0 and the second with 2 as shown below

    extjs_screen1.png
    as shown in the image above, the class of the image is correct (with address zero shows image without color), but the tooltip is lost

    the code used is as follows

    Code:
    xtype: "actioncolumn",
    sortable: false,
    hideable: false,
    menuDisabled: true,
    draggable: false,
    groupable: false,
    dataIndex: "id",
    align: "center",
    width: 20,
    items: [{
    	getClass: function(v,metadata,r,rowIndex,colIndex,store){
    		this.items[0].tooltip = r.get("count_end") + " Endere├žo" + (r.get("count_end") > 1 ? "s" : ""); //NOT WORK
    		return r.get("count_end") > 0 ? "icon-action-column-endereco" : "icon-action-column-endereco-off";
    	},
    	getTip: function(v,metadata,r,rowIndex,colIndex,store){
    		return r.get("count_end"); //NOT WORK
    	},
    }]

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,079
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Without seeing your data in a more complete example it's a little hard to tell what's happening. In your getTip if you return "Example Tip"; does that work?

    What does r.get("count_end"); evaluate to?

  7. #7
    Sencha User
    Join Date
    Mar 2008
    Location
    Brasil
    Posts
    31
    Vote Rating
    3
    Erico is on a distinguished road

      0  

    Default


    Thanks for interaction slemmon and sorry for the confusion, I will explain what happened !!!

    the code below does not work (lost in index):
    Code:
    getClass: function(v,metadata,r,rowIndex,colIndex,store){
       this.items[0].tooltip = r.get("inf");
    }
    the code below works only if the return is string (or nonzero number):
    (in my example, r.get("inf") returned numeric)
    Code:
    getTip: function(v,metadata,r,rowIndex,colIndex,store){
       return r.get("inf");
    }
    the code below works:
    Code:
    renderer: function(v,metadata,r,rowIndex,colIndex,store,view){
       metadata.tdAttr = 'data-qtip="' + Ext.htmlEncode(r.get("inf")) + '"';
    }

Thread Participants: 1