如何在Grid中实现UserStory ScheduleState可编辑DPCA柱状条展示

我明白你想要在Rally网格里实现类似SimpleTreeGrid示例中那种带DPCA进度柱状条的可编辑ScheduleState栏的需求，咱们来一步步调整你的代码，搞定这个问题。

问题根源 #

你当前使用的ScheduleStateTemplate只是用来渲染状态文本的模板，而要实现带柱状条的可编辑进度栏，需要用到Rally专门提供的rallyscheduleprogresscolumn网格列组件——这个组件内置了DPCA进度可视化和状态编辑功能。另外，你用自定义Store包装wsapi数据的方式，会丢失Rally数据模型的元信息，导致进度列无法正确识别状态配置。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Custom Store Grid Example</title>
    <script type="text/javascript" src="/apps/2.1/sdk.js"></script>
    <script type="text/javascript">
        Rally.onReady(function() {
            Ext.define('Rally.example.CustomStoreGrid', {
                extend: 'Rally.app.App',
                componentCls: 'app',
                launch: function() {
                    console.log('launch');
                    // 直接使用wsapi Store，无需转成custom Store，保留模型元信息
                    const storyStore = Ext.create('Rally.data.wsapi.Store', {
                        model: 'UserStory',
                        autoLoad: true,
                        listeners: {
                            load: this._onDataLoaded,
                            scope: this
                        },
                        fetch: ['FormattedID', 'ScheduleState', 'Name'] // 增加Name字段方便识别故事
                    });
                },
                _onDataLoaded: function(store, data) {
                    console.log('_onDataLoaded data', data);
                    this.add({
                        xtype: 'rallygrid',
                        showPagingToolbar: true, // 恢复分页栏方便查看更多数据
                        showRowActionsColumn: false,
                        editable: true, // 开启编辑功能
                        store: store, // 直接使用原wsapi Store
                        columnCfgs: [
                            {
                                xtype: 'templatecolumn',
                                text: 'ID',
                                dataIndex: 'FormattedID',
                                width: 100,
                                tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
                            },
                            {
                                text: 'Story Name',
                                dataIndex: 'Name',
                                flex: 1
                            },
                            // 使用rallyscheduleprogresscolumn实现DPCA柱状条与可编辑状态
                            {
                                xtype: 'rallyscheduleprogresscolumn',
                                text: 'Schedule State',
                                dataIndex: 'ScheduleState',
                                flex: 1
                            }
                        ]
                    });
                }
            });

            Rally.launchApp('Rally.example.CustomStoreGrid', {
                name: 'Custom Store Grid Example'
            });
        });
    </script>
    <style type="text/css">
    </style>
</head>
<body></body>
</html>

关键改动说明 #

• 替换列组件：把原来的templatecolumn换成rallyscheduleprogresscolumn，这个组件会自动根据你的Rally项目中UserStory的ScheduleState配置（比如定义的状态顺序、DPCA对应关系）渲染柱状条，并且支持点击直接编辑状态。
• 保留wsapi Store：不再将数据转成自定义Store，这样Rally的网格组件能获取到模型的元数据（比如ScheduleState的允许值、状态顺序），确保进度栏正确渲染。
• 开启编辑功能：将editable设置为true，这样ScheduleState栏就变成可编辑的了。
• 补充必要字段：增加Name字段方便你识别每个用户故事，也可以根据需求添加其他字段。

这样修改后，你的网格应该就能实现类似SimpleTreeGrid示例中的DPCA柱状条效果，并且支持编辑ScheduleState了。

内容的提问来源于stack exchange，提问作者Rakesh