아이들의 접을 수있는 트리가있는 격자를 사용하여 랠리 SDK 응용 사례

Question

특정 열과 함께 그리드 모양의 응용 프로그램을 만드는 방법과 포트폴리오 계층 구조에서 부모 계층 스토리에 중첩 된 자식 이야기를 어떻게 나타낼 수 있습니까?

내가 알 수있는 한, 포트폴리오 계층 구조보기는 추가 열을 허용하지 않습니다.

Answer 1

다음은 기능 아래에 스토리가 중첩되어 있고 접을 수있는 사용자 스토리의 그리드 예입니다. 배포 html은 this github repo입니다.

Ext.define('CustomApp', { 
    extend: 'Rally.app.App', 
    componentCls: 'app', 
    launch: function() { 
     var today = new Date().toISOString(); 
     Ext.create('Rally.data.wsapi.Store', { 
       model: 'UserStory', 
       fetch: ['ObjectID', 'FormattedID', 'Name', 'ScheduleState', 'Feature'], 
       autoLoad: true, 
       filters: [ 
        { 
         property: 'Iteration.StartDate', 
         operator: '<=', 
         value: today 
        }, 
        { 
         property: 'Iteration.EndDate', 
         operator: '>=', 
         value: today 
        }, 
        { 
         property: 'Feature', 
         operator: '!=', 
         value: null 
        } 
       ], 
       listeners: { 
        load: this._onDataLoaded, 
        scope: this 
       } 
       }); 
    }, 
    _onDataLoaded: function(store, records){ 
     var that = this; 
     var promises = []; 
     _.each(records, function(story) { 
      promises.push(that._getFeature(story, that)); 
     }); 

     Deft.Promise.all(promises).then({ 
      success: function(results) { 
       that._stories = results; 
       that._makeGrid(); 
      } 
     }); 
    }, 

    _getFeature: function(story, scope) { 
     var deferred = Ext.create('Deft.Deferred'); 
     var that = scope; 
      var featureOid = story.get('Feature').ObjectID; 
      Rally.data.ModelFactory.getModel({ 
      type: 'PortfolioItem/Feature', 
      scope: this, 
      success: function(model, operation) { 
       fetch: ['State'], 
       model.load(featureOid, { 
        scope: this, 
        success: function(record, operation) { 
         var featureState = record.get('State')._refObjectName; 
         var storyRef = story.get('_ref'); 
         var storyOid = story.get('ObjectID'); 
         var storyFid = story.get('FormattedID'); 
         var storyName = story.get('Name'); 
         var storyState = story.get('ScheduleState'); 
         var feature = story.get('Feature'); 

         result = { 
            "_ref"   : storyRef, 
            "ObjectID"  : storyOid, 
            "FormattedID" : storyFid, 
            "Name"   : storyName, 
            "ScheduleState" : storyState, 
            "Feature"  : feature, 
            "FeatureState" : featureState, 
            "FeatureID"  : featureOid 
           }; 
         deferred.resolve(result);  
        } 
       }); 
      } 
     }); 
     return deferred; 
    }, 

    _makeGrid: function() { 
     var that = this; 

     if (that._grid) { 
      that._grid.destroy(); 
     } 

     var gridStore = Ext.create('Rally.data.custom.Store', { 
      data: that._stories, 
      groupField: 'FeatureID', 
      pageSize: 1000, 
     }); 

     that._grid = Ext.create('Rally.ui.grid.Grid', { 
      itemId: 'storyGrid', 
      store: gridStore, 
      features: [{ftype:'grouping'}], 
      columnCfgs: [ 
       { 
        text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn', 
        tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate') 
       }, 

       { 
        text: 'Name', dataIndex: 'Name', 
       }, 
       { 
        text: 'ScheduleState', dataIndex: 'ScheduleState', 
       }, 
       { 
        text: 'Feature', dataIndex: 'Feature', 
        renderer: function(val, meta, record) { 
         return '<a href="https://rally1.rallydev.com/#/detail/portfolioitem/feature/' + record.get('Feature').ObjectID + '" target="_blank">' + record.get('Feature').FormattedID + '</a>'; 
        } 
       }, 
       { 
        text: 'Feature State', dataIndex: 'FeatureState', 
       } 
      ] 
     }); 

     that.add(that._grid); 
     that._grid.reconfigure(gridStore); 
    } 
});