Question

我是EXTJS的新手。我正在使用EXTJS 4.2开发应用程序。我有一个显示Unix服务器详细信息列表的网格。我有2个JS，一个是serverdetails.js，它显示网格中的所有服务器，另一个是显示饼图的pie.js。我的要求是当我从ServerDetails.js中的网格中选择服务器并单击按钮时，它转到dao层以获取服务器详细信息，现在这个服务器的详细信息我必须传递给饼图Js Ext.data.Store对象。如何将这些服务器详细信息传递给饼图JS？以下是我的代码。在网格上，我有仪表板按钮，显示网格中选定行的饼图。下面是代码。

showDashBoard : function(button) {     
        var grid = Ext.ComponentQuery.query('serverdetailslist')[0];
        var sm = grid.getSelectionModel();
        var rs = sm.getSelection();
        if (!rs.length) {
            Ext.Msg.alert('Info', 'No Server Details Selected');
            return;
        }else{
            dashBoardServerDetail = rs[0].getData();
            var url = '/TechnologyTrackPortal/dashboard/loadDashBoard.action';

              Ext.Ajax.request({
                url     : url,
                method  : 'POST',
                jsonData: dashBoardServerDetail,    
                success: function(response){
                    var iResult = response.responseText;
                    Ext.create('resources.script.Pie');
                }
                });
        }       
    }

response.responseText以jason格式提供数据。现在我如何将这个jason dat传递给pie.js文件。下面是我的pie.js文件

Ext.onReady(function () {
  Ext.define('DashBoardModel', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'title', type: 'string'},
      {name: 'size', type: 'string'}
    ]
  });

  var store = Ext.create('Ext.data.Store', {
    storeId : 'DashBoardStoreId',
    model   : 'DashBoardModel',
    fields  : ['title', 'size'],
    autoLoad: false, 
    autoSync: true
  });

var chart = Ext.create('Ext.chart.Chart', {
    alias   : 'widget.dashBoardPieChart',
    title   : 'Technology Portal',
    store   : store,
    theme: 'Base:gradients',
     legend: {
            position: 'bottom'
        },
     series: [
     {
       type: 'pie',
       angleField: 'size',
       showInLegend: true,
       label: {
         field: 'title',
         display: 'outside',
         font: '12px Arial',
         calloutLine: true
       },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            label: {
                field: 'title',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            },
            tips: {
               trackMouse: true,
               width: 120,
               renderer: function(storeItem, item) {
               this.setTitle(storeItem.get('title') + ': ' + storeItem.get('size') + '%');
            }
          }
     }
    ]
  });

 var panel1=   Ext.create('widget.panel', {
   //  extend  : 'widget.panel',
        width: 800,
        height: 600,
        title: 'Server',
        alias   : 'widget.dashBoardForm',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Save Chart',
            handler: function() {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                    if(choice == 'yes'){
                        chart.save({
                            type: 'image/png'
                        });
                    }
                });
            }
        }],
        items: chart
    });

我希望我清楚我的观点。谢谢 SACH

Answer 1

您需要将此视为一个应用程序，一个memoryspace，代码分为两个.js文件没有太大区别，它们都必须加载到您的主html，asp，php或其他任何东西。在那个memoryspace中，如果之前已经声明了变量和对象，则可以引用它们。完成所要求的最简单方法是拥有一个商店并将其用于两个视图。因此，将数据加载到ServerDetails.js中的商店中，让图表使用同一个商店。

我有一些ExtJs应用程序可以做到这一点，但它们适用于版本3.3.1，暂时不支持我。希望这会有所帮助。

EXTJS将数据传递到另一个JS商店

1 个答案: