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.

回答1:

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);
    }
});

来源：https://stackoverflow.com/questions/23623079/rally-sdk-app-using-grid-with-collapsible-tree-of-children-stories