I've created some simple example with ExtJS drag-b-drop, it available here.
And there is some issue - I cannot drag draggable divs from side panel (or region) - draggable div stays under the center region. Is that a bug in Ext or something wrong in my code?
I've done in hacking way. It looks like this
In short, I appending element to document body tag - and dragged element displayed fine.
Related
I tried ngDraggable https://github.com/fatlinesofcode/ngDraggable
but it does not work if I do not have a list of draggable elements (I do not)
I need to drag a div to another div.
Is there a react directive that is simple to use and works with single element drag?
I basically want to drag a div to the timeline taken from: http://ngmodules.org/modules/angular-horizontal-timeline
which means that I will need to make the timeline droppable.
Can I have some pointers on this please?
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'm using extjs 4.0.7 library. I have created UI as follows.
Landing page is a panel with border-layout.its north region have a panel with id: 'filterPanel'. This panel have a 'multiselect' component. Center region of landing page a tab panel, each panel having a grid.
Landing page has a listener, afterrender, on this listener I made filterPanel as collapsed by using Ext.getCmp('filterPanel').collapse().
The issue is, system not showing vertical scroll-bar when I expand 'filterPanel'.
If I remove panel collapse code from listener, scroll-bar is displaying.
Our requirement is filterPanel should be collapsed while rendering the UI, that's why I tried to collapse filter panel on landing-page afterrender listener.
Is this approach correct?
Regards,
Ajil
I got a work around for this issue. The steps which i followed is given below,
Add an expand listener for the panel here its 'filterPanel'
Remove all element from multiselect component store.
Reload multiselect store.
I'm sure its not a good fix , but time being its work for me.
Thank you all.
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
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)/