ext jsのコンボボックスの値

Question

ext Js 6.2の新機能で、コンボボックスから値を取得して、選択した値から3D棒グラフを取得しようとしましたが、選択した値もグラフも表示されません選択された値。この問題を解決するのを手伝ってください。

2FAData.js：

Ext.define('LICApp.store.2FAData', { 
    extend: 'Ext.data.Store', 
    alias: 'store.2fa-data', 

    requires: [ 
     'Ext.data.reader.Xml' 
    ], 
    autoLoad: true, 

    fields: ['name', 'cnt', 'zone'], 
    groupField: 'zone', 


    proxy: { 
     type: 'ajax', 
     cors: 'true', 
     url: 'http://localhost:8080/UserManagement/rest/BiodataController/bio', 
     method: 'POST', 
     reader: { 
      type: 'xml', 
      record: 'biodata', 
      rootProperty: 'biodatas' 
     } 
    }, 
}); 

Basic.js

Ext.define('LICApp.view.charts.bar3d.Basic', { 
    extend: 'Ext.Panel', 
    xtype: 'bar-basic-3d', 
    controller: 'bar-basic-3d', 

    requires: [ 
     'Ext.chart.theme.Muted', 
     'LICApp.store.2FAData', 
     'Ext.grid.feature.Grouping' 

    ], 

    width: 1300, 

    items: [{ 
     xtype: 'combobox', 
     hideLabel: true, 
     store: { 
      type: '2fa-data' 

     }, 
     valueField: 'zone', 
     displayField: 'zone', 
     typeAhead: true, 
     queryMode: 'local', 
     triggerAction: 'query', 
     emptyText: 'Select a Zone...', 
     selectOnFocus: true, 
     width: 200, 
     indent: true 
    }, 
    { 
     xtype: 'cartesian', 
     flipXY: true, 
     reference: 'chart', 
     width: '100%', 
     height: 500, 
     insetPadding: '40 40 30 40', 
     innerPadding: '3 0 0 0', 
     theme: { 
      type: 'muted' 
     }, 
     store: { 
      type: '2fa-data', 


     }, 
     animation: { 
      easing: 'easeOut', 
      duration: 500 
     }, 
     interactions: ['itemhighlight'], 
     axes: [{ 
      type: 'numeric3d', 
      //position: 'bottom', 
      //fields: 'name', 
      //maximum: 150000, 
      //majorTickSteps: 10, 
      renderer: 'onAxisLabelRender', 
      //title: 'Number of Employees', 
      grid: { 
       odd: { 
        fillStyle: 'rgba(245, 245, 245, 1.0)' 

       }, 
       even: { 
        fillStyle: 'rgba(255, 255, 255, 1.0)' 

       } 
      } 
     }, { 
      type: 'category3d', 
      position: 'left', 
      fields: 'name', 
      label: { 
       textAlign: 'right' 
      }, 
      grid: true 
     }], 
     series: [{ 
      type: 'bar3d', 
      xField: 'name', 
      yField: 'cnt', 
      style: { 
       minGapWidth: 10 
      }, 
      highlight: true, 
      label: { 
       field: 'cnt', 
       display: 'insideEnd', 
       renderer: 'onSeriesLabelRender' 
      }, 
      tooltip: { 
       trackMouse: true, 
       renderer: 'onSeriesTooltipRender' 
      } 
     }], 
     sprites: [{ 
      type: 'text', 
      text: 'Implementation of 2FA Biometric - Progress Chart', 
      fontSize: 22, 
      width: 100, 
      height: 30, 
      x: 40, // the sprite x position 
      y: 20 // the sprite y position 
     }, { 
      type: 'text', 
      text: 'Source: 2FA Data Server', 
      fontSize: 10, 
      x: 12, 
      y: 490 
     }] 
    }], 
    tbar: [ 
     '->', 
     { 
      text: 'Preview', 
      handler: 'onPreview' 
     } 
    ], 
    listeners: { 
     select: 'onItemSelected' 
    } 

}); 

BasicController.js

Ext.define('LICApp.view.charts.bar3d.BasicController', { 
extend: 'Ext.app.ViewController', 
alias: 'controller.bar-basic-3d', 

onAxisLabelRender: function (axis, label, layoutContext) { 
    return Ext.util.Format.number(layoutContext.renderer(label)); 
}, 

onSeriesLabelRender: function (v) { 
    return Ext.util.Format.number(v); 
}, 

onSeriesTooltipRender: function (tooltip, record, item) { 
    var formatString = '0,000 '; 

    tooltip.setHtml(record.get('zone') + ': ' + 
     Ext.util.Format.number(record.get('cnt'), formatString)); 

}, 

onPreview: function() { 
    if (Ext.isIE8) { 
     Ext.Msg.alert('Unsupported Operation', 'This operation requires a newer version of Internet Explorer.'); 
     return; 
    } 
    var chart = this.lookupReference('chart'); 
    chart.preview(); 

     }, 
onItemSelected: function (sender, record) { 
    var zone = combo.getValue(); 
},  

}); 

Answer 1

選択のためのリスナーを変更してください

私のコードは下の通りです代わりにイベントf パネル~combobox。パネルには選択イベントがありません。

私はcombobox select/change bothイベントのためにSencha Fiddleデモを作成しました。どのように動作しているかを示します。これはあなたの問題を解決するか、あなたの機能を達成するのに役立つことを願っています。

// The data store containing the list of states 
var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], 
    data: [{ 
     "abbr": "AL", 
     "name": "Alabama" 
    }, { 
     "abbr": "AK", 
     "name": "Alaska" 
    }, { 
     "abbr": "AZ", 
     "name": "Arizona" 
    }] 
}); 

// Create the combo box, attached to the states data store 
Ext.create('Ext.form.ComboBox', { 
    fieldLabel: 'Choose State', 
    store: states, 
    queryMode: 'local', 
    margin: 10, 
    displayField: 'name', 
    valueField: 'abbr', 
    renderTo: Ext.getBody(), 
    listeners: { 
     select: function (combo, record) { 
       Ext.Msg.alert('Success', 'Congrtas you have selected <b>' + record.get("name") + '</b>'); 
      } 
      /*change: function (combo, newValue,oldValue) { 
       Ext.Msg.alert('Success', 'Congrtas you have selected <b>' + newValue + '</b>'); 
      }*/ 
    } 
}); 

Answer 2

あなたのコンボボックスにselectリスナーを添付してください：あなたのViewControllerであなたのonItemSelected方法で

{ 
    xtype: 'combobox', 
    hideLabel: true, 
    store: { 
    type: '2fa-data' 
    }, 
    valueField: 'zone', 
    displayField: 'zone', 
    typeAhead: true, 
    queryMode: 'local', 
    triggerAction: 'query', 
    emptyText: 'Select a Zone...', 
    selectOnFocus: true, 
    width: 200, 
    indent: true, 
    listeners: { 
    select: 'onItemSelected' //this one 
    } 
} 

お知らせ：

onItemSelected: function (sender, record) { //<- param is sender 
    //var zone = combo.getValue(); //you are using combo, this is undefined 
    var zone = sender.getValue(); 
    // or better yet, why not use the `record` parameter? 
    var theValue = record[0].data.zone; 
}, 

Answer 3

煎茶のExt JS MVVMアーキテクチャのbinding機能が役立ちます宣言型コードを記述し、コントローラ内にハンドラを書くのを避けます。これは6.2への移行であるため、コントローラ内の不要なハンドラを削除するためにこのアプローチをとることができます。 Here's小さな例です。

更新：提供された例を参照して 、次の点をお読みください：

1. を親クラスパネルはコンボボックスに下位の階層に利用できるビューモデルを、持っていますおよびチャートコンポーネント。

2. ビューモデルには、dataプロパティrecがあり、コンボボックスから選択したレコードへの参照を保持します。コンボボックスのselectionプロパティは、このrecプロパティにバインドされています。コンボボックスから新しいレコードが選択されると、View Modelのrecプロパティが更新されます。

3. ビューモデルは、2つの店舗を持っている - comboStoreとchartStore

   。 comboStore： - 完全なデータセットが含まれています。これはコンボボックスにバインドされています。

   b。chartStore： - 子ストアはcomboStoreです（子ストアは親ストアからデータを取得しますが、親ストアとは独立してフィルタリングとソートの追加機能があります）。これはチャートコンポーネントにバインドされ、rec.nameプロパティのフィルタリングされます（つまり、recが更新され、フィルタリングがトリガされます）。したがって、技術的には、このストアは常にコンボボックスから選択されたレコードのみを含みます。また、チャートはこのストアにバインドされているため、更新され、選択したレコードの3dbarグラフも表示されます。

ここにインラインコードがあります。詳細はコメントをご覧ください。

Ext.define('MyPanel', { 
     extend: 'Ext.panel.Panel', 
     layout: 'vbox', 

     //Declare parent class view model 
     //This view model will be available down the hierarchy 
     viewModel: { 
      //Declare viewmodel's static data properties 
      data: { 
       //This references the selected record from combo box 
       rec: null, 
      }, 
      //Declare stores for this viewmodel 
      stores: { 
       //Declare store for combo box containing complete dataset 
       comboStore: { 
        fields: ['name', 'apples', 'oranges'], 
        data: [{ 
         name: 'Eric', 
         apples: 10, 
         oranges: 13 
        }, { 
         name: 'Mary', 
         apples: 7, 
         oranges: 20 
        }, { 
         name: 'John', 
         apples: 5, 
         oranges: 12 
        }, { 
         name: 'Bob', 
         apples: 2, 
         oranges: 30 
        }, { 
         name: 'Joe', 
         apples: 19, 
         oranges: 17 
        }, { 
         name: 'Macy', 
         apples: 13, 
         oranges: 4 
        }] 
       }, 
       //Declare store for chart component 
       chartStore: { 
        //This is child store of 'ComboStore'. Its data source is 'comboStore' 
        source: '{comboStore}', 
        //This filters this child store to contain only the selected record from combo box 
        filters: [{ 
         //This filters the store by 'name' property, which is the 'displayField' of combo box 
         property: 'name', 
         //This binding helps to filter by the selected record's 'name' property 
         //'rec' is the selecte record which is available in the view model 
         value: '{rec.name}' 
        }], 
       } 
      } 
     }, 
     items: [{ 
      xtype: 'mycombo', 
      bind: { 
       //This binding provides 'comboStore' data to the combobox 
       store: '{comboStore}', 
       //The selection property of combo box is published to the viewmodel 
       //and its reference is stored in the viewmodel data property 'rec' 
       selection: '{rec}' 
      } 
     }, { 
      xtype: 'mychart', 
      bind: { 
       //This binding provides 'chartStore' data to the chart component 
       //Since it is bound, the moment this store is updated/filtered, the chart view gets updated too 
       store: '{chartStore}' 
      } 
     }] 
    });