如何滚动到Ext JS 3.4网格的底部？

Question

i have a grid panel (with Ext.ux.grid.RowEditor panel inside) and I want to scroll to the bottom (near the bottom my Ext.ux.grid.RowEditor is not shown completely),

this piece of code is not working:

this.MyGrid.getView().on('scrollToBottom', function(){
        var inputEl = this.MyGrid.el.dom;
        inputEl.scrollTop = inputEl.scrollHeight;
    }, this);

.....

and then when pressing save button i fire event:

this.MyGrid.getView().fireEvent('scrollToBottom',this);

any ideas why it's not scrolling? thanks!

Answer 1

The .on() function is used to set up a listener function for an event, not add a custom event. Similarly, the .fireEvent() function is used to trigger an event on an object. AFAIK you can't define you're own events, and there is no "scrollToBottom" event in ExtJs.

What you'll want to do is define your scrollToBottom code as a function, and then call this from your save button click handler

Answer 2

Please try to add an event to your grid using addEvent method(using init) and then add the event as the listener to your grid. Fire the event whenever necessary(In your case when user hits the save button.) using fireEvent method and subscribe it in your listener.

Example code looks like the below(You have to add this event and then fire it.) Adding the event in the init component looks like below(in the below this refers to grid scope)

this.addEvents('SCROLL_TO_BOTTOM');

You have to subscribe the event and set your scroll height for your grid.Add the below listener to your grid.

listeners: {
         'SCROLL_TO_BOTTOM': this.handleScroll,
         scope: this
         }

Function for handling the scroll

 handleScroll:function(){   
           var inputEl = this.MyGrid.el.dom;
           inputEl.scrollTop = inputEl.scrollHeight;
         }

Hope this helps you...

Answer 3

i have found the solution! no additional events and listeners, just

var inputEl = this.myGrid.getView().scroller.dom;
inputEl.scrollTop = inputEl.scrollHeight;