Creating draggable panels - sencha-touch

I want to create a panel which has three child panels which can be dragged to left side only. when they are fully visible( when they are completely appear on the parent panel), the parent panel should be desabled ( I used modal config, but the child panel overlay on one another and they resized to the html content inside them). When three child panels were dragged to the left side, the parent panel should be enabled. User may again drag those child panels right to the initial position, then the parent panel again should be desabled. I could only create the child panels with the sliding effect, but don't know how to acheive other requirements, coz i am new to sencha touch and extjs. Are there any other resources to learn more about sencha and ExtJs?
And other thing is, as an example, Sencha docs dont explain more about Draggable object's 'constraint' ,'direction' ..etc. where can I find more details about Those classed which are not fully described in their docs.
I have attached two images( initial look of the panels and how it should look when child panels are dragged), Can anyone give me few hints how to achieve my task?. Thank you very much!!

Related

Pass TappedEvent to a sibling controll in uwp

I have a user control with a bunch of buttons behind a scroll viewer that has a grid with a bunch of rows in it. The first row is empty. The buttons in user control need to respond to tap/click when not obscured by scroll viewer's content. My problem is that the scroll viewer caches the tap event and it is not passed to the user control because it is a sibling to the scroll viewer. I would like to somehow pass/propagate the tap event to the user control to get the buttons working. I can't find a good solution to this issue because there seems to be no RaiseEvent(e) method on UI elements in uwp. Due to specific requirements, the whole page needs to react to scroll and the buttons are required to be behind the scroll viewer content. Does anyone know if it is possible to pass the whole event to another element or somehow allow for both controls to handle it? Thanks in advance.

QT designer layout inside layout

I am not able to design below layout in qt -designer
So under main window , we have one horizontal Layout that have two vertical Layout and each vertical Layout have.
one horizontal Layout that contains combo box and push button
And another Listview widget
Since you didn't include any information about what steps you followed in trying to create this layout and what the final result was, it's impossible to tell where things go wrong. However, to create the layout as described in the post, you could do the following.
Step 1: Add widgets to form
In a new form in Qt Designer, roughly place the widgets where you want them to be in the final layout.
Step 2: Add widgets to layouts
Add widgets to layouts starting with the deepest nested widgets. In this case that would be the comboboxes and push buttons. To add a push-button and combobox to a layout, select both push-button and combobox, either in the layout itself or in the object inspector, right-click on the selection and select lay out > lay out horizontally in the context menu.
Repeat these steps for the other widgets and layouts. When adding the horizontal layout and the list view to a vertical layout, make sure you select the layout and not one of the widgets in the layout:
Step 3: Set layout of main window
To set the layout of the main window, right-click either anywhere in the main area of the form outside of any child widget or on the MainWindow node in the object inspector and select layout > lay out horizontally. This should result in something like this
And the object tree in the object inspector will look something like this

What are the differences between Accordion pattern and Disclosure pattern?

Apart from keyboard interaction, are there any major differences between Accordion and Disclosure patterns? Why does aria authoring practice have two different topics for logically similar show/hide components?
Aria-practices for Accordion says,
An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
An Accordion is a stack of Disclosures, aligned either vertically or horizontally, that mostly contains a list of nav items or nested disclosures.
While a Disclosure itself is an independent pattern implementing show/hide functionality.
Try to compare the keyboard accessibilities of Accordion and Disclosure. One of the accessibilities in an accordion is if a new Header is clicked to view its hidden panel, then the previously opened panel must be closed

VB.NET overlaying panels is not working

I am overlaying a bunch of panels on top of one another. I want to be able to click a button to display which ever panel is in the stack referred to by unique names (panel1, panel2...).
However, the bottom panel some how is always the parent of whoever is on top of it. Therefore, If I were to set the visibility of the bottom panel to false, then nothing on top of the bottom panel can be made visible.
How do I make these overlayed panels independent to each other instead of having a parent-child relationship?
I faced the same situation a time ago. The more pragmatic way that I found was to use a tab control and hide/show tabs accordingly. It is possible to get rid of the label of the tab, so users dont even know about its existence. The rule is to have one and only one tab visible in any given time.

objects inside Ext.tab.Panel

I am writing simple apps with Sencha Touch 2. I see that the basic object in app/view/Main.js is Ext.tab.Panel.
What other Ext objects can be embedded directly into Ext.tab.Panel? Where can I look up this information?
From the Sencha Touch 2.3.1 docs, Ext.tab.Panel section:
http://docs-origin.sencha.com/touch/2.3.1/#!/api/Ext.tab.Panel
Tab Panels are a great way to allow the user to switch between several
pages that are all full screen. Each Component in the Tab Panel gets
its own Tab, which shows the Component when tapped on. Tabs can be
positioned at the top or the bottom of the Tab Panel, and can
optionally accept title and icon configurations.
Basically, you can put any view class which is subclass of Ext.Container inside a tab panel.
You can put any view you want.You can even put another container inside a container
Have a look at sencha touch docs.
http://docs.sencha.com/touch/2.3.1/#!/guide/views