ExtJS Grid - 내 뷰에서 ID로 매장을 참조하는 방법

Question

내 밑에 페이징 도구 모음을 추가하기 위해 내 앱에서 상점을 참조하려고합니다. 대부분의 예제에서 저는 저장소가 ex : store : someStore라는 변수에 의해 참조 된 것을 연구했습니다. 그러나, 난 내 애플 리케이션을 조금 다르게 빌드하고 저장소에 대한 참조 변수를 만들었어요. 나는 아이디 할당 시도했지만이 작동하지 않았다. 내보기 Grid.js에서

을 : 여기

내가 가진 무엇

내보기 모델 GridModel.js에서

Ext.define('myApp.view.user.Grid', { 
    extend: 'Ext.grid.Panel', 
    viewModel: { 
     type: 'user-grid' 
    }, 
    bind: { 
     store: '{users}', 
    }, 
    columns: {...}, 

    //my paging tool bar 
    dockedItems: [{ 
     xtype: 'pagingtoolbar', 
     dock: 'bottom', 
     store: 'girdStore' 
     //store: {users} -> did not work 
    }], 
    ... 
}); 

:

Ext.define('myApp.view.user.GridModel', { 
    extend: 'Ext.app.ViewModel', 

    requires: [ 
     'myApp.model.User' 
    ], 

    stores: { 
     users: { 
      model: 'myApp.model.User', 
      storeId: 'gridStore', 
      autoLoad: true 
     } 
    }, 
    formulas: {...} 
}); 

나는를 {참조하려고 사용자} id 'gridStore'로 저장합니다.이 오류가 발생합니다.

내 모델을 완전히 리팩터링하지 않고 진행하는 가장 좋은 방법은 무엇입니까?

Answer 1

그리드에 대한 참조가있는 경우 getStore 함수를 호출하여 상점을 얻을 수 있습니다. ExtJs 6.2.1 documentation을 참조하십시오.

var grid; // reference to your grid 
var store = grid.getStore(); 

---

당신은 그래서 모두 동일한 저장소를 공유 할 것입니다, 그것은 dockedItems에 연결 한 후 initComponent에있는 저장소를 만들 수 있습니다.

initComponent: function() { 
    var store = Ext.create('Ext.data.Store', { 
     model: 'myApp.model.User', 
     storeId: 'gridStore', 
     autoLoad: true 
    }); 
    this.store = store; 
    this.dockedItems = [{ 
     xtype: 'pagingtoolbar', 
     dock: 'bottom', 
     store:store 
    }]; 
    this.callParent(arguments); 
} 

initComponent

클래스의 새로운 인스턴스를 생성 할 때 description in the documentation를 참조 번이라고합니다.

...It is intended to be implemented by each subclass of Ext.Component to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to callParent in order to ensure that the parent class' initComponent method is also called...

보기는 initComponent입니다.

Ext.define('myApp.view.user.Grid', { 
    extend: 'Ext.grid.Panel', 
    viewModel: { 
     type: 'user-grid' 
    }, 
    initComponent: function() { 
     var store = Ext.create('Ext.data.Store', { 
      model: 'myApp.model.User', 
      storeId: 'gridStore', 
      autoLoad: true 
     }); 
     this.store = store; 
     this.dockedItems = [{ 
      xtype: 'pagingtoolbar', 
      dock: 'bottom', 
      store: store 
     }]; 
     this.callParent(arguments); 
    }, 
    columns: {...}, 
    ... 
});