rally - Rally 2.0 JavaScript API - HTML テーブルの作成と動的な値の設定

Question

カスタム HTML Rally Grid を使用して、統計を返す必要があるテーブルを作成しています。HTML の先頭で JavaScript が呼び出され、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>

CSS を編集できるようにしたいので、この単純な HTML テーブルを使用することにしました。

ありがとう。

score 1 · Accepted Answer

上記の答えは正しいです。一般に、アプリ (および ExtJS) を操作する場合、ほとんどのコンテンツは文字通り dom を宣言するのではなく、javascript を介して作成されます。

アプリでのコンテンツの操作に関する詳細については、このガイドをご覧ください: 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 で要素を検索し、必要に応じて操作できるようにする必要があります。

score 1 · Accepted Answer

Ext グリッドまたは rallygrid を使用した場合でも、CSS を変更できます。通常の CSS セレクターを使用してグリッドのスタイルを設定する以外に、グリッドを作成するときに特定のプロパティにアクセスすることもできます。列のレンダラー関数は meta を2 番目のパラメーターには、その列のセルのスタイルを設定するために使用できる 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 の準備が整っていることを確認します。必要な依存関係がすべて読み込まれるとすぐに、launch メソッドが呼び出されます。

rally - Rally 2.0 JavaScript API - HTML テーブルの作成と動的な値の設定

2 に答える 2

Related

Reference