Rally SDK 应用程序使用网格和可折叠的儿童故事树 [英] Rally SDK App using Grid with collapsible tree of children stories

问题描述

是否有可能，以及如何创建一个具有指定列但也显示嵌套在父故事下的子故事的网格状应用程序，就像投资组合层次结构显示它们一样?

Is it possible, and how would one create a grid-like app that with specified columns but also shows children stories nested under their parent stories the way a Portfolio Hierarchy shows them?

据我所知，投资组合层次结构视图不允许附加列.

As far as I can tell, the Portfolio Hierarchy view doesn't allow additional columns.

推荐答案

下面是一个用户故事网格示例，其中的故事嵌套在功能下方，并且可以折叠.部署 html 位于 这个 github repo 中.

Here is an example of a grid of user stories where the stories are nested under features, and collapsible. The deployment html is in 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);
    }
});

这篇关于Rally SDK 应用程序使用网格和可折叠的儿童故事树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！