ExtJS 6.2 - 現代のグリッドセルレンダラーに関する問題点store.load（）

Question

現代のツールキットにはExtJS 6.2バージョンの問題があります。 私は gridコンポーネントの内側に使用しています。 renderer configを使用して、サーバー側の色に基づいてセルテキストの色を変更したいと思います。 今私はもう一度wokringだけです、私は再びrefreshまたはload私たちの店はrenderer機能を呼び出すされていません。

ログオンコンソールを表示するには、開発ツールを開いてください。

ここに私のFIDDLEがあります。このFIDDLEで行っている私の努力を見ることができます。

ありがとうございました。

コードスニペット

Ext.application({ 
    name: 'GridDemo', 
    launch: function() { 

     //Common renderer function for grid column 
     function nameRenderer(value, rec, dataIndex, cell) { 
      console.log(this.up('grid').getTitle()); 
      cell.setStyle({ 
       color: rec.get('color') 
      }); 
      return `<span class="x-custom-span">${value}</span>`; 
     } 

     //UserProfile Model 
     Ext.define('UserProfile', { 
      extend: 'Ext.data.Model', 
      fields: ['userId', 'name', 'email', 'phone', 'color'], 
      idProperty: 'userId' 
     }); 
     //store 1 for grid 1 
     Ext.create('Ext.data.Store', { 
      storeId: 'gridStore1', 
      model: 'UserProfile', 
      clearOnLoad: true, 
      proxy: { 
       url: 'grid1_data.json', 
       type: 'ajax', 
       reader: { 
        type: 'json', 
        rootProperty: 'data' 
       } 
      }, 
      autoLoad: true 
     }); 
     //store 2 for grid 2 
     Ext.create('Ext.data.Store', { 
      storeId: 'gridStore2', 
      model: 'UserProfile', 
      clearOnLoad: true, 
      proxy: { 
       url: 'grid2_data.json', 
       type: 'ajax', 
       reader: { 
        type: 'json', 
        rootProperty: 'data' 
       } 
      }, 
      autoLoad: true 
     }); 
     //Custom grid 
     Ext.define('CustomGrid', { 
      extend: 'Ext.grid.Grid', 
      xtype: 'customgrid', 
      flex: 1, 
      width: '100%', 
      columns: [{ 
       dataIndex: 'userId', 
       width: 50, 
       text: 'ID' 
      }, { 
       flex: 1, 
       text: 'Name', 
       dataIndex: 'name', 
       cell: { 
        encodeHtml: false, 
        renderer: nameRenderer 
       } 
      }, { 
       flex: 1, 
       text: 'Email', 
       dataIndex: 'email' 
      }, { 
       flex: 1, 
       text: 'Phone', 
       dataIndex: 'phone' 
      }] 
     }); 

     //Panel with 2 grid. 
     Ext.create({ 
      xtype: 'panel', 
      itemId: 'myPanel', 
      fullscreen: true, 
      layout: 'vbox', 
      defaults: { 
       xtype: 'customgrid', 
       cls: 'x-my-grid' 
      }, 
      items: [{ 
       xtype: 'button', 
       flex: '', 
       cls: 'x-refresh-btn', 
       text: 'Refresh Data', 
       handler: function() { 
        var grids = this.up('#myPanel').query('grid'); 

        //Grid1 store load with local json 2 
        grids[0].getStore().load({ 
         url: 'grid2_data.json' 
        }); 

        //Grid2 store load with local json 1 
        grids[1].getStore().load({ 
         url: 'grid1_data.json' 
        }); 
       } 
      }, { 
       title: 'Grid 1', 
       store: 'gridStore1' 
      }, { 
       title: 'Grid 2', 
       store: 'gridStore2' 
      }] 
     }); 
    } 
}); 

Answer 1

私は、同じデータを持つのExtJS 6.2の問題で問題を発見しました。 nameやuserIdのように同じデータをサーバー側から取得すると、columnレンダラーは呼び出しません。現時点では私はこのようなこの問題の解決策を持っているので、： -

Ext.define('UserProfile', { 
    extend: 'Ext.data.Model', 
    fields: ['userId', 'name', 'email', 'phone', 'color', { 
     name: 'dtnow', 
     type: 'date', 
     convert: function(v) { 
      return Ext.Date.now();//this is always different for every records. 
     } 
    }], 
    idProperty: 'userId' 
}); 

私は、モデル内のdtnowフィールドを使用してdataIndex: 'name'の代わりにdataIndex: 'dtnow'を入れています。だからこの場合私の列rendererは常に呼び出します。

私はvalueの代わりにrendererからrecord.get('name')を返しました。

//Common renderer function for grid column 
function nameRenderer(value, record, dataIndex, cell) { 
    console.log(this.up('grid').getTitle()); 
    cell.setStyle({ 
     color: record.get('color') 
    }); 
    return `<span class="x-custom-span">${record.get('name')}</span>`; 
} 

は、ここに私のFIDDLE作業更新されます。