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 패널 to combobox. 패널에 select 이벤트가 없습니다.

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 리스너를 첨부해야합니다

{ 
    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 방법에서의 ViewController에서 :

는

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

센차 내선 JS MVVM 아키텍처의 binding 기능을하는 데 도움이 선언적 코드를 작성하고 컨트롤러에 핸들러 작성을 피하십시오. 6.2로 마이그레이션되었으므로 컨트롤러에서 불필요한 핸들러를 제거하기 위해이 방법을 사용할 수 있습니다. Here's 작은 예제.

업데이트 : 제공된 예를 참조 참조하시기 바랍니다 다음 사항 :

1. 부모 클래스 패널는 콤보 상자에 계층 구조 아래로 사용할 수있는보기 모델을 가지고 및 도표 구성 요소.

2. 보기 모델에는 data 속성 rec이 있으며, 콤보 상자에서 선택한 레코드에 대한 참조를 보유합니다. 콤보 상자의 selection 속성은이 rec 속성에 바인딩됩니다. 콤보 상자에서 새 레코드를 선택하는 순간 View Model의 rec 속성이 업데이트됩니다. comboStore 및 chartStore

   A -

3. 보기 모델은 두 개의 매장을 확보하고있다. 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}' 
      } 
     }] 
    });