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
Related
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 am developing Adobe Air desktop application using Apache Flex 4.9.1 SDK.
I am using a TabBar control in order to go through different windows. For a window I am using a BorderContainer control.
My question is:
Is there any event raised(in the BorderContainer control not in the TabBAr control) when you change from one window to another using the tabs. The event in TabBar is "change", but I need to capture this moment in the BorderContainer. I have tried "FocusOut", "Hide", "Deactive" events, but they are not raised. So does anybody knows what is happening in the BorderContainer when the tab is changed?
Thank you in advance!
Use the change event on the tab bar ..
Can any one point me to an example of changing views with buttons for a carousel ?
I would like the option to swipe or click to change views.
Thanks
You've various ways to achieve it, you can either use setActiveItem:
carousel.setActiveItem(1); // Move to the 2nd carousel's item.
or apply next and previous method on your button handler to switch to the next and previous card of your carousel:
carousel.next();
carousel.previous();
Here is a demo: http://www.senchafiddle.com/#Ukg1N
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.
Is there a way to have a fixed non animated header in a sencha app and still retain page animation and browsing history?
I need my header to not animate on a page slide. The way i tried it is:
-main container (v box)
--header container
--card container(card layout)
---card
---card2
---card3
Etc
And I manually switch the cards inside the card container with setActiveItem(index)
The header is never animated in/out but I dont have history now so the only way to have a back button is manually hard coding it with setActiveItwm(prevIndex)
Its an unfortunate and dirty solution maybe somebody else has a better one.
Yes I achieved it using sencha architect to test. From memory I created a base container that had layout vbox. Inside that I had a top tabpanel and under that a tabpanel. I then set the flex on the top panel to 0.2 and the tabpanel to 0.8. That way my header will always be 20% height on any device. I hope this helps.
You require Ext.navigation.View
Use Ext.navigation.View and create basic navigation between views...then hide the navigation view you can do that by making the navigationBar property as hidden:true
Next have a common navigation header as you have mentioned above...
Going forward using a button lets say would be by using
button.up('navigationview').push({xtype: 'card2'});
This button will be somewhere in your card which takes you to next card
Similarly for going back on button click
button.up('navigationview').pop();
button.up('navigationview').pop(2);//Will take you two views back and so on
These buttons will be on your common header