31350

Changing scroll-bars in ExtJs

Question:

I'm using ExtJs and trying to change look of the default scroll-bars (for Grid Panel).

I tried using jScrollPane, but it's not working at all with ExtJs.

Is there any way to change look of default look of scroll-bars in ExtJS. I wont to achieve look similar to jScrollPane

Thanks!

Answer1:

I stumbled across this post while looking to implement jScrollPane on the extjs 4.0.7 grid

I couldn't find anything else suitable, and I now have this terrible hacky way of doing it:

Apply this to your grid config

scroll: false

And this to your grid's viewModel

style: { overflow: 'auto', 'overflow-x': 'hidden' }

so that the internal scrolling is switched off.

Apply this function to your grid that extends Ext.grid.Panel

reapplyScrollbar: function () { var items = $('#' + this.id + ' .x-grid-view'); var broken = $('#' + this.id + ' .jScrollPaneContainer:not(:first-child)'); var unbroken = $('#' + this.id + ' .jScrollPaneContainer:first-child'); console.log('unbroken count=' + unbroken.length); console.log('removing ' + broken.length + ' broken containers'); broken.remove(); // grid resized so scroller must be removed if (items.parent().is('.jScrollPaneContainer') && items[0].parentNode.clientHeight != items[0].clientHeight) { console.log('moving el up to grid body'); var container = items.parent(); var gridBody = items.parent().parent(); gridBody.append(items); container.remove(); if (items[0].parentNode.clientHeight != items[0].clientHeight || items[0].parentNode.clientWidth != items[0].clientWidth) { items[0].style.height = items[0].parentNode.clientHeight + 'px'; items[0].style.width = items[0].parentNode.clientWidth + 'px'; console.log('moved el and reset height & width'); } } else if (items.length > 0 && items[0].clientHeight > 0 && unbroken.length == 0) { if (items[0].parentNode.clientHeight != items[0].clientHeight) { items[0].style.height = items[0].parentNode.clientHeight + 'px'; items[0].style.width = items[0].parentNode.clientWidth + 'px'; console.log('reset height & width'); } console.log('applying scroll'); items.jScrollPane(); items[0].style.top = ""; } }

The general idea is that layout is called way too many times to know what's going on internally, so we'll check the condition of the grid view. If the grid view has a different height to its container then the jScrollPane needs re-applying (and the old one removing). Internally something happens that means the jScrollPanes get orphaned, so we remove orphaned ones.

When store records are added and removed I'm also calling reapplyScrollbar.

Naturally although this works it is very nasty. Eventually I'll do it somewhere deeper by changing the rendered markup.

Answer2:

I manage to use jscrollpane with extJs GridPanel.

In render listener of Grid Panel I put

$(function(){ $('.x-grid3-scroller').jScrollPane(); });

Recommend

  • jQuery - .always() callback firing too soon
  • Nuget pack does not recognize $version$ in dependencies
  • Stable Django-Haystack + elasticsearch setup
  • Shared Preferences data remains stored if phone is switched off or battery is taken out?
  • Flask-Restful error: “as_view” method not inherited
  • Visual Studio 2008 and JavaScript brackets formatting
  • OpenOptionsMenu not working with ActionBarSherlock Custom SubMenu
  • How to remove left and right margins from all wrapped rows in flexbox (without nth-child or js)
  • composer dependency stating in doesn't have php-xsl
  • Get the last date of each month in a list of dates in Python
  • Cypher - matching two different possible paths and return both
  • Hibernate to update table schema
  • ListItem.Attributes.Add not working
  • How to use JavaScript to determine whether a file exists in a directory?
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Jackson Parser: ignore deserializing for type mismatch
  • Highlight and Bold text in JTextPane
  • Change multiple background-images with jQuery
  • how to do an event when i swipe from fragment to the other
  • Projection media query: browser support and workarounds?
  • Android screen density dpi vs ppi
  • Deselecting radio buttons while keeping the View Model in synch
  • Deleting and Updating values from a cusrsor adapter
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Trying to switch camera back to front but getting exception
  • Akka Routing: Reply's send to router ends up as dead letters
  • php design question - will a Helper help here?
  • Cannot Parse HTML Data Using Android / JSOUP
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Getting Messege Twice Using IMvxMessenger
  • Authorize attributes not working in MVC 4
  • unknown Exception android
  • EntityFramework adding new object to nested object collection
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?
  • How do I use LINQ to get all the Items that have a particular SubItem?