The following is the structure of my Sencha Touch Application. I have a view and I have given xtype "homepage" to it. In the homepage view I have the following items.
A toolbar docked at the top.
A list in the left side of the application
On the Right Side, I have a view with some display whose id is "display"
Problem: Now I want that when I click different options in the list, different views should be displayed on the right side of the homepage.
I am able to call list-item-tap function in controller and I am able to identify different items of the list. Only problem is that I am not able to replace the given display with another view
Okay, after searching a bit on the net, I found the following solution. I should use layout:'card' to the container in which I need to be changing views. In my case it is a container with id display.
Then in Controller.js I should write the following code:
var item = Ext.ComponentQuery.query("#display")[0];
item.setActiveItem({xtype:'xtype_of_your_view'});
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 invoking goToNode() like so:
nestedList.goToNode(Ext.create('myStore').getRoot());
The list shows the title in the toolbar correctly with no back button (so it seems like we're at the root), but the actual items in the list (the children) are not correct. They are leaves, and one is selected -- the last one I tapped.
I am navigating through a NestedList and end up at a detailCard. I transition to another view, and once I'm finished at that view, I want to go back to the NestedList at the very "top" of the list. I thought I could use goToNode() but it isn't working. How can I do this? It seems to me that goToNode is not working correctly.
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?
I need to display the following data structure in Core Data on iPad:
Categories(tableView) -> Products(tableView) (This part with 2 layers of navigation controllers in masterView on the left side of UISplitViewController)
With a particular product selected, display ProductDetail in the detailView on the right side of UISplitViewController.
The challenge is to add Prev/Next buttons in the detailView and navigate through different products within that particular category. Including functions where in portrait mode:
1.when masterView disappears, the Prev/Next are still able to function properly.
2.Say if user currently is at Category1->ProductList1, user navigate back from ProductList1->Categories, did not select any other category, dismisses materViewPopOver. After using Prev/Next to navigate between products in ProductList1, then reopen the masterViewPopOver, original ProductList1 is shown in masterViewPopOver (instead of at Categories level when last dismissed)
Bottom line is, I want it to function exactly like the native iPad Mail app.
Can any one advice what is the bet practice to achieve this behavior?
Should I use only one FetchedResultsController (with many sections) to handle both Categories level and Products level data? Or should I use two (one for each level)? How do I make sure detailView keeps track of the Prev/Next order?
Any input is appreciated! Thanks in advance.
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.