ExtJs:确定在商店上触发更新事件的网格

时间:2012-05-04 10:28:33

标签: javascript extjs

我在ExtJs 3.3.1中使用了一个livegrid但是相信这个问题对ExtJ来说是全局的。 商店中的监听器如何知道事件来自哪个网格?

这里有为什么和一些代码。

我在商店有一个监听器,在更新时我想知道在网格中选择了哪些行并暂停事件。这一切都是为了让我可以在网格中进行选择,更新该范围内的字段并在整个选择中更新该字段。只需突出显示行,就可以在没有复选框的情况下完成选择。由于这个监听器被许多网格使用,我需要一种方法来从Gridlistener获取它作为参数,但这只是存储,记录和操作

Ext.override(Ext.ux.grid.livegrid.Store, {
    listeners: {
      'update': function(store, record, action) {
        if (action=='commit'){ //each update has 2 actions, an edit and a commit
          var selected = grid.getSelectionModel().getSelections();  //need to know which grid
          if (selected.length>1){ //if more than one row selected
            grid.suspendEvents();
            store.writer.autoSave = false;
            for(var i=0; i < selected.length; i++){
              if (this.fieldChanged) {
                for (var name in this.fieldChanged) { 
                  //get the field changed and update the selection with the value
                  if (selected[i].get(name)!=this.fieldChanged[name]){
                    selected[i].set(name, this.fieldChanged[name]);
                  }
                } 
              }
            }
            grid.resumeEvents();
            store.fireEvent("datachanged", store);
            store.writer.autoSave = true;
          }
        }
        if (action=='edit'){
          this.fieldChanged = record.getChanges()
        }
      }
    }
  });

3 个答案:

答案 0 :(得分:1)

在扩展中会更容易,但也可以在覆盖中完成。

MyGridPanel = Ext.extend(Ext.ux.grid.livegrid.EditorGridPanel, { 
    initComponent: function(){  
        MyGridPanel.superclass.initComponent.call(this);
        this.store.grid = this;
    }
});

编辑---显示如何在覆盖中执行此操作,它并不漂亮,但它很有用。

var oldInit = Ext.ux.grid.livegrid.EditorGridPanel.prototype.initComponent;
Ext.override(Ext.ux.grid.livegrid.EditorGridPanel, {
    initComponent: function(){
        oldInit.call(this);
        this.store.grid = this;
    }
});

答案 1 :(得分:1)

使用商店可能会有更多网格。最好在Ext Js 4中观察Gridpanel类,如下所示:

//Associate all rendered grids to the store, so that we know which grids use a store.
Ext.util.Observable.observe(Ext.grid.Panel);
Ext.grid.Panel.on('render', function(grid){
    if (!grid.store.associatedGrids){
        grid.store.associatedGrids=[];
    }
    grid.store.associatedGrids.push(grid);
});

答案 2 :(得分:0)

我自己找到了一个解决方案,我覆盖了livegrid,在其商店中包含对自身的引用,如此

Ext.override(Ext.ux.grid.livegrid.EditorGridPanel, {
    listeners: {
      'afterrender': function(self) {
        this.store.grid = this.id;
      }
    }
  });

然后在我的商店监听器中,我可以参考store.grid