2

次のコードは、Windows レジストリ キーをフラット ビューで保持するように設計されたデータ ストアを使用します (ツリー ビューは必要ありません)。

キーの列はグループ化に使用され、キーが展開されると、そのキーの下のすべての値を表示できます。値は、(外部) が取得したスコアに従って色付けされ、スコアは「結果」フィールドに格納されます。

私の問題

すべての値のスコアが 0.0 より大きい場合にのみ、キーを折りたたむ必要があります。それ以外の場合は、キーを展開する必要があります。

グループを繰り返し処理し、折りたたむ/展開するかどうかを決定するロジックをどのように/どこに実装しますか?

ありがとう！

Ext.onReady (function () {
var store = Ext.create('Ext.data.Store', {
    storeId:'registryStore',
    // model
    fields:['result', 'key', 'type','value','data'],
    // enable grouping for the data Store
    groupField: 'key',
    // the data itself in JSON format
    data: {'regkeys':[.....data...]},
    // define the JSON data type
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'regkeys'
        }
    }
});

// grouping
var grouping = Ext.create('Ext.grid.feature.Grouping',{
    startCollapsed: true,
});

var regPanel = Ext.create('Ext.grid.Panel', {
    title: 'Registry',
    renderTo: Ext.getBody(),
    // link to grouping object
    features: [grouping],
    store: Ext.data.StoreManager.lookup('registryStore'),
    // model
    columns: [
        { header: 'Result', dataIndex: 'result'},
        { header: 'Type', dataIndex: 'type' },
        { header: 'Value', dataIndex: 'value', width:250,felx:1},
        { header: 'Data', dataIndex: 'data', flex:1}
    ],
    // color's each row according to score
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            if (record.get("result") == 0.0) { //  orange background
                return 'row-unknown';
            }
            else if (record.get("result") < 0.0) { // red background
                return 'row-bad';
            }
            return 'row-good'; // green background
        }
    }, 
    // collapse/expand all botton
    tbar: [{
                text: 'collapse all',
                handler: function (btn) {        
                    grouping.collapseAll();
                }
            },{
                text: 'expand all',
                handler: function (btn) {        
                    grouping.expandAll();
                }
            }],
    }); //Ext.create
}); //Ext.onReady
4

1 に答える 1

2

私は答えを見つけました.ExtJSはグリッドがレンダリングする前にグループ化された状態を編集できないため、非常にハックです.グリッドが処理した後にレンダリングする必要があります. Ext.Grid.Panel のコードに次のコードを追加しました。

        listeners: {
     'afterrender' : function(grid) {
       setTimeout(function(){
        var groups = store.getGroups();
        var gLen = groups.length;
        for (i = 0; i < gLen; i++) {
          // expand the group if at least one childs result <= 0.0
          for (j = 0; j < groups[i].children.length; j++ ){
            if (groups[i].children[j].data["result"] <= 0.0) {
              //console.log(groups[i].name);
              grouping.expand(groups[i].name, false);
              break; // no need to continue checking.
            }
          }
        }
       });
      }
    },//listeners

それが役立つことを願っています..

于 2012-08-07T10:36:10.213 に答える