диаграмма extjs не отображается

Question

Новое на диаграмме extjs.

Я имею в ExtJS область диаграммы, я не магазин, модель, хорошо, но график не не появляется вообще, ничего, я не знаю, где проблема:

var store1 = Ext.create('Ext.data.Store', { 
    fields: ['date', 'ged', 'watt', 'sicomor'], 
    data: [{ 
      "date": 20-10-2014, 
      "ged": 52, 
      "watt": 21, 
      "sicomor": 18 
     }, { 
      "date": 21 - 10 - 2014, 
      "ged": 24, 
      "watt": 62, 
      "sicomor": 14 
     }, { 
      "date": 22-10-2014, 
      "ged": 41, 
      "watt": 69, 
      "sicomor": 25 
     }] 
}); 


Ext.define("dashboard.view.HrsWorkedChart", { 
    extend: "Ext.chart.Chart", 
    alias: "widget.hrsworkedchart", 

     style: 'background:#fff', 
     animate: true, 
     store: store1, 

     legend: { 
      position: 'right' 
     }, 

     axes: [{ 
      type: 'Numeric', 
      minimum: 0, 
      position: 'left', 
      fields: ['watt', 'ged', 'sicomor'], 
      title: 'Nombre documents en retard', 
      minorTickSteps: 1, 
      grid: { 
       odd: { 
        opacity: 1, 
        fill: '#ddd', 
        stroke: '#bbb', 
        'stroke-width': 0.5 
       } 
      } 
     }, { 
      type: 'Category', 
      position: 'bottom', 
      fields: ['date'], 
      title: 'Jours' 
     }], 

     series: [{ 
      type: 'area', 
      axis: 'left', 
      xField: 'name', 
      yField: ['watt', 'ged', 'sicomor'], 
     }] 

}); 

Ext.application({ 
    name: 'AreaChart', 
    launch: function() { 
     Ext.Viewport.add({xtype: 'hrsworkedchart'}) 
    } 
}); 

jsfiddle

Можете ли вы мне помочь.

Приветствия очень много

Answer 1

Вы должны написать весь код внутри launch метода вашего Ext.application, чтобы убедиться, что загружен и готов к использованию ExtJS. Вы также должны создать свой Viewport, для этого вы можете использовать метод autoCreateViewport или просто добавить Ext.create в конце вашего метода запуска.

Это должно работать:

Ext.application({ 
    name: 'AreaChart', 
    launch: function() { 
     var store1 = Ext.create('Ext.data.Store', { 
      fields: ['date', 'ged', 'watt', 'sicomor'], 
      data: [{ 
       "date": 20-10-2014, 
       "ged": 52, 
       "watt": 21, 
       "sicomor": 18 
      }, { 
       "date": 21 - 10 - 2014, 
       "ged": 24, 
       "watt": 62, 
       "sicomor": 14 
      }, { 
       "date": 22-10-2014, 
       "ged": 41, 
       "watt": 69, 
       "sicomor": 25 
      }] 
     }); 


     Ext.define("dashboard.view.HrsWorkedChart", { 
      extend: "Ext.chart.Chart", 
      alias: "widget.hrsworkedchart", 

      style: 'background:#fff', 
      animate: true, 
      store: store1, 

      legend: { 
       position: 'right' 
      }, 

      axes: [{ 
       type: 'Numeric', 
       minimum: 0, 
       position: 'left', 
       fields: ['watt', 'ged', 'sicomor'], 
       title: 'Nombre documents en retard', 
       minorTickSteps: 1, 
       grid: { 
        odd: { 
         opacity: 1, 
         fill: '#ddd', 
         stroke: '#bbb', 
         'stroke-width': 0.5 
        } 
       } 
      }, { 
       type: 'Category', 
       position: 'bottom', 
       fields: ['date'], 
       title: 'Jours' 
      }], 

      series: [{ 
       type: 'area', 
       axis: 'left', 
       xField: 'name', 
       yField: ['watt', 'ged', 'sicomor'], 
      }] 

     }); 

     Ext.create('Ext.container.Viewport', { 
      layout: 'fit', 
      items: [{ 
       xtype: 'hrsworkedchart' 
      }] 
     }); 
    } 
}); 

Answer 2

вы бы лучше определить вид и данные (возможно, модель, а) в отдельных файлах.

для Вашего случая:

//create a file under dashborad.store.HrsWorkedChart.js 
Ext.define("dashboard.store.HrsWorkedChart", { //config options }); 

//create a file under dashboard.view.HrsWorkedChart.js 
Ext.define("dashboard.view.HrsWorkedChart", { 
...... 
store: dashboard.store.HrsWorkedChart, 
...... 
}); 

тогда вы загрузили окно просмотра, как сказал Guiherme.