組合框值分機js

Question

我是新來的分機js（工作在ext的js 6.2），並試圖從組合框中獲取值從選定的值獲得三維條形圖，但我既沒有獲得選定的價值，也沒有與圖表選定的值。請幫我解決這個問題。

我的代碼是爲下：

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

請更改偵聽器的選擇事件而不是o f 面板至combobox。面板沒有選擇事件。

我已經爲combobox選擇/更改這兩個事件創建了一個Sencha Fiddle演示。它會顯示它是如何工作的。希望這會幫助你解決你的問題或實現你的功能。在你的ViewController

{ 
    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方法：

// 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收聽到您的組合框

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. 視圖模型也有兩家店 - 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}' 
      } 
     }] 
    });