javascript - ExtJS 4 - 在 MVC 架构中重用组件

Question

我有一个用户列表，如果我单击此列表中的一个项目，将打开一个窗口。这是每个用户的同一个窗口，可以同时打开多个窗口。该窗口显示用户信息，因此对于此组件，我有相同的商店和相同的模型。

但是如果我在特定窗口中加载数据，我会在所有其他打开的窗口中加载相同的数据。

Ext.define('Cc.view.absence.Grid', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.absencegrid',

  border:false,

  initComponent: function() {
    Ext.apply(this, {
      store: Ext.create('Ext.data.Store', {
        model: 'Cc.model.Absence',
        autoLoad: false,
        proxy: {
          type: 'ajax',
          reader: {
            type: 'json'
          }
        }
      }),
      columns: [
        {header: 'Du', dataIndex: 'startdate', flex: 3, renderer: this.formatDate},
        {header: 'Au', dataIndex: 'enddate', flex: 3, renderer: this.formatDate},
        {header: 'Exercice', dataIndex: 'year', align: 'center', flex: 1},
        {header: 'Statut', xtype:'templatecolumn', tpl:'<img src="../images/status-{statusid}.png" alt="{status}" title="{status}" />', align: 'center', flex: 1},
        {header: 'Type d\'absence', dataIndex: 'absencetype', align: 'center', flex: 2},
        {header: 'Commentaires', dataIndex: 'comment', flex: 6}
      ],
      dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [
          { xtype: 'tbfill'},
          { xtype: 'button', text: 'Rafraichir', action: 'refresh', iconCls: 'item-rafraichir' }
        ]
      }]
    });

    this.callParent(arguments);
  },

  formatDate: function(date) {
    if (!date) {
      return '';
    }
    return Ext.Date.format(date, 'l d F Y - H:i');
  }

});

我的 Controller :

Ext.define('Cc.controller.Absences', {
  extend: 'Ext.app.Controller',

  models: ['Absence', 'AbsenceHistory'],

  views: [],

  refs: [
    { ref: 'navigation', selector: 'navigation' },
    { ref: 'tabPanel', selector: 'tabpanel' },
    { ref: 'absencePanel', selector: 'absencepanel' },
    { ref: 'refreshButton', selector: 'absencepanel button[action=refresh]'},
    { ref: 'absenceGrid', selector: 'absencegrid' },
    { ref: 'absenceHistory', selector: 'absencehistory' },
  ],

  init: function() {
    this.control({
      'absencepanel button[action=refresh]': {
        click: this.onClickRefreshButton
      },
      'absencegrid': {
        selectionchange: this.viewHistory
      },
      'absencegrid > tableview': {
        refresh: this.selectAbsence
      },
    });
  },

  selectAbsence: function(view) {
    var first = this.getAbsenceGrid().getStore().getAt(0);
    if (first) {
      view.getSelectionModel().select(first);
    }
  },

  viewHistory: function(grid, absences) {
    var absence = absences[0],
      store = this.getAbsenceHistory().getGrid().getStore();
    if(absence.get('id')){
      store.getProxy().url = '/absence/' + absence.get('id') +'/history';
      store.load();
    }
  },

  onClickRefreshButton: function(view, record, item, index, e){
    var store = this.getAbsenceGrid().getStore();
    store.load();
  },
});

其他只创建一个 absence.Panel 实例的 Controller :

Ext.define('Cc.controller.Tools', {
  extend: 'Ext.app.Controller',

  stores: ['Tools', 'User' ],

  models: ['Tool'],

  views: [],

  refs: [
    { ref: 'navigation', selector: 'navigation' },
    { ref: 'tabPanel', selector: 'tabpanel' },
    { ref: 'toolList', selector: 'toollist' },
    { ref: 'toolData', selector: 'toollist dataview' }
  ],

  init: function() {
    this.control({
      'toollist dataview': {
        itemclick: this.loadTab
      },
    });
  },

  onLaunch: function() {
    var dataview = this.getToolData(),
        store = this.getToolsStore();

    dataview.bindStore(store);
  },

  loadTab: function(view, record, item, index, e){
    var tabPanel = this.getTabPanel();
    switch (record.get('tab')) {
      case 'absences':
        if(Ext.getCmp('absence-panel')){
          tabPanel.setActiveTab(Ext.getCmp('absence-panel'));
        }
        else {
          var panel = Ext.create('Cc.view.absence.Panel',{
            id: 'absence-panel'
          }),
              store = panel.getGrid().getStore();
          panel.enable();
          tabPanel.add(panel);
          tabPanel.setActiveTab(panel);
          store.getProxy().url = '/person/' + this.getUserId() +'/absences';
          store.load();
        }
      break;

      default: 
      break;
    }
  },

  getUserId: function(){
    var userStore = this.getUserStore();
    var id = userStore.first().get('id')
    return id;
  }
});

创建许多 absence.Panel 实例的另一个 Controller :

Ext.define('Cc.controller.Agents', {
  extend: 'Ext.app.Controller',

  stores: ['Agents'],

  models: ['Agent', 'Absence', 'AbsenceHistory'],

  views: ['agent.List', 'agent.Window', 'absence.Panel', 'absence.Grid', 'absence.History'],
  refs: [
    { ref: 'agentList', selector: 'agentlist' },
    { ref: 'agentData', selector: 'agentlist dataview' },
    { ref: 'agentWindow', selector: 'agentwindow' },
  ],

  init: function() {
    this.control({
      'agentlist dataview':{
        itemclick: this.loadWindow
      },
    });
  },

  onLaunch: function() {
    var dataview = this.getAgentData(),
        store = this.getAgentsStore();
    dataview.bindStore(store);
  },

  loadWindow: function(view, record, item, index, e){
    if(!Ext.getCmp('agent-window'+record.get('id'))){
      var window = Ext.create('Cc.view.agent.Window', {
        title: 'À propos de '+record.get('firstname')+' '+record.get('lastname'),
        id: 'agent-window'+record.get('id')
      }),
          tabPanel = window.getTabPanel();
          absencePanel = window.getAbsencePanel();
          store = absencePanel.getGrid().getStore();

      absencePanel.enable();
      tabPanel.add(absencePanel);
      tabPanel.setActiveTab(absencePanel);
      store.getProxy().url = '/person/' + record.get('id') +'/absences';
      store.load();
    }
    Ext.getCmp('agent-window'+record.get('id')).show();
  }
});

和 absence.Panel View ，absence.Grid 的容器:

Ext.define('Cc.view.absence.Panel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.absencepanel',

  title: 'Mes absences',
  iconCls: 'item-outils',
  closable: true,
  border: false,
  disabled: true,
  layout: 'border',

  initComponent: function() {
    this.grid = Ext.create('Cc.view.absence.Grid', {
      region: 'center'
    });
    this.history = Ext.create('Cc.view.absence.History', {
      region: 'south',
      height: '25%'
    });
        Ext.apply(this, {
      items: [
        this.grid,
        this.history
      ]
    });

        this.callParent(arguments);
    },

  getGrid: function(){
    return this.grid;
  },

  getHistory: function(){
    return this.history;
  }
});

Answer 1

是的。这是我在做什么的更多详细说明。我希望你已经完整地阅读了论坛。还有一个信息我们不清楚。这就是在 Controller 中使用“stores”属性的确切用法。恕我直言，Sencha 团队应该用复杂的示例更详细地解释 MVC。

是的，您新发布的内容是正确的。创建新 View 后，创建商店的新实例!现在，从论坛讨论中，人们对 MVC 争论不休。我肯定会选择 steffenk .我们在这里所做的是在我的 View 中注入(inject)一个新的商店实例。我忽略了 Controller 的 stores 属性。

这是一个例子:

这是我的看法。它是我在 tabpanel 上显示的一个面板(带有用户个人资料信息):

Ext.define('Dir.view.profile.View' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.profileview',
    title : 'Profile',
    profileId: 1,   // default and dummy value
    initComponent: function() {

        // configure necessary stuff, I access my store etc here..       
        // console.log(this.profileStore);
        this.callParent(arguments);         
    },
    // Other view methods goes here
});

现在，看看我的 Controller :

Ext.define('Dir.controller.Profile', {
    extend: 'Ext.app.Controller',
    //stores: ['Profile'],   --> Note that I am NOT using this!
    refs: [     
        {ref:'cp',selector: 'centerpane'}
    ],
    views: ['profile.View'],
    init: function() {
        // Do your init tasks if required
    },  
    displayProfile: function(selectedId) {

            // create a new store.. pass your config, proxy url etc..
        var store = Ext.create('Dir.store.Profile',{profileId: selectedId});

        console.log('Display Profile for ID ' + selectedId);    

        // Create instance of my view and pass the new store
        var view = Ext.widget('profileview',{profileId: selectedId,profileStore: store});

        // Add my new view to centeral panel and display it...
        this.getCp().add(view);
        this.getCp().setActiveTab(view);
    }
});

我的 displayProfile() 是从一些事件监听器(菜单、树等)调用的，它传递了一个 id。我的 Controller 使用这个 id 来设置一个新的商店和 View 。我希望上面的代码能让你清楚地了解我昨天所说的内容。

在您的 Controller 中，您必须添加 Ext.require('Dir.store.Profile'); 以便 ExtJS 知道您有这样一个商店。这是因为我们没有使用 stores 属性。

现在，您可以在其他地方重用这些创建的商店，您可以将它们添加到 StoreManager .有了这个，您可以在任何地方访问您创建的商店，添加和删除商店。但这会带来管理商店实例的开销。

---

为什么要用不同的 View 共享同一个商店实例？当您有一个新 View 时，创建一个新的商店实例。这将防止在刷新一个窗口时更新的数据出现在其他窗口上。