i have a window with grid panel as the content...
when the window first shown, my store is empty and i can't see the scrorllbar (good)
when i load the data to store, i can see the scrollbar (good)
when i remove all data from store, i can still see the scrollbar and scrollable. when exactly there's no data in view (bad)
so my question is my title, how to remove scrollbar after datastore removed
here is the demo
Its is a open bug. Sencha team promises to fix it it 4.0.7. Have a look at this discussion at Sencha forum.
One possible solution given in the forum, is to hide the scrollbar using hideVerticalScroller() method. I did try it on fiddle but was not successful 100% (may be something to do with fiddle). I had to click "remove data" button twice to remove the scroll bar:
handler:function(){
storeSr.removeAll();
gridSr.hideVerticalScroller();
}
On the forum, they suggest doing (And this works!):
storeSr.removeAll();
var data = [];
var store = gridSr.getStore();
store.loadData(data, false);
if (data.length == 0) {
gridSr.hideVerticalScroller();
}
Related
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.
I have a ng-grid that has scrollbars (default).
The ng-grid triggers the ngGridEventScroll event (api) when you are at the bottom of the grid.
So far so good but I want this behaviour when there are no scrollbars. The only way I could turn these scrollbars off is by using the ng-grid-flexible-height.js plugin but then the ngGridEventScroll event is ignored.
I there a way to get this event when you're at the bottom of the grid?
Are there other ways to throw your own custom event?
When using a custom event, the ideal situation would be to throw the event when you're at the last 'x' records (to preload data).
There is a jsfiddle here (with flexible height plugin enabled, to disable comment out: ,plugins: [new ngGridFlexibleHeightPlugin()])
Thanks for any input!
I checked the documentation and I dont think Ng Grid provides incremental loading. You ll need to write custom code for it.
You could use some jquery like as discussed here - Auto Load More Data On Page Scroll (jQuery/PHP)
$(window).scroll(function() { //detect page scroll
if ($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
{ // do your stuff here; }
});
Or better use a jquery plugin like this one - jQuery Waypoints | Example
We have two grids in a panel and we need to have their records to scroll together vertically. That is, if user scrolls any one of the grid vertically then other grid scrolls too.
Thus, what can be the way to bind their vertical scrollbars?
A solution for version 4.0.2a is present here but the functions used have been deprecated in 4.1 version and thus it does not work in the newer versions.
Could anyone guide on how to achieve this in ExtJs version 4.1.*?
Thanks for any help in advance.
I don't see anything handy in API, but still it's possible to hook up to html elements:
grid1.view.getEl().on('scroll', function(e, t) {
grid2.view.getEl().dom.scrollTop = t.scrollTop;
});
grid2.view.getEl().on('scroll', function(e, t) {
grid1.view.getEl().dom.scrollTop = t.scrollTop;
});
Working sample: http://jsfiddle.net/CSwAH/
Lately "Locking grid" has become available.
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.html
Easy to use and is useful too.
My answer comes 2 years later but it's for anyone who's looking for a good solution.
This seems an old post but I want to share my part of answer. See, when adding synching scrollbars, problem is the mousewheel scrolling is somewhat slow.
See this fiddle.
So, what I've come up with is to add a delay to the event:
grid1.view.getEl().on('scroll', function(e, t) {
grid2.view.getEl().dom.scrollTop = t.scrollTop;
}, grid1.view.getEl(), {delay: 50});
grid2.view.getEl().on('scroll', function(e, t) {
grid1.view.getEl().dom.scrollTop = t.scrollTop;
},grid2.view.getEl(),{delay: 50}); //50 seems fine for me. adjust if you must
I have a tree panel and am trying to do an animated scroll to certain locations. I'm doing something like this:
myTreePanel.getView().getEl().scrollTo('top', yCoord, true /*animate*/);
The view scrolls to the correct location, but the "slider" in the scroll bar doesn't move. Any ideas why?
Some additional info: if I do the following instead, the scrollbar slider moves correctly (but of course scroll() doesn't support animation--I'd prefer to use .scrollTo() so the user can see the scrolling):
myTreePanel.getView().getEl().scroll('down', yDiff);
Thanks for any help/advice!
#MoleculeMan's suggestion of disabling the custom scrollbars (which ExtJS uses in 4.0.x but not in 4.1) does work. After doing this you can call myTreePanel.getView().getEl().scrollTo('top', yCoord, true) and everything works as expected: scrolling is animated and the scrollbar moves. The only problem is that it seems to break the ability for the view to scroll if you use the up/down arrow keys to move through the tree.
It's not very elegant, but the work-around I'm going to use is this:
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Wait 300ms then sync the scroll bar with the tree view
setTimeout(function() {
myTreePanel.setScrollTop(yCoord);
}, 300);
This has the cosmetic disadvantage of the scroll bar "jumping" into place instead of smoothly moving with the animation, but the benefit of not breaking the up/down key scrolling. Also, because it doesn't involve changing config params or overriding the tree view's style, I'm assuming it will still work once we upgrade to ExtJS 4.1 (i.e., the timer call to setScrollTop() will be unnecessary but shouldn't break anything).
Note that calling setScrollTop() moves the scrollbar, but also causes the view to "jump" to that position. You therefore need to ensure that the timer doesn't fire until after the animation finishes. I'm actually using some custom code to poll every 10ms and see if the destination row is visible, then calling setScrollTop(), instead of using a timer that always waits for some hard-coded amount of time:
var scrollToRowNum = 5;
var scrollToEl = getElementForNode(myTreePanel.getRootNode().childNodes[scrollToRowNum]);
var yCoord = scrollToEl.getOffsetsTo(scrollToEl.parent())[1];
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Check every 10ms to see if animation is done, then sync scrollbar
var timerId = setInterval(function() {
if( myTreePanel.isTreeElementWithinVisibleArea(scrollToEl) ) {
clearInterval(timerId);
myTreePanel.setScrollTop(yCoord);
}
}, 10);
The isTreeElementWithinVisibleArea() function just checks to see if element's current Y coordinate (absolute) is between the top and bottom of the tree view box.
Not surprising. They use their own scrollbar. The correct code would be:
myTreePanel.verticalScroller.setScrollTop(yCoord);
However, it doesn't support animation either. So I recommend to get rid of custom scrollbar as I've described here and use your original code.
I am using sencha to update a panel as follows.
I will have a handler for a button.
In that i am removing a docked panel from a panel. and then adding the some new panel as a docked item.
But the contents of the panel are not appearing. They are appearing only when i change the size of the browser window, i.e., maximize it or restore it.
How can the problem be solved?
The code for the problem is as shown below.
handler: function(){
chaptersPanel.removeDocked(chaptersList[chaptersPanel.getStory()]);
chaptersPanel.insertDocked(0,chaptersList[this.no]);
chaptersPanel.setStory(this.no);
chaptersPanel.doLayout();
mainPanel.setActiveItem("chaptersPanel");
}
YOu need to do a doComponentLayout() sometimes. Sencha Touch is a little flakey about it. doLayout is supposed to handle the componentlayout, but it doesn't always