When I expand a collapsible panel within a layout it compresses the content of the panel next to it. I'd like instead to shift the content of the panel over so it is as if the collapsible panel is moving the content of that panel over to make room for it when it expands. I'm not looking for any animation effects, just the structural behavior of the content shifting. This demo (using jquery) illustrates the behavior I'm trying to achieve. http://srobbin.com/blog/jquery-pageslide/ Can I do this in Ext?
More info is in the ExtJs Forums: http://www.sencha.com/forum/showthread.php?43120-Ext.layout.SlideLayout-Sliding-Card-Layout-(Shift-Fx)/
Related
fiddle here.
If there are many panels in the accordion they vertically just start bumping up against each other and can't be expanded. I would like to make the total height of the accordion the height of the headers plus the height of one panel body (expanded). And then the parent panel should just have a scrollbar to show that amount of height. This way there is always an open accordion and you can scroll down to any header and instead open that one.
Is this not possible?
If I turn the layout of GroupListView to vbox intead of accordion I then get what I want but unfortunately when you expand/collapse the panels, the animations are all messed up (doesn't work like the accordion)
In ExtJS 5.1.1, setting fill: false on the layout declaration seems to produce the desired result.
Normally, the expand/collapse functionality in extjs works as the panel/grid header stays in a position and the body of the panel/grid moves down/up. But I need the panel header to be in a position and on expand, the header has to move up showing the panel/grid body. On collapse, the header has to move down and come to the original position. This is just like expand and collapse in accordian layout inner panel. But I want it with a single panel. Any code samples or pointer would be very helpful.
Note: Please note that I cannot use any third party plugin..
This sample in ExtJs 4.2.1.
One way to do what you are trying to achieve is by injecting "expander" div in afterrender event of parent panel before collapsible children. This means items are at the bottom of parent body after expander div so there is space to expand them up. When children are collapsed/expanded or parent is resized, injected div gets height of parent minus children.
You can see it here: https://fiddle.sencha.com/#fiddle/44c
Edit: I don't really get 1 panel part - if you want single panel to behave like that, expander could be injected into wrapper before header and content, but than you are left with panel of same size but collapsed - the only scenario this makes sense to me is by reversing collapse of children in sample I provided
I have this narrow panel which is basically a list of thumbnails, and i need to be able to scroll over them using buttons.
We have a panel (anchor layout), with containers in it, and each container contains the image.
there isn't space for a scrollbar, and anyway we don't want one.
I thought it would be as easy as in the listener for my button calling panel.getEL().scroll('b',20)
but this isn't working because the scrollHeight === ClientHeight so scroll does nothing.
Is there a technique I am missing or should this work?
So you're using a button to scroll through the images? What about having the button's listener remove/hide the containers/images at the front of the panel to allow the others to use the space?
In ExtJs4 Layout Examples how do they switch right panel content when user clicks on menu items? Are there any examples with code samples?
I want exactly the same feature.
They create content panel with layout 'cards', add all examples as individual panels in to it, and then make them visible when you click through them. Check the source code - it's pretty obvious.
I have a viewport with a tab panel in it. I'm trying to create a standard panel dynamically and make it visible. I'm able to create the panel and isVisible() returns true after calling doLayout on the viewport but the panel is not visible on the screen. Is there any way to make it visible (i.e., to hover above the tab panel)?
If you create the panel as a child of the document body and position it absolutely it should show above your existing layout. You could also (more easily) use an Ext.Window to do this.