Sencha Touch: Dynamic chart labels in a MVC app - sencha-touch

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?

Related

In vue I have questions about database and lifecycle

I wrote a gantt chart using 'dhtmlxGantt' in vue. The data I want to put into the gantt chart is in my database, I get it by 'get' method and put it into a variable called 'data'.
If it is normal flow, you have to draw the event on the gantt chart on the screen with this data, but there is a problem here. The lifecycle section that fetches the data is called 'created', but no events are drawn on the screen. It has been determined that retrieving data from the database is successful.
I think the event that draws a chart on the screen first appears first, then the data is loaded. This is because there is nothing in the variable 'data' before the drawing event is applied to the screen.
How can I generate an event that draws a chart on the screen after the data is loaded? Is this a lifecycle matter? I wonder if anyone has a similar problem.

How to change view by clicking a listitem in Sencha Touch?

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'});

How to structure code with an animation on part of the view

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.

How to create a master view for an iPad app

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

Sencha Touch Ext.List disappearing behind a wrapped toolbar

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.