ExtJS 5.x如何在存儲加載後更改網格視圖（viewConfig）？

我在視圖模型商店，如：ExtJS 5.x如何在存儲加載後更改網格視圖（viewConfig）？

Ext.define('MyApp.page.PageModel', { 
    extend: 'Ext.app.ViewModel', 
    //... 

    stores: { 
     Posts: { 
      model: //... 
     } 
    } 
});

像一個網格：

Ext.define('MyApp.page.MainView', { 
    extend: 'Ext.panel.Panel', 
    //... 

    initComponent: function() { 
     var me = this; 
     //... 

     me.items = [ 
      { 
       xtype: 'grid', 
       bind: { 
        store: '{Posts}' 
       }, 
       columns: [ /* ... */ ], 
       viewConfig: { 
        getRowClass: function (record) { 
         //... 
        } 
       } 
      } 
     ]; 

     me.callParent(arguments); 
    } 
});

如何變更網格視圖後店負荷（在我的情況）？

我試圖用電網事件（beforerender和viewready）mon和addManagedListener方法，我試圖用on和addListener方法來存儲這些網格內的事件，但這種方法是行不通的。

有人有什麼想法嗎？

來源

2017-09-13 vitaliklibra

你想改變什麼？您必須找到實際設置的位置/方式，例如您可以在運行時通過覆蓋網格視圖上的getRowClass函數來更改getRowClass函數：'grid.getView（）。getRowClass = function（）{...}'。之後您可能必須重新渲染網格（'grid.getView（）。refresh（）'），以便應用新函數。 – Alexander

我想更改'grid'的'viewConfig'中的'emptyText'參數。但是我只有在加載商店後才需要這樣做。而你的解決方案並不是解決問題，因爲從任何商店事件我都無法訪問他的上層組件（在我的情況下是'grid'）。 – vitaliklibra

我使用覆蓋了Ext.view.AbstractView，只是存儲負載事件之前清除emptyEl和viewEl

store.on('beforeload', function() { 
    me.clearEmptyEl(); 
    me.clearViewEl(); 
});

這裏是我的完整覆蓋

Ext.define('Ext.overrides.view.AbstractView', { 
    override: 'Ext.view.AbstractView', 

    onBindStore: function(store, initial, propName) { 
     var me = this; 

     me.setMaskBind(store); 
     // After the oldStore (.store) has been unbound/bound, 
     // do the same for the old data source (.dataSource). 
     if (!initial && propName === 'store') { 
      // Block any refresh, since this means we're binding the store, which will kick off 
      // a refresh. 
      me.preventRefresh = true; 
      // Ensure we have the this.store reference set correctly. 
      me.store = store; 
      me.bindStore(store, false, 'dataSource'); 
      me.preventRefresh = false; 
     } 
     store.on('beforeload', function() { 
      me.clearEmptyEl(); 
      me.clearViewEl(); 
     }); 
    } 
});

來源

2017-09-13 11:13:47

非常感謝，@ A.Pokidin !!!這不完全是我所需要的，但我已經嘗試了您的解決方案，並且我喜歡我牛逼！ ExtJS組件的覆蓋對我來說今天非常困難，所以你對我的問題非常幫助！祝你今天愉快）） – vitaliklibra

在ExtJS的6，功能setEmptyText可對電網會爲你做到這一點：

initComponent: function() { 
    var me = this; 
    //... 

    me.callParent(arguments); 
    me.getStore().on('load', function() { 
     me.setEmptyText(...); 
    }) 
}

在ExtJS的5，你必須做你自己：

me.getStore().on('load', function() { 
     var emptyText = 'Test empty text'; 
     me.getView().emptyText = '<div class="' + me.emptyCls + '">' + emptyText + '</div>'; 
     me.getView().refresh(); 
    })

Relevant fiddle ，將在渲染後3秒加載它的存儲。

來源

2017-09-13 09:24:53 Alexander

非常感謝@亞歷山大！你的例子工作得很好，我將它保存爲未來的功能。在我的情況下，我不能使用這個解決方案，因爲'me'不是網格 - 它是他的父面板，並且爲了使用這個，我需要重構所有代碼... =（ – vitaliklibra

不，您不必你可以使用'var grid = me.down（'grid'）'，之後，將「me」的所有實例與「grid」交換。 – Alexander

我之前嘗試過使用它（在我寫下我的問題之前）聽衆（就像在你的小提琴的例子中）在我的項目中沒有調用我的情況，我認爲這是因爲有些行爲阻止了他的聲音，但我不知道究竟是什麼，我找不到它 – vitaliklibra

ExtJS 5.x如何在存儲加載後更改網格視圖（viewConfig）？

回答

相關問題