1

我正在尝试创建一个简单的 rallycardboard 应用程序，该应用程序将项目显示为列，并将项目积压故事显示为卡片。然后允许拖放卡片来设置项目。附上代码。

如果我将“项目”指定为属性，则该板包含工作区中所有项目的列。我希望将显示的列限制为

  1. 范围内的父母和子女，或

  2. 对项目列的列表进行编码。我已经尝试过操作列、columnConfig、上下文设置，但没有产生预期的结果。

    <!DOCTYPE html>
<html>
<head>
    <title>CardBoard Example</title>

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

    <script type="text/javascript">
        Rally.onReady(function() {
            Ext.define('ProjBoard', {
                extend: 'Rally.app.App',

                launch: function() {
                    if (cardBoardConfig) {
                        cardBoardConfig.destroy();
                    }

                    var cardBoardConfig = {
                        xtype: 'rallycardboard',
                        types: ['User Story'],
                        attribute: 'Project',
                        fieldToDisplay: 'Project',
                        cardConfig: {
                            fields: ['Project', 'Parent','Iteration']
                        },
                        storeConfig: {
                            filters: [
                                { property: 'ScheduleState', operator: '<', value: 'In-Progress' },
                                { property: 'Iteration', operator: '=', value: '' }
                            ],
                            sorters: [
                                { property: 'Rank', direction: 'DESC' }
                            ],
                            //Specify current project and scoping
                            context: this.getContext().getDataContext()
                        }
                    };

                    this.add(cardBoardConfig);
                }
            });
            Rally.launchApp('ProjBoard', {
              name: 'Backlog Project Board'
            });
        });
    </script>
    <style type="text/css">
    </style>
</head>
<body></body>
</html>
4

2 回答 2

0

下面的代码允许我将十几个项目列减少到三个。首先，我获取当前项目并查询其子项目的集合以构建我想要在板上的项目数组（您可以为想要在板上的项目选择不同的标准），然后我扩展Rally.ui.cardboard.CardBoard以覆盖其_buildColumnsFromModel仅过滤满足此条件的列的方法：

retrievedColumns = _.select(retrievedColumns, function(project){    
     return that.arrayOfProjectRefs.indexOf(project.value) != -1
});

这是完整的js文件。除了这些更改之外，这是您的代码。

    Ext.define('CustomApp', { extend: 'Rally.app.App', componentCls: 'app',
        launch: function() {
            var that = this;
            that.arrayOfProjectRefs = [];
            var p = this.getContext().getProject();
            Ext.create('Rally.data.wsapi.Store', {
                model: 'Project',
                fetch: ['Children'],
                filters:[
                    {
                        Property: '_ref',
                        value: p
                    }
                ],
                pageSize: 1,
                autoLoad: true,
                listeners: {
                    load: function(store, records) {
                        var project = records[0];
                        var childProjects = project.get('Children');
                        var childProjectsCount = project.get('Children').Count;
                        console.log('childProjectsCount', childProjectsCount);
                        that.arrayOfProjectRefs.push(project.get('_ref'));
                        project.getCollection('Children').load({
                            fetch: ['_ref', 'Name', 'State'],
                            callback: function(records, operation, success) {
                                Ext.Array.each(records, function(child) {
                                    console.log(child.get('_ref') + ' - ' + child.get('Name') + child.get('State'));
                                    if (child.get('State') === 'Open') {
                                        that.arrayOfProjectRefs.push(child.get('_ref'));
                                        --childProjectsCount;
                                        if (childProjectsCount === 0) {
                                            that._buildBoard();
                                        }
                                    }
                                });
                            }
                        });
                    }
                }
            });
        },

        _buildBoard:function(){
         var that = this;
        console.log('app._arrayOfProjectRefs', this.arrayOfProjectRefs);   
        Ext.define('ProjectCardboard', {extend: 'Rally.ui.cardboard.CardBoard',
          xtype: 'projectCardboard',

         _buildColumnsFromModel: function() {
                var model = this.models[0];
                if (model) {
                    var attribute = model.getField('Project');
                    if (attribute) {
                        attribute.getAllowedValueStore().load({
                            callback: function(records, operation, success) {
                                var retrievedColumns = _.map(records, function(allowedValue) {
                                    var displayValue, value = allowedValue.get('StringValue');
                                    if (!value && attribute.attributeDefinition.AttributeType.toLowerCase() === 'rating') {
                                        value = "None";
                                    } else if (attribute.attributeDefinition.AttributeType.toLowerCase() === 'object') {
                                        displayValue = value;
                                        value = allowedValue.get('_ref');
                                        if (value === 'null') {
                                            value = null;
                                        }
                                    }

                                    return {
                                        value: value,
                                        columnHeaderConfig: {
                                            headerTpl: displayValue || value || 'None'
                                        }
                                    };
                                });

                                this.fireEvent('columnsretrieved', this, retrievedColumns);

                                retrievedColumns = _.select(retrievedColumns, function(project){    
                                    return that.arrayOfProjectRefs.indexOf(project.value) != -1
                                });
                                 console.log('retrievedColumns after filter', retrievedColumns)
                                this.columnDefinitions = [];
                                _.each(retrievedColumns, this.addColumn, this);
                                this.renderColumns();
                            },
                            scope: this
                        });
                    }
                }
            }       
    }); 

            var addNewConfig = {
                xtype: 'rallyaddnew',
                recordTypes: ['User Story'],
                ignoredRequiredFields: ['Name', 'Iteration'],
                showAddWithDetails: false,
            };

            this.addNew = this.add(addNewConfig);
            var myCardConfig = {
                   xtype: 'rallycard',
                   fields: ['ScheduleState','Name'], 
                   maxHeight: 100
                } 

            var cardBoardConfig = {
                xtype: 'projectCardboard',
                types: ['User Story'], 
                attribute: 'Project', 
                cardConfig: myCardConfig
            };

            this.cardBoard = this.add(cardBoardConfig);
   }
});
于 2014-02-19T00:00:04.200 回答
0

您应该能够通过配置指定列：

https://help.rallydev.com/apps/2.0rc2/doc/#!/api/Rally.ui.cardboard.CardBoard-cfg-columns

columns: [
    {
        value: '/project/12345',
        columnHeaderConfig: {
            headerTpl: '{project}',
            headerData: {project: 'Project 1'}
        }
    },
    //more columns...
]
于 2014-02-19T04:11:31.557 回答