2014-01-17 1 views
3

랠리에서 github에서 사용자 정의 그리드를 사용할 수 있음을 확인 했으므로 github에서 Rally 앱 카탈로그를 다운로드했습니다. 그런 다음 src/apps/grid 디렉토리로 가서 'rally-app-builder build'를 실행했습니다. 즉, deploy 디렉토리 및 App.html에 다음 코드 생성 :github에서 app-catalog를 사용하여 소스에서 사용자 정의 랠리 그리드 만들기

<!DOCTYPE html> 
<html> 
<head> 
<title>Custom Grid</title> 
<script type="text/javascript" src="/apps/2.0rc2/sdk.js"></script> 
<script type="text/javascript"> 
    Rally.onReady(function() { 
      (function(){var Ext=window.Ext4||window.Ext,appAutoScroll=Ext.isIE7||Ext.isIE8,gridAutoScroll=!appAutoScroll;Ext.define("Rally.apps.grid.GridApp",{extend:"Rally.app.App",layout:"fit",requires:["Rally.data.util.Sorter","Rally.data.QueryFilter","Rally.ui.grid.Grid","Rally.ui.grid.plugin.PercentDonePopoverPlugin"],autoScroll:appAutoScroll,launch:function(){Rally.data.ModelFactory.getModel({type:this.getContext().get("objectType"),success:this._createGrid,scope:this})},_getFetchOnlyFields:function(){return["LatestDiscussionAgeInMinutes"]},_createGrid:function(model){var context=this.getContext(),pageSize=context.get("pageSize"),fetch=context.get("fetch"),columns=this._getColumns(fetch),gridConfig={xtype:"rallygrid",model:model,columnCfgs:columns,enableColumnHide:!1,enableRanking:!0,enableBulkEdit:Rally.environment.getContext().isFeatureEnabled("EXT4_GRID_BULK_EDIT"),autoScroll:gridAutoScroll,plugins:this._getPlugins(columns),storeConfig:{fetch:fetch,sorters:Rally.data.util.Sorter.sorters(context.get("order")),context:context.getDataContext(),listeners:{load:this._updateAppContainerSize,scope:this}},pagingToolbarCfg:{pageSizes:[pageSize]}};pageSize&&(pageSize-=0,isNaN(pageSize)||(gridConfig.storeConfig.pageSize=pageSize)),context.get("query")&&(gridConfig.storeConfig.filters=[Rally.data.QueryFilter.fromQueryString(context.get("query"))]),this.add(gridConfig)},_updateAppContainerSize:function(){if(this.appContainer){var grid=this.down("rallygrid");grid.el.setHeight("auto"),grid.body.setHeight("auto"),grid.view.el.setHeight("auto"),this.setSize({height:grid.getHeight()+_.reduce(grid.getDockedItems(),function(acc,item){return acc+item.getHeight()+item.el.getMargin("tb")},0)}),this.appContainer.setPanelHeightToAppHeight()}},_getColumns:function(fetch){return fetch?Ext.Array.difference(fetch.split(","),this._getFetchOnlyFields()):[]},_getPlugins:function(columns){var plugins=[];return Ext.Array.intersect(columns,["PercentDoneByStoryPlanEstimate","PercentDoneByStoryCount"]).length>0&&plugins.push("rallypercentdonepopoverplugin"),plugins}})})(); 

     Rally.launchApp('Rally.apps.grid.GridApp', { 
      name:"Custom Grid", 
      parentRepos:"" 
     }); 

    }); 
</script> 
</head> 
<body></body> 
</html> 

을 ...하지만 당신이 랠리에 (어떤 내용으로 프레임), 그냥 생산하고 빈 응용 프로그램 있음을 붙여 넣을 때.

나는 여기에 간단한 것을 놓치고 있습니까? 이 기능을 사용하려면 몇 가지 조정이 필요한가요?

답변

2

2.0rc2가 잘린 후 맞춤형 그리드를 상당히 수정했음을 기억했습니다. RallySoftware/app-catalog repo에서 here을 볼 수 있습니다. (우리는 이러한 응용 프로그램은 sdk (버전 x)의 헤드 개정판에서만 작동하지만이 경우에는 2.0rc2에서도 올바르게 작동합니다.)

참고 : 아직 설정 패널이 없습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Custom Grid</title> 
    <script type="text/javascript" src="/apps/2.0rc2/sdk.js"></script> 
    <script type="text/javascript"> 
     Rally.onReady(function() { 
      (function() { 
       var Ext = window.Ext4 || window.Ext; 
       var appAutoScroll = Ext.isIE7 || Ext.isIE8; 
       var gridAutoScroll = !appAutoScroll; 

       Ext.define('Rally.apps.grid.GridApp', { 
        extend: 'Rally.app.App', 
        layout: 'fit', 

        requires: [ 
         'Rally.data.util.Sorter', 
         'Rally.data.wsapi.Filter', 
         'Rally.ui.grid.Grid', 
         'Rally.data.ModelFactory', 
         'Rally.ui.grid.plugin.PercentDonePopoverPlugin' 
        ], 

        config: { 
         defaultSettings: { 
          types: 'defect', 
          pageSize: 25, 
          fetch: 'FormattedID,Name,Priority,Severity' 
         } 
        }, 

        autoScroll: appAutoScroll, 

        launch: function() { 
         var context = this.getContext(), 
           pageSize = this.getSetting('pageSize'), 
           fetch = this.getSetting('fetch'), 
           columns = this._getColumns(fetch); 

         this.add({ 
          xtype: 'rallygrid', 
          columnCfgs: columns, 
          enableColumnHide: false, 
          enableRanking: true, 
          enableBulkEdit: context.isFeatureEnabled("EXT4_GRID_BULK_EDIT"), 
          autoScroll: gridAutoScroll, 
          plugins: this._getPlugins(columns), 
          context: this.getContext(), 
          storeConfig: { 
           fetch: fetch, 
           models: this.getSetting('types').split(','), 
           filters: this._getFilters(), 
           pageSize: pageSize, 
           sorters: Rally.data.util.Sorter.sorters(this.getSetting('order')), 
           listeners: { 
            load: this._updateAppContainerSize, 
            scope: this 
           } 
          }, 
          pagingToolbarCfg: { 
           pageSizes: [pageSize] 
          } 
         }); 
        }, 

        onTimeboxScopeChange: function (newTimeboxScope) { 
         this.callParent(arguments); 

         this.down('rallygrid').filter(this._getFilters(), true, true); 
        }, 

        _getFilters: function() { 
         var filters = [], 
           query = this.getSetting('query'), 
           timeboxScope = this.getContext().getTimeboxScope(); 
         if (query) { 
          try { 
           query = new Ext.Template(query).apply({ 
            user: Rally.util.Ref.getRelativeUri(this.getContext().getUser()) 
           }); 
          } catch (e) { 
          } 
          filters.push(Rally.data.wsapi.Filter.fromQueryString(query)); 
         } 

         if (timeboxScope && _.every(this.getSetting('types').split(','), this._isSchedulableType, this)) { 
          filters.push(timeboxScope.getQueryFilter()); 
         } 
         return filters; 
        }, 

        _isSchedulableType: function (type) { 
         return _.contains(['hierarchicalrequirement', 'task', 'defect', 'defectsuite', 'testset'], type.toLowerCase()); 
        }, 

        _getFetchOnlyFields: function() { 
         return ['LatestDiscussionAgeInMinutes']; 
        }, 

        _updateAppContainerSize: function() { 
         if (this.appContainer) { 
          var grid = this.down('rallygrid'); 
          grid.el.setHeight('auto'); 
          grid.body.setHeight('auto'); 
          grid.view.el.setHeight('auto'); 
          this.setSize({height: grid.getHeight() + _.reduce(grid.getDockedItems(), function (acc, item) { 
           return acc + item.getHeight() + item.el.getMargin('tb'); 
          }, 0)}); 
          this.appContainer.setPanelHeightToAppHeight(); 
         } 
        }, 

        _getColumns: function (fetch) { 
         if (fetch) { 
          return Ext.Array.difference(fetch.split(','), this._getFetchOnlyFields()); 
         } 
         return []; 
        }, 

        _getPlugins: function (columns) { 
         var plugins = []; 

         if (Ext.Array.intersect(columns, ['PercentDoneByStoryPlanEstimate', 'PercentDoneByStoryCount']).length > 0) { 
          plugins.push('rallypercentdonepopoverplugin'); 
         } 

         return plugins; 
        } 
       }); 
      })(); 

      Rally.launchApp('Rally.apps.grid.GridApp', { 
       name: "Custom Grid" 
      }); 

     }); 
    </script> 
</head> 
<body></body> 
</html> 

는 희망이 지금은에 의해 당신을 가져옵니다

다음은 채워 몇 가지 기본 설정으로 전체 HTML입니다. 다음 공개 sdk 릴리스와 일치하는 훨씬 향상된 맞춤형 그리드 앱을 찾으십시오.

1

당신은 아무것도 놓치지 않았습니다. 우리가 다음 릴리즈를 자르면 작동 할 것이지만 지금은 앱이 켜져 있지 않습니다. 무엇 비어 만드는 것은 아래 type가 해결되지 않는다는 것입니다 :

Rally.data.ModelFactory.getModel({ 
       type: this.getContext().get('objectType'), 
       success: this._createGrid, 
       scope: this 
      }); 

하면 않는 한 하드 코드를 대신 type: 'defect'에있다. 불행히도 이것으로 해결할 수는 없습니다. 앱을 아직 사용할 준비가되지 않았습니다.