Rally CA Agile Central自定义应用表格出现空白行问题

嘿，你的Rally重开缺陷应用能正常运行但表格出空白行，这个问题我之前也碰到过！大概率是渲染表格时没过滤掉无效的缺陷数据，或者循环逻辑里不小心插入了空行。我给你梳理下修复思路，再结合场景给个修改示例：

常见问题原因&修复方向 #

• 👉 数据里混了空/无效记录：从Rally拉取的缺陷数据里，可能存在部分null或者核心字段（比如ID、名称）为空的条目，直接渲染就会生成空白行。
  解决：遍历渲染前先过滤掉这些无效数据，只保留有有效字段的记录。
• 👉 循环逻辑误加空行：比如写条件判断时，else分支不小心输出了空的<tr>标签，或者循环里没做判断就直接追加行。
  解决：确保只有当数据有效时才生成表格行元素。

针对你的代码的修改示例 #

结合Rally App SDK的常见写法，我给你调整了代码，重点加了数据过滤和渲染判断的逻辑：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Copyright (c) 2002-2011 Rally Software Development Corp. All rights reserved. -->
<html>
<head>
    <meta name="Name" content="Reopened Defects App">
    <title>Reopened Defects</title>
    <script type="text/javascript" src="/apps/1.25/sdk.js"></script>
    <script type="text/javascript">
        Rally.onReady(function() {
            Ext.define('CustomApp', {
                extend: 'Rally.app.App',
                componentCls: 'app',
                launch: function() {
                    // 重开缺陷的查询条件
                    var query = Rally.data.QueryFilter.fromQueryString('Reopened = true');
                    this._loadDefects(query);
                },
                _loadDefects: function(query) {
                    var store = Ext.create('Rally.data.wsapi.Store', {
                        model: 'Defect',
                        fetch: ['FormattedID', 'Name', 'State', 'Reopened'],
                        filters: query
                    });
                    store.load({
                        callback: function(records, operation, success) {
                            if (success) {
                                // ✅ 关键修复：先过滤掉无核心字段的无效记录
                                var validDefects = records.filter(function(defect) {
                                    return defect.get('FormattedID') && defect.get('Name');
                                });
                                this._renderTable(validDefects);
                            }
                        },
                        scope: this
                    });
                },
                _renderTable: function(defects) {
                    var table = document.createElement('table');
                    table.innerHTML = '<thead><tr><th>缺陷ID</th><th>缺陷名称</th><th>状态</th></tr></thead><tbody></tbody>';
                    var tbody = table.querySelector('tbody');
                    
                    defects.forEach(function(defect) {
                        // ✅ 双重保障：确认数据有效再创建行
                        if (defect) {
                            var row = document.createElement('tr');
                            row.innerHTML = `
                                <td>${defect.get('FormattedID')}</td>
                                <td>${defect.get('Name')}</td>
                                <td>${defect.get('State')}</td>
                            `;
                            tbody.appendChild(row);
                        }
                    });
                    this.getEl().appendChild(table);
                }
            });
            Rally.launchApp('CustomApp', {
                name: 'Reopened Defects'
            });
        });
    </script>
    <style type="text/css">
        table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
        th { background-color: #f8f8f8; font-weight: bold; }
    </style>
</head>
<body></body>
</html>

核心修复点说明 #

1. 数据过滤：在拉取到数据后，用filter()方法筛选出有FormattedID和Name的缺陷，把空数据直接排除在渲染流程外。
2. 渲染判断：遍历数据时加了if (defect)的判断，防止意外的空对象导致生成空白行。

如果你的代码里有特殊逻辑（比如分组、额外的筛选条件），可以根据这个思路调整过滤规则，比如加上对Reopened字段的校验~

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