Question

有没有办法在拉力赛网格中实现缺陷套件弹出窗口，允许查看与缺陷相关的缺陷套件？目前，只有特定缺陷的缺陷套件可用。

Answer 1

这个需要一点点修补，但这就是我想出来的。我包含了完整的应用程序，因为有一些移动部件。基本上这个设置反映了其他现有的popover的构建方式（缺陷，任务等）

首先我们定义一个popover。我借用了TaskPopover中的代码作为起点，然后更新了底部附近的parentProperty和childField配置，并更改了要显示的列。

接下来，我们定义一个状态模板，以在网格中呈现缺陷套件计数。我再次借用TaskStatusTemplate中的代码作为起点，稍微调整一下以显示正确的数据。应用程序底部还有一些CSS可以设置它的样式。

最后，在包含的示例应用程序中，我添加了一个缺陷网格，这些缺陷都包含缺陷套件以进行测试。在启动方法的开头有两个小的覆盖，以完全连接弹出窗口。

希望能让你开始！

<!DOCTYPE html>
<html>
<head>
    <title>DefectSuitePopover</title>

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

    <script type="text/javascript">
        Rally.onReady(function () {

            //
            //Define the popover
            //
            Ext.define('DefectSuitePopover', {
                alias: 'widget.defectsuitepopover',
                extend: 'Rally.ui.popover.ListViewPopover',

                title: 'Defect Suites',
                titleIconCls: 'icon-defect-suite',
                width: 700,

                constructor: function (config) {
                    config.listViewConfig = Ext.merge({
                        gridConfig: {
                            addNewConfig: {},
                            columnCfgs: [
                                {
                                    dataIndex: 'FormattedID',
                                    width: 90
                                },
                                {
                                    dataIndex: 'Name',
                                    flex: 1
                                },
                                {
                                    dataIndex: 'Owner',
                                    width: 90
                                },
                                {
                                    dataIndex: 'ScheduleState',
                                    width: 55
                                }
                            ],
                            storeConfig: {
                                context: config.context
                            }
                        },
                        model: Ext.identityFn('DefectSuite'),
                        parentProperty: 'Defects',
                        childField: 'DefectSuites'
                    }, config.listViewConfig);

                    this.callParent(arguments);
                }
            });

            //
            //Define the status template for the grid to launch the popover
            //
            Ext.define('DefectSuitesStatusTemplate', {
                extend: 'Rally.ui.renderer.template.status.StatusTemplate',

                inheritableStatics: {
                    onClick: function(event, ref) {
                        Rally.ui.renderer.template.status.StatusTemplate.onClick(event, ref, {
                            field: 'DefectSuite',
                            target: event.target,
                            targetSelector: 'a.id-' + Rally.util.Ref.getOidFromRef(ref)
                        });
                    }
                },

                constructor: function() {
                    this.callParent([
                        '<tpl if="this._getCount(values) &gt; 0">',
                            '<a class="defect-suites-count id-{[values.ObjectID]}" onclick="{[this._getOnClick(values)]}">',
                                '{[this._getCount(values)]}',
                            '</a>',
                        '</tpl>'
                    ]);
                },

                _getCount: function (recordData) {
                    return recordData.DefectSuites.Count;
                },

                _getOnClick: function(recordData) {
                    return 'DefectSuitesStatusTemplate.onClick(event, \'' + recordData._ref + '\'); return false;';
                }
            });

            //
            //Define the app
            //
            Ext.define('DefectSuitePopoverApp', {
                extend: 'Rally.app.App',
                componentCls: 'app',
                launch: function() {

                    //Add the new status template
                    Rally.ui.renderer.RendererFactory.fieldTemplates.defectsuites = function() {
                        return Ext.create('DefectSuitesStatusTemplate');
                    };

                    //Register the popover
                    Rally.ui.popover.PopoverFactory.popovers.DefectSuite = function(config) {
                        return Ext.create('DefectSuitePopover', config);
                    };

                    //Add grid
                    this.add({
                        xtype: 'rallygrid',
                        columnCfgs: [
                            'FormattedID',
                            'Name',
                            'Owner',
                            {
                                dataIndex: 'DefectSuites',
                                align: 'center'
                            },
                            'Tasks',
                            'State'
                        ],
                        context: this.getContext(),
                        enableEditing: false,
                        showRowActionsColumn: false,
                        storeConfig: {
                            model: 'defect',
                            filters: [{
                                property: 'DefectSuites.ObjectID',
                                operator: '!=',
                                value: null
                            }]
                        }
                    });
                }
            });


            Rally.launchApp('DefectSuitePopoverApp', {
                name:"DefectSuitePopover",
                parentRepos:""
            });

        });
    </script>

    <style type="text/css">
        .app a.defect-suites-count {
            cursor: pointer;
            color: #337ec6;
        }
    </style>
</head>
<body>
</body>
</html>

缺陷套件Popover

1 个答案: