I've been looking into implementing custom scrollbars into ExtJS. I've tried the ExtJS Scrollpane port found here: http://www.sencha.com/forum/showthread.php?86071-Ext.ux.ScrollPane, as well as trying to use jQuery along with ExtJS like shown here: Changing scroll-bars in ExtJs.
I haven't been able to get it working though and was wondering if there is anyone has experience getting custom scrollbars into Ext JS that can lead me in the right direction.
Thanks!
You shouldn't apply the
$(function(){ $('.x-grid-view').jScrollPane(); });
in the render or afterrender listeners. At that point the store of the grid has not loaded yet. You have to put this code where the store has already loaded the data.
The reason why in firebug you could make it work is because at the time the store is already loaded.
Btw, I got this working in Extjs 4.2.
Here's an example of someone who got iScroll integrated with ExtJS. It includes code samples and a working demo.
you can try FleXcroll or jsscroll bar work well with Ext js
Related
I can't seem to find the correct set of scrollView options to disable the overscroll/bounce effect. I'm using the last example on this page:
https://famo.us/integrations/angular/docs/unstable/api/directive/faScrollView/index.html
End goal is to have a sidebar menu like every single app ever made in the last 5 years. You would think it would be a more popular example for this framework, but I can't seem to find any useful ones for FA.
I have been told multiple times that setting edgeGrip : 1 in the options will make it no longer bounce. It doesn't work for me and no ones showed me a fiddle where it does work. I don't use the angular integrated version of famo.us so I'm not sure I can be of much help.
I personally used a generic sync and built a scrollview with that. Its similar to how the draggable works. Which is what i suggest, the draggable can give you a 'scroller' without a bounce. The down side is it won't be smart enough to not render things outside it's view. For my use I was building a form that was maybe twice the height of the screen and it works fine. If you want the non angular / straight famo.us version I use let me know. Hope the edgeGrip works for you.
I am trying to put a map from Openlayers 3 into a stack container which is being supplied by Dojo. But apparently there is no map being displayed until one resizes the main (browser) window.
There are no obvious errors on the Javascript console.
I made a jsfiddle: http://jsfiddle.net/q989r/
If I create the map in the same way but without all the Dojo stuff it works. I have also tried to put a distinct DIV#map for the map within DIV#center2D.
I found this similar issue: Dojo stackContainer is not displaying children until window resize but in these answers their suggestions are based on the fact that the ContentPane is created programatically which is not the case here. Anyway a
dijit.byId('view2d').startup()
nor a
dijit.byId('view2d').resize()
did not help.
So what am I probably missing? This is intended to work, right?
It appears that there is some strange logic (maybe bug) with Dojo containers that are not visible (this hint came from the Dojo IRC #neekfenwick):
Changing the order of the Applicationstack.forward() and createMap() calls did the trick. You can find an updated and working fiddle here: http://jsfiddle.net/q989r/1/
I am working on a project of mine and I've always wanted to incorporate a feature where the
div's on my home page would resize and rearrange automatically (as I resize the browser). Now I know HTML and CSS but not much of any of the other language to make this happen.
What I am talking about is here http://themes.elmastudio.de/renkon/ (try resizing the browser).
Can you please explain how this works or at least refer me to a website where I can learn more, even a tutorial?
Thanks a bunch.
It looks like the site you referenced is using a JavaScript library called Masonry: http://masonry.desandro.com/. They provide some intro documentation on how to use the library here: http://masonry.desandro.com/docs/intro.html. If you need help getting started with JavaScript and jQuery, I recommend the W3Schools tutorials.
I'm having trouble understanding the Foundation 4 JS docs sorry - if I use this:
$(document).foundation();
Every thing works great, but If I use this:
$(document).foundation('orbit', {bullets:false});
The bullets get removed from orbit but then none of the other javascript works (the responsive .toggle-topbar or the custom forms #customDropdown).
I've also tried this:
$(document)
.foundation()
.foundation('orbit', {bullets: false});
But then all the JS works but the bullets don't get removed.
I'm just not sure how it works sorry, any pointers in the right direction would be much appreciated.
Cheers
Ben
Your suggested answer #CMSCSS, while it works for you, is not accurate in general, especially this part:
if you initialize one plugin with options (e.g. Orbit) your have to
initialize all the others you want to use or they won't run
The reason that custom styles or behaviors won't work or won't be applied is because of the order in which you initialize foundation and its components. To make everything work, your custom styles/behavior and foundation in general, you should do the customization first then initialize foundation. You can go to one of my answers and see how you can make it work. My answer was never accepted but it's a proven solution. I do it that way and it works. On a page I have an orbit, custom forms and grid layout and all work using the given technique. Hope that helps you.
So figured out that if you initialize one plugin with options (e.g. Orbit) your have to initialize all the others you want to use or they won't run like this:
$(document)
.foundation('dropdown topbar forms')
.foundation('orbit', {bullets: false});
I was wondering whether anyone knew of a JavaScript alignment system like the one on this page: http://trilancer.com/jpolite2/index1.html where you can drag the modules on the page into place? Thanks in advance.
jQuery UI Sortable provides something pretty close to this.
See the portlets demo here.