I am using Extjs 4 in Sencha Architect. I have 2 buttons when I press on first one I get 'Panel_1" displays at the bottom. I made it using border layout on parent panel and south region on child panel "Panel_1".
now I need to do the same thing and display "Panel_2" at the same place when button_2 pressed. but seems like I cannot set two panels at same region (south) in border layout.
Any another idea about how to accomplish that ?
You need to create a container in the south region with a card layout. Add both of your panels to this container and then use the southContainer.setActiveItem(card) function in your button handler to show the correct panel when you press the relevant button.
Related
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
I'm playing around with Windows Universal App development. When looking at the Windows 10 Store App, I noticed a scrolling list control as shown in the below screenshot. Clicking the right arrow will shift right by a certain number of elements. Likewise on the other side, clicking the left arrow will shift back.
Is the scrolling control in the Store App a standard control or something custom made?
I'm aware of things like the ScrollViewer, but that just adds a scroll bar.
I created this by the following:
Grid with 3 columns with widths 3*, 94*, 3*
First column contains Button stretched vertically and horizontally to fill the grid and a ListView
Second column contains nothing
Third column contains Button stretched vertically and horizontally to fill the grid and a ListView
Button clicks fire events to calculate how many places to scroll left or right and then uses ListView.ScrollIntoView to scroll the items into view
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
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!!
I have Two containers in my Sencha Architect Frame work 2.0.
The first container contains a login button.
So on the click i.e. tap event of that button i want that my view changes from container1 to container2.
How can this be done.
Thanks
Abhishek
On your button's tap event, you should run something like this:
yourOuterContainer.animateActiveItem(1);
note: here I assume that your outer container contains 2 components: First Container and Second Container (so your Second Container has index 1).
Try this:
Make a Panel with layout: card, set set activeItem(0) for the panel
put the two container inside the panel, be sure, that the login container is first and the other second in order
in the tap event of the panel apply setActiveItem(1) for the panel
This way you switch between these two views.
You can use the navigation view component... Sencha Architect documentation provides a easy guide to implement this
http://docs.sencha.com/architect/2/#!/guide/navigationview