I am working with Sencha Architect 3.1 , and i am facing an issue with Tree Panel collapse.
There is a view port with Border layout .
In the west region there is one Tree Panel and Panel with same width.
I have an event listener for click of leaf node in a Tree Panel in which i will give this.collapse(),
but when the Tree Panel is expanded next time it moves towards the right.
Here is a sample fiddle which i have done which has the same problem.
Please help me to find solution for this problem.
The big problem here is that you are attempting to collapse the TreePanel.
Let's take this in steps as to better understand the issue. There are 2 different options for the user to see the Tree Panel in your example.
The first would be to click the expand button tool within the header on the left side. But in this case the expand/collapse button tool has been hidden. Thus this way is not possible.
The second is to click anywhere(else) within the header along the left side.
The above methods for the user result in very different behaviors. If the first option were used, the panel would "expand", resulting in the other panels being pushed to the right so that the Tree Panel could be shown. If the second option were used, the panel would "float" over the existing panels.
I suggest you set hideCollapseTool: true and give the these two options a try to see for yourself.
With with knowledge, it should be easy to understand that performing this.collapse() is the incorrect way to "hide" the Tree Panel, because the panel was never expanded. Because it was not expanded, attempting to collapse the panel results in the x location of the Tree Panel to get offset incorrectly (Sencha should have error checking here, but obviously not).
So, the answer to question is to simply change this.collapse() to this.hide(). Unfortunately, there is no good way to tell the panel to unfloat itself and animate away. Either I don't know which method to call or Sencha has overlooked this issue.
I hope this was clear.
Related
I made the following component in Angular.
It's basically a kind of tree component.
Please note the following:
The tree has several branches.
It consists of nodes in alternating colors.
And the selected node is marked by a blue dot.
The tree does not fit the screen, that's why there's a horizontal scroll bar.
Each node has a unique id (i.e. <div id="...">)
This component works fine, however. I don't know how to add the following feature:
When the focus changes, (in other words, a different node becomes active), I want this node always to be visible on the screen. That means that the webbrowser has to scroll to the left or right, automatically whenever a node is selected. It has to scroll or jump until the specific <div> is visible.
How can this be done using javascript or typescript ?
EDIT:
I want to use this javascript is the base for better navigation tools.
button to move back and forth in the tree
button to jump 10 nodes to left/right.
button to jump to the back.
button to jump to the start.
Also when a new node is added to the back of the tree, right now the user has to scroll all the way to the right, manually. I want it to be visible immediatly, automatically.
Those are my real objectives :)
If the only scroll mechanism you need is the automatic one, I would avoid trying to use the browser's built in scrolling mechanism altogether and just use ElementRef of the node to get its horizontal position relative to its container, and then apply a CSS 'translate' to move it as needed. It will be much easier this way to have it look "nice" with CSS transitions and animations. But if you would still need manual scroll behavior (i.e, the user still needs to be able to scroll with a scrollbar) youd have to program a scrollbar directive / solution as well, which may end up being more effort than the problem demands.
This page has a sort of hacky workaround for horizontal scrolling - https://css-tricks.com/pure-css-horizontal-scrolling/
The problem for me in the past with 'scrollTop' and 'scrollLeft' is you can't apply transitions to those attributes, so they end up looking very jerky without implementing custom easing functions in javascript.
I'm looking for a good way to realize a sort of breadcrumb navigation through a database using Semantic-UI (on top of Django, if that matters). The idea is to click on a link toggling the first sidebar, showing a dataset with in a form with each data offering a link to dig further down, opening the dug down data in another sidebar, shifting the parent further to the left. So in the end you end up with a horizontal "timeline" of sorts, made up of sidebars (or something else) that the user can then step back through, shifting everything back to the right.
The default sidebars seem to always overlay each other, so basically the question is, how do you make new sidebars shift existing ones?
I have one window with border layout. In center I am using panel on which loading grids based on the selection of tabs from west side. Now the problem is when I am loading grid then grids are one on top of another. And then I need to scroll down to check complete grid. I want to see grid in panel if suppose i sellect second tab, first grid should move up and second grid should come into view.
I have used many methods but not getting success.
One of the code where I am getting bit of success,
onSelectionBtnClick : function(btn){
grid = me.someGrid(headersNode);
me.gridContainer.setLoading(false);
grid.body.dom.scrollIntoView(); // This line is for view
}
Here grid is coming in view but only in debugger, once I come out from debugger It coming same as previous. Can any body suggest what I am doing wrong.
Posted a question yesterday regarding BootStrap and panel collapsables being very dodgy in the fact graph sizes were messing up. It got locked due to there being no code. I have created a code snippet for you guys which demonstrates the exact problem I'm having: http://jsfiddle.net/oeq980ts/1/
<p>the code is on jfiddle :) </p>
For reference this is my post from yesterday https://stackoverflow.com/questions/36109483/collapse-in-bootstrap-issue
put the problem is pretty clear form running the jsfiddle: compare collapse 2 to collapse 1.
Yesterdays post:
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
I was playing around with collapse via Bootstrap and came across a strange interaction with .collapse(Hides the content) and .collapse-in (Shows the content).
By default I set collapse1 as .collapse-in meaning the contents inside it would show: the insides contained a graph (min-width:310px; height: 400px). Fit perfectly, I opened up the collapse2 and to my dismay the same graph was shown very undersized with the width being almost half the size. After playing around with it - the graphs will only show in its proper size when the class collapse is used, otherwise if the class is just panel-collapse collapse, and you click on the collapse to show the contents it will show a completely disproportionate size.
Oh and I should add if .collapse-in is set then the user can collapse/uncollapse and the graph set with collapse in will still display. Bit unfortunate for those who don't want the contents being showed by default.
Probably not going to use this anyway, however I was just really interested in the reasoning behind it.
You can do something like this:
Steps:
Make them all shown up at first load (I mean add in class in collapse div) - This will make them fix by their own, Fitted to it's container as you wish. So collapses will be something like this:
<div id="collapse2" class="panel-collapse collapse in">
Then hide them using jQuery( remove class in to all div that you want to be hidden )
$(document).ready(function(){
$('.collapse').not(':eq(0)').removeClass('in');
});
In here, I just imitate what you did in your fiddle, I hid the first collapse.
Check your jsFiddle again.
I am using dojo to render the panels on UI. I am facing one issue. All the panels get rendered on UI for few seconds(around 1~2 secs). After that I am getting a blank white screen. Now if I want to see the panels I've to do dragging the splitter OR maximize/restore that pane. I.e. basically I need to play with the width so as to get back the disappeared panels.Please suggest some solutions over this.
It would be better if you can provide more information in your question, your code is better. Otherwise, it is hard to tell what exactly cause this issue.
But you can try add resize call of the container of your panels somewhere after you startup this container.