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
Related
I'm writing a codenameone application where I want to have an image displayed across the top of the screen as a header. I do not want to include this image in every form/container that I create so therefore I came up with the following solution:
I have a Main form which contains the image (North) and a container (Center) which will then hold all the components of the specific screen that I want to show.
I will then create containers that represent each individual screen. My idea was to add these containers to the container of the main form, one by one and that navigation between them would be handled by changing the contents of that main screen container.
But I cannot find out how to make this work. As long as I have one single screen to show it is easy... The main form container can be an embedded container that is set to show the container for the single screen. But when I try to navigate to another I cannot make it work.
So, is there another approach I should use?
If not, how should I handle navigation between screens?
Is this with a GUI builder app or with a handcoded app?
Either way a simple way of customizing this if your app has a side menu or Toolbar would be to customize the TitleArea UIID to include your background image. E.g. start with a modern theme like the Business Theme and in the designer theme change the title area border property to be "Empty".
Then define the background image to be the image you want with "scaled to fit" or "aligned bottom" depending on what you want. Make sure to include enough space in the image for the title are and use a multi image so it will adapt for other OS's.
I want to create an application and chatting is involved. I am currently struggling to format existing controls or to create a control with the following conditions:
a container is docked to the main form's bottom
inside of that container, a button can be used to toggle a chat
component (e.g. text edit) to become either visible or invisible
if visible, the chat component is aligned with the button that was
pressed but does not force a resize on the container of the button
So basically I want to achieve a facebook or google hangouts like chat layout in vb.net that can also scale dynamically according to the current window size. Nevertheless it should always stick to the bottom.
Please keep in mind that this question is not about making the chat work but only the layout/design problem I am facing.
My current approach is the following:
FlowLayoutPanel docked to bottom with buttons
RichEdit as placeholders to simulate the chat component
My current layout
Is there an easier way to do what I want to do?
Set the anchors to the bottom of the page/panel.
On the designer, click the control you want to edit, find the Anchor property and change it to bottom (and left/right/top, whatever you'd like).
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
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
How to customize tab bar controller so that tabs appear on the top of the screen?Tabs should not appear at bottem of the screen.
Try this,
self.tabBarController.tabBar.frame=CGRectMake(0, 0, 320, 70);
You will need to create a custom control. The standard UITabBar does not offer the option to place tabs at the top unfortunately.
Tabs should not appear at bottem of the screen.
Actually, according to the iOS human interface guidelines, they should:
A tab bar appears at the bottom edge of the screen and should be accessible from every location in the application.
If you really wanted to do what you are asking, you could use a UITabBar directly (not touching UITabBarController). That handles drawing the tab bar itself, but doesn't do any view swapping for you. You should then write a custom container view controller using the view controller containment APIs (iOS 5 only) which you set as a delegate method on your tab bar, and then when the user changes tab, you swap in and out the relevant views.
Or you could use this open source version.
Don't make your top tab bar look like a standard Apple tab bar though, because they'll probably reject it from review. If you use a completely custom look you should be fine.