在 ExtJS 中的选项卡开关上更新网格面板

Question

I have two separate tabs (Tab A & Tab B). These two tabs share a single store wherein each are in their respective indices. [0] - A , and [1] - B .

My controller initializes the load upon click on its menu leaf such as:

oMe.control({
  '#role-permission-grid-panel': {

    edit: oMe.save,

    beforerender: oMe.loadData,

  },
  '#roles-applicationtype button': {
    click: oMe.filterByApplication
  }
});

applicationtype button is the filter where tab switching of loaded data happens.

When trying to catch the value of the current filter, the controller successfully shows which one was clicked. However, this no longer refreshes the grid panel data.

SampleGridPanel /view :

console.log('Application',oController.sDefaultToggle);

Simply put, I update the data from SampleController , and try to catch it from my SampleGridPanel by calling filterApplication . My SampleGridPanel only loads the store once due to initComponent . I want to pass the updated data (in this case the selected tab) from the controller to the view . How do I notify my view that this change occurred when it only identifies data on initial load?

I'm also a bit confused. On my controller, when calling oMe.loadData beforerender , it knows the last tabbed value, but when I call oMe.loadData from a custom filter function, it no longer reloads the entire store. It only loads the filtered information based on the filter value.

Answer 1

You could listen to the activate and deactivate events of the tabpanel. These are also available in older versions of ExtJS.

If you are using ExtJS 6, you should really consider using ChainedStore .

• A Store contains the data.
• The grids aren't bound to the store, but to a ChainedStore each.
• The ChainedStores have their source set to the store, and use different filter to only get the data that should be shown in their respective grid.

Please note that as of ExtJS 6.0.1 there were bugs in ExtJS that exhibited when combining ChainedStore with GroupingFeature or CellEditing . These should be fixed in ExtJS 6.0.2.