기본 앱에 그려진 요소를 참조하십시오.

Question

나는 랠리 차트와 버튼이있는 랠리 앱을 작성 중입니다. 차트에 액세스하여 버튼 클릭으로 설정을 수정해야합니다. 단추는 랠리 차트와 동일한 앱 컨테이너에 있습니다.

나는 Ext. 이. 이러한 액세스 지정자가 작동하지 않습니다. 이걸 좀 도와 주시겠습니까?

샘플 코드 :

Ext.define('CustomApp', { 
    extend: 'Rally.app.App', 
    componentCls: 'app', 
    id: 'appid', 
    launch: function() { 

     var datepickerfrom = Ext.create('Ext.Container', { 
      items: [{ 
       xtype: 'rallytextfield', 
       fieldLabel: 'Enter Start Date for chart (mm/dd/yyyy): ', 
       labelWidth: 150 
      }], 
      renderTo: Ext.getBody().dom, 
      id: 'd1' 
     }); 

     this.add(datepickerfrom); 
     this.add(
       { 
        xtype: 'rallychart', 
        height: 400, 
        width: 800, 
        id: 'chart1', 
        itemId: 'chart1', 
        chartConfig: chartConfig, 
        renderTo: Ext.getBody().dom 
       } 
      ); 

button2 = { 
      xtype: 'rallybutton', 
      text: 'Plot Graph', 
      handler: function() { 
       console.clear(); 
       console.log("Clicking button"); 
    // I NEED to ACCESS the CHART HERE or EVEN the TEXTFIELD DATA HERE 

      }, 
      callback: function(){ 

      } 
     }; 

this.add(button2); 

Answer 1

당신은 항목 ID를 통해이를 참조 할 수 있습니다. 요소에 대한 항목 ID를 설정 한 후 :

this.add(
    { 
     xtype: 'rallychart', 
     height: 400, 
     itemId: 'myChart', 
     chartConfig: {//...} 
//... 
} 

이 요소를 참조 할 수 있습니다

:

닉 각에 대한 변수를 만들 수 있습니다 (ID로 참조) 한 말 이외에

this.down('#myChart') 

Answer 2

하나 그렇게처럼 정의로 : 다음

var pickerForm = this.add(datepickerfrom); 
var chart = this.add({ 
    xtype: 'rallychart', 
    height: 400, 
    width: 800, 
    id: 'chart1', 
    itemId: 'chart1', 
    chartConfig: chartConfig, 
    renderTo: Ext.getBody().dom 
}); 

와 같이이를 참조 :

chart.method1(); 
... 

다음은 예제 응용 프로그램입니다. 토글 버튼은 판지를 표시하거나 숨 깁니다.

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

    items: [{ 
     xtype: 'button', 
     text : 'Toggle Cardboard', 
     handler: function() { 
      if (App.cardBoard.isHidden()) { 
       App.cardBoard.show(); 
      } else { 
       App.cardBoard.hide(); 
      } 
     } 
    }], 

    launch: function() { 
     App = this; 
     var addNewConfig = { 
      xtype: 'rallyaddnew', 
      recordTypes: ['PortfolioItem/Feature', 'PortfolioItem/Initiative', 'PortfolioItem/Theme'], 
      ignoredRequiredFields: ['Name', 'Project'], 
      showAddWithDetails: false 
     }; 

     App.addNew = this.add(addNewConfig); 

     var cardBoardConfig = { 
      xtype: 'rallycardboard', 
      types: ['PortfolioItem/Feature', 'PortfolioItem/Rollup'], 
      attribute: 'InvestmentCategory' 
     }; 

     App.cardBoard = this.add(cardBoardConfig); 
    } 
});