Get Google suggestions in Sencha Touch application

Recently I was working on a project where requirement was to bring Google suggestions to sencha touch app. Exact requirement was to build auto suggest search box with suggestions from Google search.

I tried to get it using Ajax Request but it was not working because it become cross domain request so I was getting error that "Access Denied".  After that I tried to get it using JsonStore using scriptTagProxy Check the code below.


var searchStore = new Ext.data.JsonStore({
                        fields: [],
                        root: 'items',
                        proxy:new Ext.data.ScriptTagProxy({
                           url: 'http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q='+search+'&key=&format=5&alt=json'
                         })
                    });

Here biggest issue is Google suggest returns JSON but not in key value pair. It just gives text of suggestions as follow. For example if we search for query we get following output.

["QUERY",["query","query in access 2007","query xl 2011","query gratis xl","query kartu tri 3","query optimization","query opmin 4 2 axis","query bolt browser simpati 2011","query telkomsel bolt handler","query in access 2010"],["","","","","","","","","",""]]

Now above data will not be loaded in store as we don't have any fields here. So how to access data. You have two options.

Override Ext.data.Connection method which is used in Ext.Ajax and add support for cross domain access.


Now above option seems bit difficult and time consuming.  I have another solution for it. Add load listeners to store.


searchStore.on({                     
                       load:function(store,records){                     
                          console.log(store.proxy.reader.jsonData);
                       }
                    });              
searchStore.load();


store.proxy.reader.jsonData, this will give you jsonData returned in response. You can use it to display suggestions the way you want.

Hope this helps you.

Important Note : I am not sure whether it's legal to use Google result in any application or not. But here the project mentioned was of the company, which is certified google application company. So please check the Google policy before using Google suggestions in your application.

Sencha touch 2 and MVC

Recently I switched to sencha touch 2 and I had to struggle little bit to implement MVC in it. So I am writing this blog post so that it will be useful for others.

Old way (sencha touch 1.0)


In sencha touch 1.0 we normally create object of viewport in application launch function as follow.


Ext.regApplication({
    name: "myApp",
    defaultTarget: "viewport",
    launch: function () {
        this.viewport = new myApp.Viewport({
            application: this
        });
    }
});

This will create an viewport object and render other items in viewport. So what is so different in sencha touch 2.0. It's totally different than it's older version. Following are the major changes.

1) Dynamic loading of scripts


Now you don't need to link all your JavaScript files in index file as it will be dynamically loaded from controllers. So you must set loader config in app.js file as follow.


Ext.Loader.setConfig({
enabled: true
});

2) Rendering viewport


Now you don't need to create viewport object explicitly in app launch function but it will be automatically created if you set autoCreateViewport to true in application definition. See the following code.


Ext.application({
    name: 'myApp',
    autoCreateViewport : true
});


If you set autoCreateViewport to true, app will try to load Viewport.js file from app/view/ folder. So you  must place a file there. This file will define your viewport. In this file you must specify a class which extends panel or container with fullscreen set to true.

Please remember you can extend Ext.viewport.Viewport or Ext.container.Viewport as it's singleton classes and can not extended. Whatever class you define here in Viewport.js file, it's object will be automatically instantiated and that control will be added to viewport. So here you only need to specify class with fullscreen set to true .Check the following code.

Ext.define('myApp.view.Viewport', {
    extend: 'Ext.Panel',

    requires: [
        'Ext.Panel'
    ],
    config: {
        fullscreen: true,
        layout: {
            type: 'card',
            align: 'stretch'
        },
        defaults: {
            flex: 1
        },
        items: [{
            xtype : 'panel',
            html : 'Welcome to Sencah Touch 2.0'
        }]
    }
}); 

Hope this will help you.

Synchronize ExtJs Grid vertical Scrollbar

Recently I was working on ExtJs project in which there were two grids side by side and requirement was to synchronize scrollbar of both grids. See the picture below.

If user moves vertical scrollbar of left grid right grid scrollbar should be moved automatically and vice versa.

So how to do that? Following is the trick. Suppose left grid object is leftGrid and right grid object is rightGrid variables.


var leftGridScroller = leftGrid.getVerticalScroller();
  leftGridScroller.on({
    'bodyscroll': function (event) {
       var rightGridScroller = rightGrid.getVerticalScroller();
       rightGridScroller.el.dom.scrollTop =  leftGridScroller.el.dom.scrollTop;
     }, scope: this
});

And Same way for right hand side grid.


var rightGridScroller = rightGrid.getVerticalScroller();
  rightGridScroller.on({
    'bodyscroll': function (event) {
       var leftGridScroller = leftGrid.getVerticalScroller();
       leftGridScroller.el.dom.scrollTop = rightGridScroller.el.dom.scrollTop;
     }, scope: this
});


This code will work only when you have scroller visible. Else getVerticalScroller will return undefined. So ypu must check for it if you are not sure about number of records in grid.

Same way one can synchronize horizontal scrollbar using above code. Only thing need to change is, you have to use getHorizontalScroller function instead of getVerticalScroller. For horizontal scroller property is scrollLeft.

Same trick can be applied to ExtJs panel scrollbar. Here you can get object of scrollbar using docekdItems if you are using ExtJs version 4.x.x. Please not that thise example is of ExtJs 4.0.2a.