Add items to List with ajax proxy store

[sandrosss]

Hello everyone,


I am facing the following problem:


I have a component of type 'Ext.dataview.List' within a 'Container'. This list is loaded by ajax proxy store.


When I do an insert, sending data to the server that are saved in the database, and then I need to add it in the list. Other users can insert a new record in the database, and update my list when necessary to bring these new entries to add.


An important detail is that these lists are very large, and can not hold a reload of the whole store, just need to pick what is new.


How to add the result of these new items on my list?


I've made several attempts with methods related to the component 'Ext.dataview.List', 'Ext.data.Store' and 'Ext.data.proxy.Proxy' present in the documentation sencha touch 2.1.


Do you have any suggestions?

Below is the code:

Model:

Ext.define('MyApp.model.News', {
    
    extend: 'Ext.data.Model',
    
    config: {
        
        fields: [
            {name: 'id',  type: 'integer'},
            {name: 'title',  type: 'string'},
            {name: 'description',  type: 'string'}
        ]
    }
});

Store:

Ext.define('MyApp.store.News', {
    
    extend: 'Ext.data.Store',
    config: {


        model: 'MyApp.model.News',
        autoLoad: false,
        sorters: 'id',


        proxy: {
            type: 'ajax',
            url: 'http://mydomain.com/news/',
            
            reader: {
                type: 'json',
                rootProperty: 'response.news'
            }
        }
    }
});

View: (only part of the list)

var tplNews = new Ext.XTemplate(


    '<div>',


        "<img src='{[values.photo]}' width='35px' height='35px' style='float: left;' />",


        '<p style="font-weight: bold; font-size: 11px; margin-left: 40px;">{title}</p>',


        '<p style="color: #555; font-size: 14px; margin-left: 40px; padding-top: 5px">{description}</p>',


    '</div>'


);


( more code...)


{
  xtype   : 'list',
  store   : 'News',
  itemTpl : this.tplNews,
  itemId  : 'newsList',
  tplWriteMode: 'insertAfter',
  scrollToTopOnRefresh: false,
  scrollable: true,
  style   : 'margin-bottom: 5px;',


  listeners: {


      initialize: function(){
          MyApp.app.newsList = this;
      },


      painted: function(){
          MyApp.app.newsList.getScrollable().getScroller().scrollToEnd();
      }
  }
}

Controller (only the part in question)

   onLoadItems: function (list, index, element, record) {


        var news = Ext.getStore('News');


        news.getProxy().setExtraParams({
            myID : window.localStorage.getItem('myID'),            
            lastID : 0  //0 to first load
        });


        news.load();


        Ext.Viewport.setActiveItem({
            xtype: 'newsview'
        });
    },