別の "ビューモデル"でEXTjsビューを再利用する

Question

私は自分自身にEXT 4の使用を教えるためにシンプルなSCRUMシステムを作成しています。

私はMVC3で少し経験がありますが、私はEXT4の仕組みに順応するためにいくつかの問題を抱えています。

私の考えは、列レイアウトビューポートに4つのグリッドを持つことです。各グリッドは現在、独自のビューです。しかし、ビューはほぼ完全に同一です。以下は私の最初のビューです。私は他の3つのビューに対して変更する必要がある行をマークしました。

Ext.define('AM.view.card.BacklogList', { // *** Variable 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.backlogcardlist', // *** Variable 

    title: 'Backlog',  // *** Variable 
    store: 'BacklogCards', // *** Variable 

    selType: 'cellmodel', 
    plugins: [ 
     Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1 
     }) 
    ], 

    columns: [ 
     { 
      header: 'ID', 
      dataIndex: 'external_id', 
      field: 'textfield', 
      width: 50 
     }, 
     { 
      header: 'Name', 
      dataIndex: 'name', 
      field: 'textfield', 
      width: 200 
     }, 
     { 
      header: 'Priority', 
      dataIndex: 'priority_id', 
      renderer: function (value) { 
       if (value == 3) { 
        return "L"; 
       } 
       else if (value == 2) { 
        return "M"; 
       } 
       else { 
        return "H"; 
       } 
      }, 
      width: 70, 
      field: { 
       xtype: 'combobox', 
       queryMode: 'local', 
       typeAhead: true, 
       store: 'Priorities', 
       displayField: 'name', 
       valueField: 'id', 
       listClass: 'x-combo-list-small' 
      } 
     }, 
     { 
      xtype: 'actioncolumn', 
      width: 16, 
      items: [{ 
       icon: 'Styles/Images/zoom.png', // Use a URL in the icon config 
       tooltip: 'Zoom In', 
       handler: function (grid, rowIndex, colIndex) { 
        var rec = grid.getStore().getAt(rowIndex); 
        alert("Edit " + rec.get('name')); 
       } 
      }] 
     } 
    ] 

}); 

私は私のグリッドごとに、それを再利用できるように、私のビューに「ViewModelに」/パラメータを渡すExtJSの中に方法はありますか？

app.js

Ext.application({ 
    name: 'AM', 

    appFolder: 'app', 

    controllers: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards'], 

    launch: function() { 
     Ext.create('Ext.container.Viewport', { 
      layout: 'column', 
      items: [ 
       { 
        xtype: 'backlogcardlist' 
       }, 
       { 
        xtype: 'inprogresslist' 
       }, 
       { 
        xtype: 'reviewlist' 
       }, 
       { 
        xtype: 'donelist' 
       } 
      ] 
     }); 
    } 
}); 

Answer 1

OK！私はここで、この記事を読んで、それを考え出した：

Extjs 4 MVC loading a view from controller

これは私が私のapp.jsファイルに変更する方法である：ここで私はちょうどタイトルのプロパティを変更するんだけど、私が想像

Ext.application({ 
    name: 'AM', 

    appFolder: 'app', 

    controllers: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards'], 

    launch: function() { 
     Ext.create('Ext.container.Viewport', { 
      layout: 'column', 
      defaults: { flex: 1 }, 
      layout: { 
       type: 'hbox', 
       align: 'stretch', 
       padding: 5 
      }, 
      items: [ 
       Ext.widget('backlogcardlist', 
       { 
         title: "Backlog" 
       }), 
       Ext.widget('backlogcardlist', 
       { 
        title: "In Progress" 
       }), 
       { 
        xtype: 'reviewlist' 
       }, 
       { 
        xtype: 'donelist' 
       } 
      ] 
     }); 
    } 
}); 

を他のプロパティを変更することはもはや困難ではないはずです。