2014-01-24 41 views

回答

0

它不能用自定義網格完成,但可以用自定義代碼完成。以下是一個應用示例,它基於UserSearchComboBox中的選擇填充網格,然後在單擊事件中顯示所選任務的最新修訂。

你可以從this github repo HTML文件複製到自定義頁:

這裏是js文件:

Ext.define('CustomApp', { 
    extend: 'Rally.app.App', 
    componentCls: 'app', 

     launch: function() { 
     var context = this.getContext(); 
     var currentProject = context.getProject()._ref; 
     var panel = Ext.create('Ext.panel.Panel', { 
       layout: 'hbox', 
       itemId: 'parentPanel', 
       componentCls: 'panel', 
       items: [ 
      { 
        xtype: 'rallyusersearchcombobox', 
        fieldLabel: 'SELECT USER:', 
      project: currentProject, 
         listeners:{ 
          ready: function(combobox){ 
           this._onUserSelected(combobox.getRecord()); 
          }, 
          select: function(combobox){ 
       if (this.down('#c').html !== 'No task is selected') { 
       Ext.getCmp('c').update('No task is selected'); 
       } 
           this._onUserSelected(combobox.getRecord()); 
          }, 
          scope: this 
         } 
        }, 
      { 
        xtype: 'panel', 
        title: 'Tasks', 
      width: 600, 
        itemId: 'childPanel1' 
      }, 
      { 
        xtype: 'panel', 
        title: 'Last Revision', 
      width: 600, 
        itemId: 'childPanel2' 
      } 
       ], 
      }); 


      this.add(panel); 
     this.down('#childPanel2').add({ 
     id: 'c', 
     padding: 10, 
     maxWidth: 600, 
     maxHeight: 400, 
     overflowX: 'auto', 
     overflowY: 'auto', 
     html: 'No task is selected' 
     }); 
     }, 

     _onUserSelected:function(record){ 
      var user = record.data['_ref']; 
      if(user){ 
      var filter = Ext.create('Rally.data.QueryFilter', { 
           property: 'Owner', 
           operator: '=', 
           value: user 
          }); 

          filter = filter.and({ 
           property: 'State', 
           operator: '<', 
           value: 'Completed' 
          }); 
          filter.toString(); 

       Ext.create('Rally.data.WsapiDataStore', { 
       model: 'Task', 
       fetch: [ 'DragAndDropRank','FormattedID','Name','State','RevisionHistory'], 
       autoLoad: true, 
       filters : [filter], 
       sorters:[ 
        { 
         property: 'DragAndDropRank', 
         direction: 'ASC' 
        } 
       ], 

       listeners: { 
      load: this._onTaskDataLoaded, 
      scope: this 
       } 
      }); 
      } 
     }, 

    _onTaskDataLoaded: function(store, data) { 
     var customRecords = []; 
     Ext.Array.each(data, function(task, index) { 
     customRecords.push({ 
      _ref: task.get('_ref'), 
      FormattedID: task.get('FormattedID'), 
      Name: task.get('Name'), 
      RevisionID: Rally.util.Ref.getOidFromRef(task.get('RevisionHistory')), 
     }); 
     }, this); 
     this._updateGrid(store,data); 
    }, 

     _updateGrid: function(store, data){ 
     if (!this.down('#g')) { 
     this._createGrid(store,data); 
    } 
    else{ 
     this.down('#g').reconfigure(store); 
    } 
    }, 
     _createGrid: function(store,data){ 
      var that = this; 
     var g = Ext.create('Rally.ui.grid.Grid', { 
      id: 'g', 
      store: store, 
      enableRanking: true, 
      columnCfgs: [ 
        {text: 'Formatted ID', dataIndex: 'FormattedID'}, 
        {text: 'Name', dataIndex: 'Name'}, 
        {text: 'State', dataIndex: 'State'}, 
        {text: 'Last Revision', 
         renderer: function (v, m, r) { 
         var id = Ext.id(); 
         Ext.defer(function() { 
          Ext.widget('button', { 
          renderTo: id, 
          text: 'see', 
          width: 50, 
          handler: function() { 
           console.log('r', r.data); 
           that._getRevisionHistory(data, r.data); 
          } 
          }); 
         }, 50); 
         return Ext.String.format('<div id="{0}"></div>', id); 
         } 

        } 
        ], 
      height: 400, 
    }); 
    this.down('#childPanel1').add(g); 
    }, 

    _getRevisionHistory: function(taskList, task) { 
    this._task = task; 
       this._revisionModel = Rally.data.ModelFactory.getModel({ 
        type: 'RevisionHistory', 
        scope: this, 
      success: this._onModelCreated 
     }); 

    }, 
    _onModelCreated: function(model) { 
     model.load(Rally.util.Ref.getOidFromRef(this._task.RevisionHistory._ref),{ 
      scope: this, 
      success: this._onModelLoaded 
     }); 

    }, 

    _onModelLoaded: function(record, operation) { 
     record.getCollection('Revisions').load({ 
      fetch: true, 
      scope: this, 
      callback: function(revisions, operation, success) { 
       this._onRevisionsLoaded(revisions, record); 
      } 
     }); 
    }, 

    _onRevisionsLoaded: function(revisions, record) { 
     var lastRev = _.first(revisions).data; 
    console.log('_onRevisionsLoaded: ',lastRev.Description, lastRev.RevisionNumber, lastRev.CreationDate); 
    this._displayLastRevision(lastRev.Description,lastRev.RevisionNumber, lastRev.CreationDate); 

    }, 

    _displayLastRevision:function(desc, num, date){ 
    Ext.getCmp('c').update('<b>' + this._task.FormattedID + '</b><br/><b>Revision CreationDate: </b>' + date +'<br /><b>Description:</b>' + desc + '<br /><b>Revision Number:</b>' + num + '<br />'); 
    } 
}); 

enter image description here

相關問題