Bar chart's item info Gesture not passing the selected bar/item to the show Event

A normal requirement, is that when a particular item is selected/tapped in the chart, we display its information or do some activity.

We had a similar requirement and had decided to use the iteminfo Gesture. However when the show event was handled, the correct item information of the selected item was not passes correctly to the handler. We can do that, by overriding the gesture: Have shown, how to get the selected object below, implementation will depend on the requirement.

 Ext.define('AppName.override.chart.interactions.ItemInfo', {  
   override: 'Ext.chart.interactions.ItemInfo',  
   onGesture: function (series, item) {  
        var me = this,  
       panel = me.getPanel();  
     me.item = item;  
         var chart = me.getChart(),  
       chartXY = chart.getEventXY(series);  
     var chartitem= chart.getItemForPoint(chartXY[0], chartXY[1]);  
         console.log(item);  
         console.log(chartitem);  
     /*me.fireEvent('show', me, item, panel);  
     Ext.Viewport.add(panel);  
     panel.show('pop');  
     series.setAttributesForItem(item, { highlighted: true });  
     me.sync();*/  
     return false;  
   }  
 });  

Sencha Touch Build error : touch/src/event/publisher/Dom.js? 404 (Not Found)

I was working on a touch app with version 2.3.0 and Sencha Cmd version 3.1.2.342 and it was using Architect version: 2.2.3

Recently, I had  to migrate the app to use Architect version : 3.0.4.
Had to solve few bugs to get it working. The following bug was one of them that occurred while creating the production build:
Sencha Touch Build error : touch/src/event/publisher/Dom.js? 404 (Not Found)

This mainly occurs if Touch Gestures have been used. Like we had something like this in the app used:
eventPublishers: {
        touchGesture: {
            recognizers: {
                tap: {
                    xclass: 'Ext.event.recognizer.Tap',
                    moveDistance: 35//This was adjusted from the default 8
                }
            }
        }
    }

With the Previous Architect and Cmd version, when we manually built the app using Cmd, we never recieved an error for the production build.

When you try build with Architect 3, you will get this error in which case you have to add the following classes in the requires:


'Ext.event.recognizer.*',
'Ext.event.publisher.*'

Destroy of Dynamically created stores

         Often a need arises when we create stores dynamically and not through the general MVC structus, Since those stores are global (app scope). We may want to create stores dynamically for select fields per screen,lists,etc.

         While working on one such scenario, I had a doubt on the destruction of these stores.
I installed the chrome plugin from Sencha: https://chrome.google.com/webstore/detail/app-inspector-for-sencha/pbeapidedgdpniokbedbfbaacglkceae?hl=en

What you can do is open a Screen using dynamic stores, Go to the stores tab and you will notice all the stores listed in the App.
Now, Navigate to some other Screen, and come back to the screen you visited, The store count keeps on increasing and the previous stores are never destroyed.

I went through the Grid source Code: http://docs.sencha.com/touch/2.3.1/source/Grid.html#Ext-grid-infinite-Grid. You will notice that Sencha has explicitly set the autoDestroy to true.

Hence, also checked the store source code: http://docs.sencha.com/touch/2.3.1/source/Store.html#Ext-data-Store and noticed that for Stores the autoDestroy config is set to false by default, as opposite to any components where its set to true by default.

For stores that are declared globally, under the stores namespace, they are not destroyed throughout the app. We are ensuring that we clean records in them. However, for dynamically created stores, we will need to set the autoDestroy to true or destroy them explicitly. If this is not done the stores along with the records keep on increasing as the screens are visited.

This will certainly give some improvement in terms of memory!. 
Feel free to discuss any views on this :).

Enabling HTML5 Cacheing on Iphone or Ipad

HTML 5 Cache is a common feature, required by every app now a days. Application Cache is different from a Browser Cache. Found a very good blog explaining HTML 5 Cache: http://gregsramblings.com/2012/05/28/html5-application-cache-how-to/

Handle Header Tap of a Grouped List

There was a Menu that I was displaying, which had various options. The Menu had sub-items which were grouped. I had offcourse used the grouped list for the Menu.

However, also, the group header tap had to be handled, which had some view to be shown.
The Sencha touch list has an itemtap event that can be used to handle taps on each item, but there is no event that will handle the tap on Group Header.

I used the following to achieve it:
{
  xtype:'list',
  store:'SomeStore',
  grouped:true,
  listeners:{
   element:'element',
   delegate:'div.x-list-header',
   tap:function(e){
    var header = e.getTarget('div.x-list-header',3,true),
    scroller = e.getTarget('div.x-scroll-scroller',4,true),
    headers = scroller.query('div.x-list-header');
    index = header ? headers.indexOf(header.dom):false,
    store = this.getStore(),
    groups = store.getGroups(),
    group = groups[index];
    this.fireEvent('headerTap',group,e);
   }
 }
}

Now, you can add a listener on the list in the controller to listen to the headerTap event.

CORS throwing error when withCredentials is true

Cross-Origin Resource Shari (CORS) is a W3C spec that allows cross-domain communication from the browser. Almost most of the mobile app's you develop these days need to use CORS for cross-domain access of the web-services. You can find more information on CORS on : http://www.html5rocks.com/en/tutorials/cors/ .

 I had used CORS in many of my projects. To use CORS in EXTJS/Sencha Touch, you can create the request object as:
 var request = {
                                url: uri,
                                timeout: 120000,
                                useDefaultXhrHeader:false,
                                method: 'GET',
                                withCredentials:true,
                                scope:this
}             
Ext.Ajax.request(request);

While Using CORS and web-services together many a times you need to pass credentials or use the withCredentials attribute/config as indicated above.
But, It gave me an error indicating: "Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true." 

Basically, when you are using Cross Domain along with withCredentials set to "true", the server has to respond with:

Access-Control-Allow-Origin: (the origin url) and not with

Access-Control-Allow-Origin:*
WildCards are not allowed in this case.
So this is what I used on the server side:
headers['Access-Control-Allow-Origin'] = this.req.headers.origin;
Hope this helps!!!...

Touch 2- Painted event not recognized/listened by the controller

In one of our projects, after upgrading to sencha touch 2.2, we noticed that the painted event was not being recognized in the controller. After a lot of search on the forums and google we somehow managed to get it working. Basically we need to add the following code in the view, whose painted event is being listened to in the controller:
  initialize: function() {
        this.callParent();
        this.relayEvents(this.element, ['painted']);
    }

Short titles in title bar also getting clipped with text-ellipsis

With the new release of sencha-touch it is observed that, Short titles in title bar are also getting clipped with text-ellipsis..

Note when you run the app on mobile/tablet devices all works fine.
Only when the app is run on the desktop the titles are clipped.

For this issue just add the following css to you css file:

.x-desktop .x-title .x-innerhtml{
     padding: 0;
}

Cannot read property 'pseudos' of undefined error

While working with touch charts and sencha touch together, you may get the following error:

Cannot read property 'pseudos' of undefined

 After searching a lot on the sencha forums I couldn't find an answer to it.
After which we noticed that if we try and use the sencha-touch/sencha-touch-debug.js files provided with the touch charts zip/library itself this error vanishes.

Conclusion: If you are using touch charts, use the sencha-touch files provided in the touch-charts zip itself