Question

我正在尝试创建一个在网格视图中显示数据的自定义Rally应用。在另一个问题Rally SDK App Using Grid with collapsible tree of children stories中，nickm发布了一些示例代码

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 Grid相同的方式显示ScheduleState和Blocked列（如图形表示）。我已经尝试通过在columnCfgs块中使用以下内容来弄清楚如何使用templatecolumn xtype：

{   text: 'State', dataIndex: 'ScheduleState', xtype: 'templatecolumn',
                tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate') }

此操作失败并在sdk-debug.js中导致JS错误：

未捕获的TypeError：无法读取属性＆＃39; getAllowedValueStore＆＃39;的 undefined sdk-debug.js：190539 Ext.define.loadStates

我在“阻止”列中遇到了不同的错误，但我无法弄清楚如何将其显示为红色阻止图标。

This is what I'm trying to achieve

Answer 1

通过一些调整，我希望这可以在AppSDK2的下一个版本中运行，但是现在，ScheduleState和Blocked的渲染只适用于wsapi数据存储。使用

tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate')

还不够。自定义商店无法访问有效状态。

<强>更新

ScheduleState和Blocked的渲染在截至本更新日期的当前x版本的AppSDK2中工作，5/22

<script type="text/javascript" src="/apps/x/sdk.js"></script>

此修补程序最终将进入AppSDK2的下一个正式版本，但现在您可以将其与x版本的AppSDK2一起使用。

警告：x版本的AppSDK永远不会稳定 - 不断对其进行更改。

查看完整code example here。

在x版本的AppSDK中，你可以这样做：

{
   text: 'ScheduleState', dataIndex: 'ScheduleState', xtype: 'templatecolumn',
      tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate',
           {
              states: ['Defined', 'In-Progress', 'Completed', 'Accepted'],
              field: {name: 'ScheduleState' }
            })
},
{
   text: 'Blocked', dataIndex: 'Blocked', xtype: 'templatecolumn',
      tpl: Ext.create('Rally.ui.renderer.template.BlockedTemplate')
}

此外，目前，在网格配置中将此设置为false：

enableBlockedReasonPopover: false

如何以Rally的网格方式显示自定义网格中的ScheduleState和Blocked列

1 个答案: