Javascript ExtJS中的组合框值
我不熟悉ext js（使用ext js 6.2），尝试从组合框中获取值，以从选定值获取三维条形图，但我既没有获取选定值，也没有获取具有选定值的图表。请帮我解决这个问题 我的代码如下： 2FAData.js：Javascript ExtJS中的组合框值,javascript,extjs,Javascript,Extjs,我不熟悉ext 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'
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'
}
},
});
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'
}
});
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();
},
});
请将“选择事件”的侦听器而不是“面板”的侦听器更改为。面板没有选择事件 我已经为combobox选择/更改两个事件创建了一个演示。它将显示它是如何工作的。希望这将帮助您解决您的问题或实现您的功能
// 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>');
}*/
}
});
//包含状态列表的数据存储
var states=Ext.create（'Ext.data.Store'{
字段：['abbr'，'name']，
数据：[{
“缩写”：“AL”，
“姓名”：“阿拉巴马州”
}, {
“缩写”：“AK”，
“名称”：“阿拉斯加”
}, {
“缩写”：“AZ”，
“名称”：“亚利桑那州”
}]
});
//创建附加到状态数据存储的组合框
Ext.create（'Ext.form.ComboBox'{
fieldLabel:“选择状态”，
商店：美国，
queryMode:'本地'，
差额：10，
displayField:'名称'，
valueField:'缩写'，
renderTo:Ext.getBody（），
听众：{
选择：函数（组合、记录）{
Ext.Msg.alert（'Success'，'congtas you selected'+record.get（“name”）+''）；
}
/*更改：函数（组合、新值、旧值）{
Ext.Msg.alert（'Success'，'congtas you selected'+newValue+''）；
}*/
}
});
// 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>');
}*/
}
});
//包含状态列表的数据存储
var states=Ext.create（'Ext.data.Store'{
字段：['abbr'，'name']，
数据：[{
“缩写”：“AL”，
“姓名”：“阿拉巴马州”
}, {
“缩写”：“AK”，
“名称”：“阿拉斯加”
}, {
“缩写”：“AZ”，
“名称”：“亚利桑那州”
}]
});
//创建附加到状态数据存储的组合框
Ext.create（'Ext.form.ComboBox'{
fieldLabel:“选择状态”，
商店：美国，
queryMode:'本地'，
差额：10，
displayField:'名称'，
valueField:'缩写'，
renderTo:Ext.getBody（），
听众：{
选择：函数（组合、记录）{
Ext.Msg.alert（'Success'，'congtas you selected'+record.get（“name”）+''）；
}
/*更改：函数（组合、新值、旧值）{
Ext.Msg.alert（'Success'，'congtas you selected'+newValue+''）；
}*/
}
});
选择{
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
}
}
onItemSelectedonItemSelected: 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;
},
onemiselected:function（sender，record）{/您应该在组合框中附加一个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
}
}
请注意，在ViewController中的onItemSelected
方法中：
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;
},
onItemSelected:function（sender，record）{/Sencha Ext JS MVVM体系结构的绑定
功能有助于编写声明性代码并避免在控制器中编写处理程序。由于这是到6.2的迁移，因此可以采用这种方法删除控制器中不必要的处理程序。这是一个小示例
更新：
关于提供的示例，请阅读以下几点：
父类面板有一个视图模型，该模型在层次结构下可用于组合框和图表组件
视图模型有一个data
propertyrec
，它保存对组合框中所选记录的引用。组合框的selection
属性绑定到此rec
属性。这意味着从组合框中选择新记录时，视图模型的rec
属性就会更新。
视图模型还有两个存储区-comboStore
和chartStore
a、 comboStore
：-包含完整的数据集。它绑定到组合框
b、 chartStore
：-是comboStore
的子存储（子存储从父存储获取数据，但具有独立于父存储的额外过滤和排序功能）。它绑定到图表组件，并在rec.name
属性上进行过滤（即，rec
更新时，会触发过滤。）因此，从技术上讲，此存储始终只包含组合框中选定的记录。由于图表绑定到此存储，因此它也会更新并显示选定记录的三维条形图
这是内联代码。请查看注释了解更多信息
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}'
}
}]
});
Sencha Ext JS MVVM体系结构的绑定
功能有助于编写声明性代码并避免在控制器中编写处理程序。由于这是到6.2的迁移，因此可以采用这种方法删除控制器中不必要的处理程序。这是一个小示例
更新：
关于提供的示例，请阅读以下几点：
父类面板有一个视图模型，该模型在层次结构下可用于组合框和图表组件
视图模型有一个data
propertyrec
，它保存对组合框中所选记录的引用。组合框的selection
属性绑定到此rec
属性。这意味着从组合框中选择新记录时，视图模型的rec
属性就会更新。
视图模型还有两个存储区-comboStore
和