1

我正在使用自定义 HTML Rally Grid 来开发一个必须返回一些统计信息的表格。我的 JavaScript 在我的 HTML 的开头被调用，我正在 body 标记中创建一个表。因此，我的 JavaScript 使用字段 id 在表中设置值。问题是：正在加载表格，但是当 Rally.launchApp 方法运行时，表格消失了。奇怪的是，如果我检查字体代码，表格仍然存在。

<!DOCTYPE html>
<html>
<head>
    <title>Grid With Freeform Data Example</title>

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

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

                launch: function() {
                    var firstMetricResult;
                    var secondMetricResult;
                    var firstMetricName = "% of user stories assigned story points";
                    var secondMetricName = "Average story points per user story ";

                    var currentProjectName =  Rally.environment.getContext().getProject().Name;
                    var currentProjectNameID = document.getElementById("currentProjectNameID");
                    currentProjectNameID.value = currentProjectName;

                    var benchmark = 20;

                    var storiesQuery = Ext.create('Rally.data.WsapiDataStore', {
                        model: 'UserStory',
                        fetch: ['PlanEstimate', 'LastUpdateDate'],
                        filters: [
                                    {property: 'ScheduleState',
                                     operator: '=',
                                     value: 'Accepted'}, 
                                    {property: 'DirectChildrenCount',
                                     operator: '=',
                                     value: '0'},
                                    {property: 'AcceptedDate',
                                     operator: '<',
                                     value: 'LastMonth'},
                                    {property: "Iteration.Name",
                                     operator: "!contains",
                                     value: "hardening"},
                                    {property: "Iteration.Name",
                                     operator: "!contains",
                                     value: "regression"},
                                    {property: "Iteration.Name",
                                     operator: "!contains",
                                     value: "stabilization"}
                                  ]
                    });

                    storiesQuery.load({
                        callback: function(records, operation) {
                            if(operation.wasSuccessful()) {
                                var estimatedStoriesCount = 0;

                                Ext.Array.each(records, function(record){
                                    if (record.get('PlanEstimate') != null){
                                      estimatedStoriesCount++;
                                    }
                                });

                              var storiesCount = records.length;
                              firstMetricResult = (estimatedStoriesCount*100)/storiesCount;
                              alert(firstMetricResult);
                            }
                        }
                    });


                    var estimatedStoriesQuery = Ext.create('Rally.data.WsapiDataStore', {
                       model: 'UserStory',
                       fetch: ['PlanEstimate', 'LastUpdateDate'],
                       filters: [
                           {property: 'PlanEstimate',
                            operator: '!=',
                            value: 'null'},
                           {property: 'ScheduleState',
                            operator: '=',
                            value: 'Accepted'}, 
                           {property: 'DirectChildrenCount',
                            operator: '=',
                            value: '0'},
                           {property: 'AcceptedDate',
                            operator: '<',
                            value: 'LastMonth'}
                        ]
                    });

                    estimatedStoriesQuery.load({
                        callback: function(records, operation) {

                            if(operation.wasSuccessful()) {
                              var astoriesCount = records.length;
                              var storiesPointsSum = 0;

                              Ext.Array.each(records, function(record){
                                  storiesPointsSum += record.get('PlanEstimate');
                              });

                              secondMetricResult = storiesPointsSum/astoriesCount; 
                              alert(secondMetricResult);

                            }
                        }
                    });

                }   
            });

            Rally.launchApp('CustomApp', {
                name: 'Grid With Freeform Data Example'
            });

        });
    </script> 

    <style type="text/css">
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>

</head>
<body>


  <table border=1 class='gridtable' id="tab1">

  <tr>
  <th> Team </th>
  <td><b>All prior periods</b></td>
  <td><b>All prior periods</b></td>
  </tr>

  <tr>
  <td id="currentProjectNameID">
  </td>

  </tr></table>



</body>
</html>

我决定使用这个简单的 HTML 表格，因为我想拥有编辑 CSS 的能力。

谢谢。

4

2 回答 2

1

如果您使用 Ext 网格或 rallygrid，您仍然可以修改 CSS - 除了使用普通 CSS 选择器来设置网格样式外，您还可以在创建网格时访问某些属性 - 列的渲染器函数将 meta 作为它的第二个参数，它有一个名为 tdCls 的属性，您可以使用它来设置该列中的单元格样式。例如：

.green > .x-grid-cell-inner {
    border     : 1px solid #afd3b6;
    background : #c6efce;
    background : -moz-linear-gradient(top,  #c6efce 0%, #afd3b6 100%);
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c6efce), color-stop(100%,#afd3b6));
    background : -webkit-linear-gradient(top,  #c6efce 0%,#afd3b6 100%);
    background : -o-linear-gradient(top,  #c6efce 0%,#afd3b6 100%);
    background : -ms-linear-gradient(top,  #c6efce 0%,#afd3b6 100%);
    background : linear-gradient(to bottom,  #c6efce 0%,#afd3b6 100%);
    filter     : progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6efce', endColorstr='#afd3b6',GradientType=0 );
}

{
     text      : 'State',
     dataIndex : 'c_WINListState',
     editor    : 'stateeditor',
     renderer  : function(value, meta, record) {
         if (value === 'At Risk') {
              meta.tdCls = 'yellow';
         } else if (value === 'Off Track') {
              meta.tdCls = 'red';
         } else if (value === 'On Track') {
              meta.tdCls = 'green';
         } else if (value === 'Complete') {
              meta.tdCls = 'grey';
         }
         return value;
     }
 },

我建议使用内置功能。

话虽如此，我认为这是内置功能的原因 - 如果您查看 SDK，启动应用程序功能状态：

创建并执行指定的应用程序。确保在应用程序代码开始执行之前已加载所有必需的组件并且 DOM 已准备就绪。一旦加载了所有必需的依赖项，就会调用启动方法。

于 2013-07-23T23:37:26.973 回答
1

上面的答案是正确的。通常在使用应用程序（和 ExtJS）时，大多数内容是通过 javascript 而不是字面上声明的 dom 创建的。

查看本指南以获取有关在应用程序中使用内容的更多信息：https ://developer.help.rallydev.com/apps/2.0rc1/doc/#!/guide/add_content

如果您仍然在手动 dom 操作上出售，这样的事情应该可以工作：

launch: function() {
    this.add({
        xtype: 'component',
        html: [
            '<table border=1 class="gridtable" id="tab1">',
            '<tr>',
            '<th> Team </th>',
            '<td><b>All prior periods</b></td>',
            '<td><b>All prior periods</b></td>',
            '</tr>',
            '<tr>',
            '<td id="currentProjectNameID"></td>',
            '</tr>',
            '</table>'
        ].join('')
    });
},

afterRender: function() {
    this.callParent(arguments);

    //the rest of your code that used to be in launch here
}

然后您应该能够通过 id 查找元素并根据需要操作它们。

于 2013-07-24T12:11:21.347 回答