ExtJS 4.0: Keeping a row at the top position in a GridPanel

I’ve had the need for a grid I am working on keep a row representing the user currently logged in as the top row in the grid. Mind you there is no paging on this grid. I am using a slightly outdated version of ExtJS, i.e 4.0. I tried listening to the viewready event on the grid itself or its view but those events were not firing. Seems the viewready event is only available on the view as of ExtJS 4.1. To alleviate this problem the next best thing available to me was the refresh event, which event though would be called many times over did the job of informing me of when the view rows are actually displayed, which the afterrender event does not provide.

I ended adding the following listener to my grid’s viewConfig definition:


viewConfig:{
     loadingUseMsg:true,
     listeners:{
          refresh:{
                fn:me.moveUserRowToTop,
                scope:this
          }
    }
}

and the moveUserRowToTop function does this:


moveUserRowToTop:function(gridView, eOpts)
{
var store = gridView.getStore();
var currentUserRecordIndex = store.find('id',currentUser.get('id'))
if(currentUserRecordIndex > 0)
{
    var currentUserRecord = store.getAt(currentUserRecordIndex);
    store.removeAt(currentUserRecordIndex);
    store.insert(0, [currentUserRecord]);
    gridView.refresh();

}

}

So as you can see even though the event gets fired a lot depending on your grid usage, mine is average it will only move the row if it is present and at an index greater than 0, which is exactly my use case.

Hope it helps

Advertisements

ExtJS: Reloading a Combobox’s Store using OnTriggerClick

I am working on an application where i use a grid and have a combobox outside the grid whose selections are based on the selected rows within the grid. Basically the content of the combobox is dynamically updated based on the selection of rows. I’ve tried many ways of going about solving this problem since as usual i started getting Javascript errors in IE6. I first thought and tried to override the onTriggerClick function of the combobox, but i kept getting this bug where the first click on the trigger did not display the return list of values, but instead displayed a very thin blue box, and any subsequent click would then actually load the store and display the values correctly. Unable to find a solution i gave up on this approach and then tried to use the expand event to reload the combobox’s store. There i also encountered a bug where i would get an “Object is undefined” error in IE while clicking to trigger the combobox. I then did some research on the Sencha forum and then tried moving my code inside the beforequery event listener of the combobox. This worked like a charm.

For code example and a more detailed explanation, check the thread on the Sencha forum:

http://www.sencha.com/forum/showthread.php?119029-Reloading-a-Combobox-using-onTriggerClick&p=552445#post552445