What is the proper way to scroll a grid horizontally on load.
I want to scroll to a particular grid column on load.
I can focus the column I want using this:
dataStore.on('load', function() {
var cl = dataGrid.columns[43];
cl.focus();
});
but the grid does not scroll when I do this.
One possibility is to use scrollByDeltaX. Example:
viewready: function(){
var c = this.columns[5];
var p = c.getPosition();
this.scrollByDeltaX(p[0]);
}
Working sample: http://jsfiddle.net/YRraU/2/
Related
I have a long tabBar which is horizontal scrollable , I want the selected tab to align at left most side. For example if I select the middle the tab it should be visible at the left most side. And I have next and previous buttons to select the next and previous tabs. So if any tab right to the Left most tab is selected by clicking the prev button now it should be visible at left most side. Overall i want the selected tab to be visible at left most side.
Any help would be greatly appreciated.
I worked around it and got a solution a little trick in the activeitemchange of the tabpanel will do the task
TabPanelActiveItemChange: function (container, value, oldValue, eOpts) {
var count = container.innerItems.length;
var currentIndex = Ext.Array.indexOf(container.innerItems, value);
var tabBar = container.getTabBar();
// to keep the selected item in left or visible in smaller width screen.
var totalWidth = container.innerItems[count - 1].tab.element.getX() - container.innerItems[0].tab.element.getX() + container.innerItems[count - 1].tab.element.getWidth();
if (totalWidth > window.innerWidth) {
var widthToScroll = container.innerItems[currentIndex].tab.element.getX() - container.innerItems[0].tab.element.getX();
var scroller = tabBar.getScrollable().getScroller();
scroller.scrollTo(widthToScroll, 0, true);
}
Easiest if you have a fix size of tabButtons.
That way you could calculate on how much you have to scroll to the side.
A good start will be to set the tabBar.setScrollable({direction:'horizontal'}).
But anyways. It seems bad design for phone's or tablets. You should come up with another idea.
I see that in code jssor slider:
var jssor_slider2 = new $JssorSlider$('slider2_container', options);
Here "slider2_container" is a id. I want use "class" replace for "id" .
How to i can do it ?. Because i used multi slide in a page. So that if it is "id" , it only run slide first , remainder not working. Help me !
You can use different id for different slider.
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
var jssor_slider2 = new $JssorSlider$('slider2_container', options);
Reference: Jssor non-jquery slider. multiple slider on one page
Please take a look at my jsFiddle here
I am using jQuery Isotope plugin and I am having troubles using their itemPositionDataEnabled to be able to scroll from my clicked item to the top of whats currently visible in the browsers window.
With itemPositionDataEnabled I should be able to extract the x and y position of what ever item I'm requesting. However mine does nothing at all....
var $this = $(this),
scrollTop = $(window).scrollTop(),
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y,
distance = (itemPositionY - scrollTop);
$('html, body').stop().animate({
scrollTop: distance
}, 1000);
You have a plain and simple error in these two lines:
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y;
The second line should be:
itemPositionY = itemPosition.y;
Not sure if you're all the way there since it only seems to work on the way you want on the first click.
http://jsfiddle.net/EA8tM/90/
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();
Can anyone help me with a link where I find Dojo sliding panel ? I have been searching for it but still didn't got it. I have sliding panel for jQuery, I got it from this link : http://web-kreation.com/all/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27/
You could make use of the dojo.fx.wipeIn functionality.
http://dojotoolkit.org/reference-guide/1.7/dojo/fx/wipeIn.html
So if you create two divs, one above the other, have the top one with display: none, and the other as the bit that you click to slide the panel down. Then use dojo.connect to link the clicking of the bottom panel to a wipe in of your top panel.
e.g.
// Have your main body content
var mainBody;
// Create top panel
var myPanel = document.createElement("div");
// Set visibility to none
dojo.style(myPanel, "display", "none");
// Create tab to expand your panel (or slide it down)
var expand = document.createElement("div");
expand.innerHTML = "click here to slide down";
mainBody.appendChild(myPanel);
mainBody.appendChild(expand);
var self = this;
dojo.connect(expand, "onclick", this, slidePanel);
Then you'd have your slidePanel function do something like:
// Get reference to your panel
var myPanel;
var wipeArgs = {
node: myPanel
};
// Then just wipe the panel in or out respectively
if (myPanel.style.display == "none") {
dojo.fx.wipeIn(wipeArgs).play();
} else {
dojo.fx.wipeOut(wipeArgs).play();
}