Sencha brings on some more agony. I completely agree that I'm a tech novice and will continue to have trouble delivering complex stuff. For people like me, Sencha is not the recommended tool.
The UI interactions are getting tough and complex with the mobile devices. Sencha tries to wrap HTML in JavaScript configurations. You don't see your familiar HTML tags. What you see are braces Curley , Square and Parentheses.
This time or for about a couple of weeks now its been the charts. Sencha charts are deceptive. That's the least I can say. I could get the first chart up and running in no time. These were hardcoded data values, put together from Sencha documentation on charts. But since then, it's been a harrowing journey.
The complexities include
Updating the charts with dynamic data. Its a very tricky thing. Here is the use case.
List of Budgets (Tap)-> Load the expenses for the last 1 year for that budget and display on the screen.->There are 2 screens. First one for monthly expenses with averages and the second a pie chart of the various categories.
My solution was to define an xtype of panel that contains charts. These Charts were Items within Config.
The data for the chart was kept in a Ext.store and that store was refreshed on tap of the Budget. Now the problem was, when you defined the xtype, you assigned the store config a variable, which at the time of definition did not have any data. On tap of budget, I first got the data in the store and then created instance of the xtype. Despite me refreshing the data first the Chart would get not data at all.
After a lot of research I found a solution. I could create a basic xtype without the chart components. And on Tap after getting the data, I add the charts to the xtype. As the datastore was refreshed before adding chart to xtype, the datastore held the values.
Problem solved? No. Not yet. The ajax call to fetch the data is async. And so, the control moves on right after making the call to refresh the store and adds the charts even before the data is received. The result is the same. No data on charts.
The trick was to make the ajax call->Write a callback->In callback, process the data and populate the store->create xtype->add chart components to the xtype. Problem solved. Yes? No!
Now the Sencha Command tool started acting funny. In dev env, I could see the carousel with two charts. But when I built for production, I'd see only the first one.
The solution, do add twice. First for the bar chart and then for the pie chart.
Are we done now? Yes? No!
My title setting went for a toss. For reference check my previous posts on my struggles with changing the titles.
When you add chart components externally, the title setting gets screwed up. Wrote an unnecessary piece of code to check certain stuff and then change the logic for setting the titles. That too created its own problems such as, when you return back to the budget directly from the second slide of carousal, your charts would stop working. Finally fixed it up...
In between, I had major problems with sencha command. Whatevert I changed, the build production would continue to build old code. The updates did not reflect. It finally got solved. I don't know how. Spent a lot of cycles trying to fix that.
Then there was a another problem of my internet connection being slow. That took me a while to load the build to AWS. The AWS management console does not work will with Chrome. It keeps crashing the browser.
So finally, its done for the time being. Phew!
List of Budgets (Tap)-> Load the expenses for the last 1 year for that budget and display on the screen.->There are 2 screens. First one for monthly expenses with averages and the second a pie chart of the various categories.
My solution was to define an xtype of panel that contains charts. These Charts were Items within Config.
The data for the chart was kept in a Ext.store and that store was refreshed on tap of the Budget. Now the problem was, when you defined the xtype, you assigned the store config a variable, which at the time of definition did not have any data. On tap of budget, I first got the data in the store and then created instance of the xtype. Despite me refreshing the data first the Chart would get not data at all.
After a lot of research I found a solution. I could create a basic xtype without the chart components. And on Tap after getting the data, I add the charts to the xtype. As the datastore was refreshed before adding chart to xtype, the datastore held the values.
Problem solved? No. Not yet. The ajax call to fetch the data is async. And so, the control moves on right after making the call to refresh the store and adds the charts even before the data is received. The result is the same. No data on charts.
The trick was to make the ajax call->Write a callback->In callback, process the data and populate the store->create xtype->add chart components to the xtype. Problem solved. Yes? No!
Now the Sencha Command tool started acting funny. In dev env, I could see the carousel with two charts. But when I built for production, I'd see only the first one.
The solution, do add twice. First for the bar chart and then for the pie chart.
Are we done now? Yes? No!
My title setting went for a toss. For reference check my previous posts on my struggles with changing the titles.
When you add chart components externally, the title setting gets screwed up. Wrote an unnecessary piece of code to check certain stuff and then change the logic for setting the titles. That too created its own problems such as, when you return back to the budget directly from the second slide of carousal, your charts would stop working. Finally fixed it up...
In between, I had major problems with sencha command. Whatevert I changed, the build production would continue to build old code. The updates did not reflect. It finally got solved. I don't know how. Spent a lot of cycles trying to fix that.
Then there was a another problem of my internet connection being slow. That took me a while to load the build to AWS. The AWS management console does not work will with Chrome. It keeps crashing the browser.
So finally, its done for the time being. Phew!
No comments:
Post a Comment