Wednesday, 2 September 2015

Sencha Touch: How to Fix the Loading Spinner not rotating error

In order to fix the Loading Spinner not rotating error in Sencha touch 2, Please include the below sass code in the end of your sass file (app.scss).

@keyframes x-loading-spinner-rotate {

  0%{     -ms-transform: rotate(0deg); transform: rotate(0deg); }

  8.32%{  -ms-transform: rotate(0deg); transform: rotate(0deg); }

  8.33%{  -ms-transform: rotate(30deg); transform: rotate(30deg); }

  16.65%{ -ms-transform: rotate(30deg); transform: rotate(30deg); }

  16.66%{ -ms-transform: rotate(60deg); transform: rotate(60deg); }

  24.99%{ -ms-transform: rotate(60deg); transform: rotate(60deg); }

  25%{    -ms-transform: rotate(90deg); transform: rotate(90deg); }

  33.32%{ -ms-transform: rotate(90deg); transform: rotate(90deg); }

  33.33%{ -ms-transform: rotate(120deg); transform: rotate(120deg); }

  41.65%{ -ms-transform: rotate(120deg); transform: rotate(120deg); }

  41.66%{ -ms-transform: rotate(150deg); transform: rotate(150deg); }

  49.99%{ -ms-transform: rotate(150deg); transform: rotate(150deg); }

  50%{    -ms-transform: rotate(180deg); transform: rotate(180deg); }

  58.32%{ -ms-transform: rotate(180deg); transform: rotate(180deg); }

  58.33%{ -ms-transform: rotate(210deg); transform: rotate(210deg); }

  66.65%{ -ms-transform: rotate(210deg); transform: rotate(210deg); }

  66.66%{ -ms-transform: rotate(240deg); transform: rotate(240deg); }

  74.99%{ -ms-transform: rotate(240deg); transform: rotate(240deg); }

  75%{    -ms-transform: rotate(270deg); transform: rotate(270deg); }

  83.32%{ -ms-transform: rotate(270deg); transform: rotate(270deg); }

  83.33%{ -ms-transform: rotate(300deg); transform: rotate(300deg); }

  91.65%{ -ms-transform: rotate(300deg); transform: rotate(300deg); }

  91.66%{ -ms-transform: rotate(330deg); transform: rotate(330deg); }

  100%{   -ms-transform: rotate(330deg); transform: rotate(330deg); }


Monday, 31 August 2015

Sencha Touch: How to Fix Message Box unResponsive Error

Sometimes, you may came across a strange behaviour in sencha touch app. i.e the alert message will become unresponsive, this will force you to kill and re-launch the app. This error is mainly due to animation when alert message is getting displayed in your app.

In order to fix this, you need to disable the animation with this line of code.
Ext.Msg.defaultAllowedConfig.showAnimation = false;      
Hope, you enjoyed this post.

Sunday, 5 April 2015

Assign object to another variable in Sencha Touch

In Sencha Touch, if we need to assign the Object variable (that contains properties and methods) to another variable, usually developers will write the code as

var obj1 = origObj;

From the above code, both variable obj1 and origObj will point to the same memory location. If we change any properties in obj1, the same will get updated in origObj.

If we need to create a new object from the existing objects,  that will reference to new memory location. Here is the sencha touch code.

var obj1 = Ext.merge({}, origObj);

Now, both obj1 and origObj variable will not point to the same memory location. Here is the documentation reference for Ext.merge().

Hope, you enjoyed this post.

Sencha Touch: How to Integrate BaseUrl for the Ajax request in the Store Proxy URL

I have seen lot of developers hard code the full API URL in their store proxy URL configuration. If they need to change the URL in the future, they need to update in all their stores.  There may be a chance they may leave some store unmodified this will lead to bugs.

We can maintain the baseUrl configuration in a single place, and if they need to change in future, they can change it in once place, instead of modifying in all stores. Let's see the BaseUrl Singleton class which will define the baseUrl of our App which will be used for all the stores ajax request.
Related Posts Plugin for WordPress, Blogger...