[Sencha ExtJS 4] Truy cập Flickr Search API

Nếu bạn bắt đầu tiếp cận với ExtJS 4 và tham khảo bài viết của Evan Trimboli về việc truy cập Flickr Search API thì có thể bạn sẽ gặp 1 chút trở ngại với ExtJS 4. Blog này viết cho các phiên bản cũ của ExtJS – có thể là 3.x nên không còn đúng khi viết trên nền Ext JS 4.0

Tôi không tìm cách port lại các class Proxy cũng như JSON Reader mà chỉ đưa ra một cách tiếp cận khác, đó là hiện thực lớp PhotoStore để thực hiện việc truy cập Flickr Search API.

Ext.define('FlickrSearch.store.PhotoStore', {
          extend: 'Ext.data.Store',
          model: 'FlickrSearch.model.PhotoModel',
          proxy: {
                type: "jsonp",
                url: "http://api.flickr.com/services/rest/",
                callbackKey: 'jsoncallback',
                actionMethods: {
                    read: 'POST'
                },
           extraParams: {
               api_key: '7bcd4d0a48fc6fe0e86ec660f95541a9',
               method: 'flickr.photos.search',
               format:'json',
               nojsoncallback:'1'
           },
          reader: {
              type: 'json',
              root: 'photos.photo',
              totalProperty: 'photos.total',
              id: 'id'
          }
      },
});


// Model
Ext.define('FlickrSearch.model.PhotoModel',{
            extend: 'Ext.data.Model',
            fields:[
                    { name:'id'},
                    { name:'owner'},
                    { name:'secret'},
                    { name:'server'},
                    { name: 'farm', type: 'int' },
                    { name:'title'},
                    { name: 'ispublic', type: 'boolean' },
                    { name: 'isfriend', type: 'boolean' },
                    { name: 'isfamily', type: 'boolean' }
       ]});

 

Để thực hiện search 1 term với Flickr API,

doSearch: function(term) {
       Ext.getCmp('images-grid').store.load({params: { text: term }});
 }

Nhận đinh: 4.2.0 có thể nói là phiên bản update toàn diện của Ext JS và việc tương thích với ExtJS 3.x là rất thấp.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s