Référencement d'un élément dessiné dans l'application principale

Question

J'écris une application de rallye dans laquelle j'ai un tableau de bord et un bouton. J'ai besoin d'accéder au tableau et de modifier son réglage en cliquant sur un bouton. Le bouton est également dans le même conteneur d'application que le tableau de bord.

J'ai essayé Ext. ce. Ces spécificateurs d'accès ne fonctionnent pas. Pourriez-vous s'il vous plaît m'aider avec cela?

Exemple de code:

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

Vous pouvez les référencer via itemID. Après l'itemID sur l'élément est défini:

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

il peut être utilisé pour faire référence à l'élément:

this.down('#myChart') 

Answer 2

En plus de ce que Nick a dit (le référencement par identifiant), vous pouvez créer une variable pour chaque un comme vous les définissez comme ceci:

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 
}); 

Et les référencer alors comme ceci:

chart.method1(); 
... 

Voici un exemple d'application. Le bouton à bascule affiche et cache le carton:

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); 
    } 
});