Israel Portillo Posted November 8, 2016 Share Posted November 8, 2016 How to implement or simulate a "Go to top" floating button in a scrollable form for a mobile application ? Thanks for your time Link to comment Share on other sites More sharing options...
Sherzod Posted November 8, 2016 Share Posted November 8, 2016 Hi, ... can you try this ?: procedure TMainmForm.UnimBitBtn1Click(Sender: TObject); begin UniSession.AddJS(MainmForm.WebForm.JSName + '.getScrollable().getScroller().scrollToTop(true)'); end; Best regards. Link to comment Share on other sites More sharing options...
Israel Portillo Posted November 8, 2016 Author Share Posted November 8, 2016 Thanks for your fast and wise answer..... Im now figurating how to implement a small right bottom float bitbtnbutton across all the scroll form.... How implement a like "OnScroll" event or something similary.... And I accept suggestions...... Anyway thanks... It good to have your backup in our dary work. Link to comment Share on other sites More sharing options...
Sherzod Posted November 8, 2016 Share Posted November 8, 2016 Hi, Can you try this ?!: 1. MainmForm -> Scrollable -> True 2. UniServerModule -> CustomCSS: #back-to-top { position: fixed; bottom: 40px; right: 40px; z-index: 9999; width: 32px; height: 32px; text-align: center; line-height: 30px; background: #f5f5f5; color: #444; cursor: pointer; border: 0; border-radius: 2px; text-decoration: none; transition: opacity 0.2s ease-out; opacity: 0; } #back-to-top:hover { background: #af286d; color: white; } #back-to-top.show { opacity: 1; } 3. MainmForm -> ClientEvents -> ExtEvents -> window.painted fn: function window.painted(sender, eOpts) { var me = this; var aTopEl = new Ext.Element(document.createElement('a')); aTopEl.setId("back-to-top"); aTopEl.setHtml("↑"); aTopEl.dom.title = "Back to top"; document.body.appendChild(aTopEl.dom); aTopEl.hide(); me.getScrollable().getScroller().addListener('scrollstart', function(a) { Ext.defer(function() { if (a.position.y > 50) { $('#back-to-top').addClass('show'); $('#back-to-top').show(); } else { $('#back-to-top').removeClass('show'); $('#back-to-top').hide(); } }, 1000) }); $('#back-to-top').on('click', function(e) { e.preventDefault(); me.getScrollable().getScroller().scrollToTop(true); $('#back-to-top').removeClass('show'); $('#back-to-top').hide(); }); } Best regards. Link to comment Share on other sites More sharing options...
Israel Portillo Posted November 9, 2016 Author Share Posted November 9, 2016 Thanks Master... Link to comment Share on other sites More sharing options...
mjcramos Posted June 9, 2017 Share Posted June 9, 2017 Hi, I implemented this tip in a UnimDBListGrid it worked nice, but when I change the screen the button keeps showing up, is there any way to make the button disappear via code? Link to comment Share on other sites More sharing options...
Sherzod Posted June 10, 2017 Share Posted June 10, 2017 Hi, Can you try to use this through AddJS: $('#back-to-top').removeClass('show'); $('#back-to-top').hide(); Best regards, Link to comment Share on other sites More sharing options...
mjcramos Posted June 11, 2017 Share Posted June 11, 2017 Perfect, it worked, thank you. Link to comment Share on other sites More sharing options...
Ken_Sowyer Posted January 31, 2018 Share Posted January 31, 2018 I made this in a TUnimDBListGrid. And included a back-to-bottom button, but for this I have to know the scroll size to calculate. But can't figured out. Like, if (a.position.y > element.scrollHeight) { $('#back-to-top').addClass('show'); $('#back-to-top').show(); } I tried many x.scrollHeight, but nothing works... Thanks in advance! Link to comment Share on other sites More sharing options...
Ken_Sowyer Posted January 31, 2018 Share Posted January 31, 2018 Never mind, just find out with "me.scrollableBehavior.scrollView.getScroller().maxPosition.y" Thanks! Link to comment Share on other sites More sharing options...
GRFS2000 Posted April 18, 2018 Share Posted April 18, 2018 As this code would be in the new uniGUI, I tested the new version and it does not work. Where to look for a reference of what has changed from extjs 4 to 6, in order to facilitate our migration. Link to comment Share on other sites More sharing options...
Sherzod Posted April 18, 2018 Share Posted April 18, 2018 Hi, Can you try with these changes? function window.painted(sender, eOpts) { var me = this; var aTopEl = new Ext.Element(document.createElement('a')); aTopEl.setId("back-to-top"); aTopEl.setHtml("↑"); aTopEl.dom.title = "Back to top"; document.body.appendChild(aTopEl.dom); aTopEl.hide(); me.getScrollable().getScrollElement().addListener('scroll', function() { Ext.defer(function() { if (me.getScrollable().position.y > 50) { $('#back-to-top').addClass('show'); $('#back-to-top').removeClass('x-hidden-display'); $('#back-to-top').show(); } else { $('#back-to-top').removeClass('show'); $('#back-to-top').addClass('x-hidden-display'); $('#back-to-top').hide(); } }, 1000) }); $('#back-to-top').on('click', function(e) { e.preventDefault(); me.getScrollable().getScrollElement().dom.scrollTo({top:0}); $('#back-to-top').removeClass('show'); $('#back-to-top').hide(); }); } Link to comment Share on other sites More sharing options...
GRFS2000 Posted April 18, 2018 Share Posted April 18, 2018 perfect thank you! But I made an adjustment for my application, so at the end of the list it loads more products. it is perfect. function painted(sender, eOpts) { var me = this; me.getScrollable().getScrollElement().addListener('scroll', function() { Ext.defer(function() { if (me.getScrollable().position.y = me.getScrollable().getSize()) { ajaxRequest(me, 'getProdutos', []);} }, 1000) }); } I hope I did it right, if you have suggestions you can send me, thank you. Link to comment Share on other sites More sharing options...
Sherzod Posted April 18, 2018 Share Posted April 18, 2018 It is better to use scrollend event instead of "me.getScrollable().getScrollElement().addListener('scroll', function() {...}) me.getScrollable().on('scrollend', function(){ ... }) Link to comment Share on other sites More sharing options...
GRFS2000 Posted April 18, 2018 Share Posted April 18, 2018 rs rs rs rs, I had tried, but I had not put that .ON My friend, where do I find this information! Link to comment Share on other sites More sharing options...
GRFS2000 Posted April 18, 2018 Share Posted April 18, 2018 function painted(sender, eOpts) { var me = this; me.getScrollable().on('scrollend', function(){ ajaxRequest(me, 'getProdutos', []); }); } It was like this. but when rolling 50% it already makes the call ajax. Link to comment Share on other sites More sharing options...
Sherzod Posted April 18, 2018 Share Posted April 18, 2018 No Link to comment Share on other sites More sharing options...
Sherzod Posted April 18, 2018 Share Posted April 18, 2018 function painted(sender, eOpts) { var me = this; me.getScrollable().on('scrollend', function() { Ext.defer(function() { if (me.getScrollable().position.y = me.getScrollable().getSize()) { ajaxRequest(me, 'getProdutos', []); } }, 1000) }); } Link to comment Share on other sites More sharing options...
Sherzod Posted April 18, 2018 Share Posted April 18, 2018 Just for performance, this event occurs when the scrolling stops Link to comment Share on other sites More sharing options...
GRFS2000 Posted April 18, 2018 Share Posted April 18, 2018 the code is wrong. I checked via console.log. the value of (me.getScrollable () position.y === me.getScrollable (). getSize () y) It's never the same, and I did not figure out how to make the adjustment, for Desktop I thought, but Mobile did not. so I did a multiplication by 0.9 to adjust. Do you have a solution to this difference? var me = this; me.getScrollable().on('scrollend', function(event) { Ext.defer(function() { console.log('posfora:' + me.getScrollable().position.y); console.log('sizefora:' + me.getScrollable().getSize().y); if (me.getScrollable().position.y >= (me.getScrollable().getSize().y * 0.9)) { console.log('posDentro:' + me.getScrollable().position.y); console.log('sizeDentro:' + me.getScrollable().getSize().y); ajaxRequest(me, 'getProdutos', []); } }, 1000) }); Link to comment Share on other sites More sharing options...
SISBLU Software Posted August 16, 2019 Share Posted August 16, 2019 I couldn't either. can anyone help? Link to comment Share on other sites More sharing options...
Recommended Posts