extjs: прокрутка буфера с сеткой с редактированием/удалением строк/добавлением

Question

Кто-нибудь видел какой-либо образец сетки extjs с буферизованной прокруткой с поддержкой новой строки, редактирования строк и удаления строк?

Можно использовать плагины CellEditing и RowEditing с буферизованной прокруткой?

Возможно ли редактирование строк с помощью буферизованной прокрутки?

Приветствия,

Ави

Answer 1

я открыл нить на Ext форуме и получил ответ, вставку и удаление является НЕ поддерживается с буферизацией прокрутки.

http://forums.ext.net/showthread.php?27969-Buffered-Scrolling-with-Row-Editing-Deletion-Addition&p=124559&posted=1#post124559

Cheers,

Avi

Answer 2

Я изменил этот пример http://docs.sencha.com/extjs/4.2.2/#!/example/grid/infinite-scroll.html, добавлен редактор строк. Открыть пример: http://jsfiddle.net/zAnZg/1/, нажмите на записи, изменить значение, а затем нажмите кнопку «Обновить»

Ext.require([ 
    'Ext.grid.*', 
    'Ext.data.*', 
    'Ext.util.*', 
    'Ext.grid.plugin.BufferedRenderer' 
]); 


Ext.onReady(function(){ 
    Ext.define('ForumThread', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      'title', 'forumtitle', 'forumid', 'username', { 
       name: 'replycount', 
       type: 'int' 
      }, { 
       name: 'lastpost', 
       mapping: 'lastpost', 
       type: 'date', 
       dateFormat: 'timestamp' 
      }, 
      'lastposter', 'excerpt', 'threadid' 
     ], 
     idProperty: 'threadid' 
    }); 

    // create the Data Store 
    var store = Ext.create('Ext.data.Store', { 
     id: 'store', 
     model: 'ForumThread', 
     remoteGroup: true, 
     // allow the grid to interact with the paging scroller by buffering 
     buffered: true, 
     leadingBufferZone: 300, 
     pageSize: 100, 
     proxy: { 
      // load using script tags for cross domain, if the data in on the same domain as 
      // this page, an Ajax proxy would be better 
      type: 'jsonp', 
      url: 'http://www.sencha.com/forum/remote_topics/index.php', 
      reader: { 
       root: 'topics', 
       totalProperty: 'totalCount' 
      }, 
      // sends single sort as multi parameter 
      simpleSortMode: true, 
      // sends single group as multi parameter 
      simpleGroupMode: true, 

      // This particular service cannot sort on more than one field, so grouping === sorting. 
      groupParam: 'sort', 
      groupDirectionParam: 'dir' 
     }, 
     sorters: [{ 
      property: 'threadid', 
      direction: 'ASC' 
     }], 
     autoLoad: true, 
     listeners: { 

      // This particular service cannot sort on more than one field, so if grouped, disable sorting 
      groupchange: function(store, groupers) { 
       var sortable = !store.isGrouped(), 
        headers = grid.headerCt.getVisibleGridColumns(), 
        i, len = headers.length; 

       for (i = 0; i < len; i++) { 
        headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable; 
       } 
      }, 

      // This particular service cannot sort on more than one field, so if grouped, disable sorting 
      beforeprefetch: function(store, operation) { 
       if (operation.groupers && operation.groupers.length) { 
        delete operation.sorters; 
       } 
      } 
     } 
    }); 

    function renderTopic(value, p, record) { 
     return Ext.String.format(
      '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>', 
      value, 
      record.data.forumtitle, 
      record.getId(), 
      record.data.forumid 
     ); 
    } 

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { 
     clicksToMoveEditor: 1, 
     clicksToEdit: 1, 
     autoCancel: false, 
     listeners:{ 
      edit: function(editor, e){ 
       Ext.MessageBox.alert(
        'Just create Ajax recuest here. Post changed record:<br/>' + 
        Ext.JSON.encode(e.record.data) 
       ); 
      } 
     } 
    });  

    var grid = Ext.create('Ext.grid.Panel', { 
     width: 700, 
     height: 500, 
     collapsible: true, 
     title: 'ExtJS.com - Browse Forums', 
     store: store, 
     loadMask: true, 
     selModel: { 
      pruneRemoved: false 
     }, 
     multiSelect: true, 
     viewConfig: { 
      trackOver: false 
     }, 
     features:[{ 
      ftype: 'grouping', 
      hideGroupedHeader: false 
     }], 
     plugins: [rowEditing], 
     // grid columns 
     columns:[{ 
      xtype: 'rownumberer', 
      width: 50, 
      sortable: false 
     },{ 
      tdCls: 'x-grid-cell-topic', 
      text: "Topic", 
      dataIndex: 'title', 
      flex: 1, 
      renderer: renderTopic, 
      sortable: true, 
      editor: { 
       allowBlank: false 
      } 
     },{ 
      text: "Author", 
      dataIndex: 'username', 
      width: 100, 
      hidden: true, 
      sortable: true 
     },{ 
      text: "Replies", 
      dataIndex: 'replycount', 
      align: 'center', 
      width: 70, 
      sortable: false, 
      editor: { 
       xtype: 'numberfield', 
       allowBlank: false, 
       minValue: 1, 
       maxValue: 150000 
      } 
     },{ 
      id: 'last', 
      text: "Last Post", 
      dataIndex: 'lastpost', 
      width: 130, 
      renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'), 
      sortable: true, 
      groupable: false, 
      editor: { 
       xtype: 'datefield', 
       allowBlank: false, 
       format: 'm/d/Y', 
       minValue: '01/01/2006', 
       minText: 'Cannot have a start date before the company existed!', 
       maxValue: Ext.Date.format(new Date(), 'm/d/Y') 
      } 
     }], 
     renderTo: Ext.getBody() 
    }); 
});