CODEWITHSUNDEEP
extjsextjs4extjs-mvc
patryks
patryks

Reputation: 692

Extjs 4 Disable tooltip for PagingToolbar

I have PagingToolbar as bbar of my grid. When tooltip shows up, it renders below my visible screen and that is why vertical scroll shows up, but when it does the vertical scroll takes some place of the viewport so automatically horizontal scroll also shows up overflowing the tooltip. So basically i have 2 questions.

  1. The vertical scrolls shows for whole viewport, but grid with bbar is in south region only and grid has already vertical scroll itself. Is there some kind of config to control that behaviour?

  2. How to disable tooltips for PagingToolbar i have following code which is not working (grid definition, removed irrelevant) . 

initComponent: function() {

        var me = this;

        this.store = 'DevPlan';

var paging = Ext.create('Ext.PagingToolbar', {
            store: this.store,
            displayInfo: true,
            displayMsg: 'Wyświetlono wnioski {0} - {1} z {2}',
            emptyMsg: "Brak wniosków do wyświetlenia"
        });

        Ext.each(paging.items.items, function(btn) {
            if (btn.getXType() == 'button' && btn.tooltip != undefined) {
                Ext.QuickTips.unregister(btn.getId());
            }
        });

        this.bbar = paging;

this.callParent(arguments);

I think maybe the above code is not working because tooltips were not registered yet or bacause the paging toolbar has not been rendered so i tried:

afterRender:function() {

        this.callParent();

        var items = this.bbar.items.items;
        Ext.each(items, function(btn) {
            if (btn.getXType() == 'button' && btn.tooltip != undefined) {
                console.log(btn.getId());
                Ext.QuickTips.unregister(btn.getId());
            }
        });
    }

but in this code i get this.bbar is undefined. Why? So when is bbar rendered?

Upvotes: 2

Views: 2874

Answers (2)

chen hao
chen hao

Reputation: 1

You can do like this 

{
dock : 'bottom',
xtype : 'pagingtoolbar',
store : store,
pageSize : 25,
displayInfo : true,
firstText:null,
prevText:null,
nextText:null,
lastText:null,
refreshText:null,
....

Upvotes: 0

sra
sra

Reputation: 23973

Since ExtJS4 the bbar is just a short way to apply a toolbar/items as bottom docked and get unsetted after init, see

if (me.bbar) {
    docked.push(initToolbar(me.bbar, 'bottom'));
    me.bbar = null;
}

I guess you can do it this way (I expected this to be a event, so the comments are):

afterrender: function(grid) { 
    // 'this' should not be accessible within a eventcallback! If it is you are within the class definition and should use this.on('beforerender', ...) after the callParent() instead!!
    // callParent() should be called within the init of the class, not somewhere else!
    // this.callParent(); 

    var pagebar = grid.down('pagingtoolbar'),
        items = pagebar ? pagebar.items.items : [],
        len = items.length,
        i = 0;
    // don't use each if it is not really necessary!
    for(;i < len; i++) {
        var item = items[i];
        if (item.getXType() === 'button' && item.tooltip != undefined) {
            console.log(item.getId());
            Ext.QuickTips.unregister(item.getId());
        }
    });
}

Edit:

Based on your last comment: You should not override the afterRender method of the Grid, register yourself to the aftererender event instead and do this within the initComponent() right after the call parent, as written in the comment of the code expample

Edit 2:

There is a private method on each button that clears the tooltip. As you might know private methods can still be called like any others but the can completly change/get removed in upcoming framework versions. Most of them can also not be found in the API. The mothod you are looking for is clearTip()

Call it on each button instance from which you want to remove the tooltip. That should work.

I totally have overseen your first question: You should consider to remove the scroll behavior from the viewport by using autoScroll: false or disabled it from the grid by using viewConfig: { autoScroll: false, scroll: false }

Upvotes: 2

Related Questions