Hide Text beim Scrollen unten auf der Seite, Sencha 3 ExtJS

Question

Ich füge einen Text "Bitte scrollen Sie nach unten" auf der Terms and Conditions-Webseite und der Text sollte ausblenden, wenn Sie den unteren Rand der Seite erreichen. Ich habe einen Container erstellt, der den Text auf der gesamten Seite unter Ansicht (Sencha Architect) anzeigt, aber nicht sicher, wie er nach dem Scrollen nach unten versteckt werden kann. Ich versuche eine Controller-Aktion unter Controllers zu erstellen, aber es funktioniert nicht. Beigefügt ist der Code für den Controller von TermsConditions. ItemID des Behälters Text enthalten ist Scroll

onAgreeClick: function(button, e, eOpts) { 
     var store = Ext.data.StoreManager.lookup('UserObjectStore'); 
     var match = store.first(), 
      showAnnouncements = match.get('announcementPageToVisit'); 
     if (showAnnouncements) { 
      button = this.getBtnAnnouncements(); 
     } else { 
      button = this.getBtnCustomerSearch(); 
     } 
     this.simulateHeaderButtonClick(button); 

     Ext.Ajax.request({ 
      url: '../abc/services/users/saveUser', 
      method: 'GET', 
      headers: { 'Content-Type': 'application/json' }, 
      success: function (response, action) { 

      }, 
      failure: function (response, action) { 

      } 
     }); 
    }, 
onDisagreeClick: function(button, e, eOpts) { 
     Ext.Msg.confirm('','You must agree to the Terms and Conditions in order to continue. Press YES to go back or NO to exit.', 
      function(answer) { 
       if (answer === "no") { 
        var h = abc.app.getController('HeaderButton'); 
        h.terminateApp('ok', null, null); 
       } 
      } 
     ); 
    }, 
BackToTaC: function(button, e, eOpts) { 
     this.getTermsBtnContainer().hide(); 
     this.getTermsBackContainer().show(); 
     this.getScrollContainer().hide(); 
     this.getBtnAnnouncements().toggle(); 
     this.getBody().getLayout().setActiveItem(6); 
    }, 
var me = this; 
dataview.getEl().on('scroll', function(e, t) { 
    if(t.scrollHeight - t.scrollTop - t.clientHeight === 0) { 
    } 

});// I already tried to hide under this but it doesn't work 
    onTermsBeforeShow: function(component, eOpts) { 
     var me = this; 
     var termsView = component.down('dataview'); 
     var termsStore = termsView.getStore(); 
     termsStore.getProxy().actionMethods = {create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'}; 
     termsStore.load(); 
      }, 

Answer 1

Ich habe für ExtJS-Panel ähnliche Anforderungen hatte und ich behandelt sie durch die Höhe des Gitters erhalten und die Höhe mit der aktuellen Y-Position des Gitters zu vergleichen.

im Panel-Seite hatte ich

var toBeAbsoluted = this.getHeight()/95 * 100; // approximation 95% seemed optimum in my case 
if(this.getY() >= (this.getHeight() - toBeAbsoluted)) 
buttonToHide.hide()