I have written an MVC Sencha Touch app to query a database via JSON and then return the list in an Ext.List
The idea here is to have an iPhone-style UINavigationController effect that slides in for the results list.
To achieve this I use an Ext.Panel that loads 2 cards, one is my query (Ext.Form) the other is the results wrapper Ext.Panel (I use the wrapper to display a toolbar at the top since Ext.List is not capable of this)
I use the forms filter to trigger a 'search" method in the wrapper that then loads an instance of my Ext.List.
This all works quite well, except the results list fills the whole screen, and therefore sits "behind" the wrappers toolbar instead of below it.
The results don't even display at all unless the Ext.List has fullscreen:true.
Any suggestions most welcome.
Related
So QML StackView provides a way to navigate back by usin the pop() function. I am looking for a way to go the previous page by simply swiping to the right with UI elements following the fingers of the user (kind of like a SwipeView). How can I achieve this? I have looked around and all I found was this https://github.com/alejoasotelo/SwipePageStackWindow which is an old project that does a similar thing with the old PageStack.
One possible way to do this is to create a custom element called swiper that has a swipeview with 3 pages. 1 and 3 are blank but 2 has content. When page 1 is active, it allows all events to pass through unless a left swipe is detected. Page 2 has a loader So you can change the contents.
If you create two of these on top of each other you can move the one in front of the other whenever you need to switch views. Two loaders means the content will never consume too much memory.
So you'll have a variable isBottomActive
And one method
function pushNewView(view) <- this will move whichever swiper is not active to the front, put the view into it's loader and change currentIndex to 2.
Now if you need to go backwards you just swipe to the right. The swipers view index changes (you can tie a method here to make the old swipeview move back to the bottom with a different view as well)
I want to make an iPad app with multiple "forms" that must be filled out. The view has a header and a footer section that are the same on all views. The middle part contains the form fields. I would like the animation between the pages to be only on the middle part. That is: The header and footer must stay in the view while the middle part slides to the next form.
I can create this easily in code, where I configure all fields that must be inserted in the code and then create the animation. However, this feels wrong and not very maintainable. Therefore, I would like to use the story board to configure each of the form pages. The question is: How do I do this? Do I need one or several View Controllers? How do I best create the views and organize the code?
PS. I work on an iOS 5.0 app
The best way I have found out to do this is to create the views in xib-files. Then the view that should be shown next can be generated from the xib-file. All is done in one view controller (since a new view controller would take over the entire screen). This is easily maintainable and easy to animate.
What I'm looking to do is create some kind of master view, that would have the same header (with a logo), footer (with some text and a button), background image and navigation (not a navigation bar, just a few buttons) on every view.
You could think of what I'm after doing is like a PowerPoint presentation. Create a master slide that's layout is used through every slide, you create a new slide and it takes across all the masters properties (header, footer, background etc) and then it's just the content that changes on each new slide.
However, I'm not too sure how I would do this in an iOS application. I've had a look on Google searching many different phrases but all seem to be about iPad split views and using cells of a tableview, which isn't what I'm after.
All I can think to do is create a single view controller class, with a view, and then add a sub UIView for each page I want (about 15-20), but with the one class, and every page having different content and a lot of code required for each one, that's going to get messy! Or I simply recreate the footer and header etc on every view controller, so if there were to be a change, then I'd have 20 views (more if it grows) to edit! So I'm just wondering if there's a simple way of getting what I'm after.
The app will be for iPad only, and I can use any OS up to 5, so xibs or storyboards are fine. And this won't be on the app store if that helps.
I've done a quick drawing below. The master view with all my bits to be used on each page, and then content slides that will slot in and out of the mater's content area.
Check out Containment View Controllers. This kind of presentation is exactly what they are designed to handle. There is a really nice WWDC presentation from 2012 I believe that illustrates how these work. There are also several tutorials online if you search.
maybe the best option is to create a master detail page. Then for each new page, call the master?
If u want to show header and footer view in whole apps then add header and footer view in window not in view controller i think it will work
I'm working on a iPhone app which shows an mobile webform in a UIWebView. I'm using a default iOS layout with a navigation and tab bar.
The mobile webform is displayed in a UIWebView in the white area. Since the webform has a lot of input fields, we really need as must space for it as possible. Because of this, we are planing to remove the tabs in the bottom. Over time, there will be more tabs/sections, so it is not a solution to just add a button for each section in the left side of the navigation bar. On a iPad a popover could easily be used to handle this.
Is there a standard iOS layout mechanism to handle this change of sections/views without using tabs?
You could do something long the lines of Path or the new Facebook app and have the "table of contents" behind the Navbar and the navbar slides away (along with the child view) to reveal it. When done right (ie smoothly) I think the effect is really cool.
This would also work great as you add more and more options, since the table could just scroll.
Here is a framework that might be you started: http://www.cocoacontrols.com/platforms/ios/controls/iiviewdeckcontroller
I would consider replacing the navigation bar's title with a control that lets you switch between tabs. You can assign the bar's titleView property to a control or a button and it will generally do the right thing.
If you're limited to 2-3 tabs, you could simply use a UISegmentedControl.
If you want more, you could use a button which, when tapped, pops up a view that allows you to select the view you want. This could be a modal table view, or you could slide up a UIPickerView from the bottom of the screen, similar to the keyboard.
I use this technique in an app of my own, screenshots here. Tapping the button cycles between views (in this case, I'm changing the contents of the table cells); tap-and-hold slides up a picker.
Another possibility would be to arrange your different forms on pages in a scroll view with a page control at the bottom, à la Weather. The best option, though, if you’re going to have a particularly long list and want to keep your screen real estate, is probably the FB/Path-style sidebar table.
I ended up using a UIActionSheet but I think it in other situations would be more stylish to use a controller like the IIViewDeckController.
So I have an app I am using to learn more about touch. I got the basic framework setup based on tutorials I have found around the net where I can bounce around the app clicking on things. I integrated a sencha touch line chart which works fine.
The problem is I want to populate the series labels for the chart based on data that comes back from the server, not hard code the labels. My plan was to once execute:
Ext.redirect('Chart/Index');
I would hit that controller and load the store. In the onLoad listener for the store, once the data is returned, populate the title array in the series and render the chart. I tried to attach a customer listener to the chart view, and then execute it from the store listener.
listeners: {
load:function(el,records, success){
App.fireEvent('myListener', records);
}
},
That isn't working for me, listener is undefined (I do have it defined in the chart view). So that isn't my solution.
Then I tried to give the chart an id, and do a Ext.query(#myChartName); That returned a html element, not something wrapped in Ext that can be executed.
Now it extsj4, I can put a listener for a store in the controller, and define a method in the controller to execute. It can easily access any component within the controller and would be how I would solve this issue. But that doesn't seem to be how MVC works in the touch apps. The examples I have seen are laid out drastically different in fact. (Why is that btw?)
What's my best solution in taking the data in my store after load and populating the labels/legend in my chart?
UPDATE
Added links to the code in question. I am trying to add strings (the label names) to the title array in the series. Notice the Chart View & the Store.
Chart view
http://jsfiddle.net/5JhCu/2/
Controller
http://jsfiddle.net/3C4Tq/1/
Store
http://jsfiddle.net/LT6eh/
FYI, I tried adding the listener to multiple things/objects like the app, the view, within the controller, still no luck.
Did you try Ext.getCmp('myChartId') to get access to the chart component?