CDPP / AMDA_IHM

Commit afd835e14a264fa85a062ac33e979d14e087dd2f

Authored by Menouar AZIB
1 parent d70a8c72
Exists in master and in 16 other branches FER_11242, FER_11478, FER_11500, FER_11537, FER_11586, FER_11588, FER_6265, FER_7862, FER_9629, FER_TFCat, Histo1D2D, MAZ_11362, MAZ_11427, SpeasyGet, amdadev, openam

Refactoring of PlotFunction And Adding Histogram Cmpt to it

Showing 5 changed files with 448 additions and 173 deletions   Show diff stats
Inline Side-by-side
js/app/views/PlotComponents/plotFunction/BaseComponent.js 0 → 100644
  Diff comments   View file @afd835e
... ... @@ -0,0 +1,13 @@
  1 +// Define the base class
  2 +Ext.define('amdaPlotComp.plotFunction.BaseComponent', {
  3 + extend: 'Ext.form.FieldSet',
  4 +
  5 + /**
  6 + * Subclasses are expected to implement this method to retrieve values.
  7 + * @returns {Object} The values.
  8 + * @throws {Error} If the method is not implemented.
  9 + */
  10 + getValues: function () {
  11 + throw new Error('getValues() method must be implemented by subclass');
  12 + }
  13 +});
... ...
js/app/views/PlotComponents/plotFunction/FFTCmpt.js 0 → 100644
  Diff comments   View file @afd835e
... ... @@ -0,0 +1,45 @@
  1 +Ext.define('amdaPlotComp.plotFunction.FFTCmpt', {
  2 + extend: 'amdaPlotComp.plotFunction.BaseComponent',
  3 + title: "FFT Arguments",
  4 + id: 'fftComboBox',
  5 +
  6 + initComponent: function () {
  7 + const me = this;
  8 +
  9 + // Define combo box store
  10 + const comboStore = Ext.create('Ext.data.Store', {
  11 + fields: ['label', 'value'],
  12 + data: [
  13 + { label: 'Frequency', value: 'Frequency' },
  14 + { label: 'Period', value: 'Period' }
  15 + ]
  16 + });
  17 +
  18 + // Create combo box
  19 + const fftCombo = Ext.create('Ext.form.field.ComboBox', {
  20 + itemId: me.id, // Add itemId here
  21 + fieldLabel: 'Abscisse',
  22 + store: comboStore,
  23 + queryMode: 'local',
  24 + displayField: 'label',
  25 + valueField: 'value',
  26 + editable: false,
  27 + value: 'Frequency'
  28 + });
  29 +
  30 + // Assign items to the component
  31 + me.items = [fftCombo];
  32 +
  33 + // Call the parent class's initComponent method
  34 + me.callParent(arguments);
  35 + },
  36 +
  37 + getValues: function () {
  38 + const fftComboBox = this.down('#'+this.id); // Retrieve ComboBox by itemId
  39 + const selectedValue = fftComboBox.getValue(); // Get selected value
  40 +
  41 + return {
  42 + abscisse: selectedValue
  43 + };
  44 + }
  45 +});
... ...
js/app/views/PlotComponents/plotFunction/FunctionType copy.js 0 → 100644
  Diff comments   View file @afd835e
... ... @@ -0,0 +1,247 @@
  1 +/**
  2 + * Un composant de 'PlotFunction' qui permet à l'utilisateur de séléctionner le type de fonction à appliquer : FFT, SUM, ...
  3 + */
  4 +Ext.define('amdaPlotComp.plotFunction.FunctionType', {
  5 + extend: 'Ext.form.Panel',
  6 +
  7 + plotFunctionItems: {
  8 + type: {
  9 + name: "type",
  10 + field: "Function Type",
  11 + values: {
  12 + fft: "FFT",
  13 + dft: "DFT",
  14 + sum: "SUM",
  15 + avg: "AVG",
  16 + hist: "Histogram"
  17 + },
  18 + labels: {
  19 + fft: "FFT (Magnitude^2)",
  20 + dft: "DFT (Magnitude^2)",
  21 + sum: "SUM",
  22 + avg: "AVG",
  23 + hist: "Histogram Plot"
  24 + }
  25 + },
  26 + scale: {
  27 + name: "scale_abscisse",
  28 + field: "X-Axis Scale",
  29 + values: {
  30 + log: "logarithmic",
  31 + linear: "linear",
  32 + inherits: "Inherits"
  33 + }
  34 + },
  35 + abscisse: {
  36 + name: "abscisse",
  37 + field: "Abscisse",
  38 + values: {
  39 + frequency: "Frequency",
  40 + period: "Period"
  41 + }
  42 + },
  43 + scale_ordonnee: {
  44 + name: "scale_ordonnee",
  45 + field: "Y-Axis Scale"
  46 + },
  47 + // For histogram plot
  48 + histogram: {
  49 + x_min: {
  50 + name: "x_min",
  51 + filed:"X Min"
  52 + },
  53 + x_max: {
  54 + name: "x_max",
  55 + filed:"X Max"
  56 + },
  57 + bins: {
  58 + name: "bins",
  59 + filed:"Nb. of bins"
  60 + },
  61 + function:{
  62 + name: "function",
  63 + filed: "Function to apply",
  64 + values: {
  65 + density: "density",
  66 + normalised_density: "normalised_density"
  67 + },
  68 + labels: {
  69 + density: "Density",
  70 + normalised_density: "Normalised Density"
  71 + }
  72 + }
  73 +
  74 +
  75 +
  76 + }
  77 + },
  78 +
  79 + initComponent: function () {
  80 + const key_ = "key";
  81 + const name_ = "name";
  82 +
  83 + //Combobox to choose the type of fucntion to be applied
  84 + const data_function_type = [];
  85 + let item_type = {};
  86 + item_type[key_] = this.plotFunctionItems.type.values.fft;
  87 + item_type[name_] = this.plotFunctionItems.type.labels.fft;
  88 + data_function_type.push(item_type);
  89 + item_type = {};
  90 + item_type[key_] = this.plotFunctionItems.type.values.dft;
  91 + item_type[name_] = this.plotFunctionItems.type.labels.dft;
  92 + // Disbale DFT momentarily
  93 + data_function_type.push(item_type);
  94 +
  95 + item_type = {};
  96 + item_type[key_] = this.plotFunctionItems.type.values.sum;
  97 + item_type[name_] = this.plotFunctionItems.type.labels.sum;
  98 + data_function_type.push(item_type);
  99 + item_type = {};
  100 + item_type[key_] = this.plotFunctionItems.type.values.avg;
  101 + item_type[name_] = this.plotFunctionItems.type.labels.avg;
  102 + data_function_type.push(item_type);
  103 +
  104 + const function_type = Ext.create('Ext.data.Store', {
  105 + fields: [key_, name_],
  106 + data: data_function_type
  107 + });
  108 +
  109 + //Combo to choose type of scaling
  110 + const data_ = [];
  111 + const item_inherits = {};
  112 + item_inherits[key_] = this.plotFunctionItems.scale.values.inherits;
  113 + item_inherits[name_] = this.plotFunctionItems.scale.values.inherits;
  114 + // Disbale inherits momentarily
  115 + //data_.push(item_inherits);
  116 +
  117 + const item_log = {};
  118 + item_log[key_] = this.plotFunctionItems.scale.values.log;
  119 + item_log[name_] = this.plotFunctionItems.scale.values.log;
  120 + data_.push(item_log);
  121 +
  122 + const item_linear = {};
  123 + item_linear[key_] = this.plotFunctionItems.scale.values.linear;
  124 + item_linear[name_] = this.plotFunctionItems.scale.values.linear;
  125 + data_.push(item_linear);
  126 +
  127 + const scale = Ext.create('Ext.data.Store', {
  128 + fields: [key_, name_],
  129 + data: data_
  130 + });
  131 +
  132 + //Combo to choose x type data of FFT
  133 + const data__ = [];
  134 + const item_frequency = {};
  135 + item_frequency[key_] = this.plotFunctionItems.abscisse.values.frequency;
  136 + item_frequency[name_] = this.plotFunctionItems.abscisse.values.frequency;
  137 + data__.push(item_frequency);
  138 +
  139 + const item_period = {};
  140 + item_period[key_] = this.plotFunctionItems.abscisse.values.period;
  141 + item_period[name_] = this.plotFunctionItems.abscisse.values.period;
  142 + data__.push(item_period);
  143 +
  144 + const abscisse = Ext.create('Ext.data.Store', {
  145 + fields: [key_, name_],
  146 + data: data__
  147 + });
  148 +
  149 + const me = this;
  150 +
  151 + var tabParams = Ext.create('Ext.form.FieldSet', {
  152 + collapsible: false,
  153 + layout: {
  154 + type: 'vbox',
  155 + pack: 'start',
  156 + align: 'stretch',
  157 + },
  158 + bodyStyle: 'background: none',
  159 + items: [
  160 + {
  161 + xtype: 'combo',
  162 + fieldLabel: this.plotFunctionItems.type.field,
  163 + store: function_type,
  164 + queryMode: 'local',
  165 + displayField: name_,
  166 + valueField: key_,
  167 + editable: false,
  168 + value: this.plotFunctionItems.type.values.sum,
  169 + name: this.plotFunctionItems.type.name,
  170 + listeners: {
  171 + change: function (combo, value) {
  172 + if (value === me.plotFunctionItems.type.values.fft || value === me.plotFunctionItems.type.values.dft) {
  173 + me.getForm().findField(me.plotFunctionItems.abscisse.name).setVisible(true);
  174 + }
  175 + else {
  176 + me.getForm().findField(me.plotFunctionItems.abscisse.name).setVisible(false);
  177 + }
  178 + }
  179 + }
  180 + },
  181 + {
  182 + xtype: 'combo',
  183 + fieldLabel: this.plotFunctionItems.scale.field,
  184 + store: scale,
  185 + queryMode: 'local',
  186 + displayField: name_,
  187 + valueField: key_,
  188 + editable: false,
  189 + value: this.plotFunctionItems.scale.values.log,
  190 + name: this.plotFunctionItems.scale.name
  191 + },
  192 + {
  193 + xtype: 'combo',
  194 + fieldLabel: this.plotFunctionItems.abscisse.field,
  195 + store: abscisse,
  196 + queryMode: 'local',
  197 + displayField: name_,
  198 + valueField: key_,
  199 + editable: false,
  200 + hidden: true,
  201 + value: this.plotFunctionItems.abscisse.values.frequency,
  202 + name: this.plotFunctionItems.abscisse.name
  203 + },
  204 + {
  205 + xtype: 'combo',
  206 + fieldLabel: this.plotFunctionItems.scale_ordonnee.field,
  207 + store: scale,
  208 + queryMode: 'local',
  209 + displayField: name_,
  210 + valueField: key_,
  211 + editable: false,
  212 + value: this.plotFunctionItems.scale.values.log,
  213 + name: this.plotFunctionItems.scale_ordonnee.name
  214 + }
  215 + ]
  216 + });
  217 +
  218 + const config =
  219 + {
  220 + title: 'Function Type',
  221 + bodyStyle: { background: '#dfe8f6' },
  222 + items: [tabParams]
  223 + };
  224 +
  225 + Ext.apply(this, config);
  226 + this.callParent(arguments);
  227 + },
  228 +
  229 + /**
  230 + * Retournes les valeurs des comboboxes associées à ce composant
  231 + * @returns les valeurs des comboboxes se forme d'un dictionnaire
  232 + */
  233 + getValues: function () {
  234 + const value_scale = this.getForm().findField(this.plotFunctionItems.scale.name).getValue();
  235 + const value_abscisse = this.getForm().findField(this.plotFunctionItems.abscisse.name).getValue();
  236 + const value_scale_ordonnee = this.getForm().findField(this.plotFunctionItems.scale_ordonnee.name).getValue();
  237 + const type_function = this.getForm().findField(this.plotFunctionItems.type.name).getValue();
  238 +
  239 + let out = {};
  240 + out[this.plotFunctionItems.type.name] = type_function;
  241 + out[this.plotFunctionItems.abscisse.name] = value_abscisse;
  242 + out[this.plotFunctionItems.scale.name] = value_scale;
  243 + out[this.plotFunctionItems.scale_ordonnee.name] = value_scale_ordonnee;
  244 +
  245 + return out;
  246 + }
  247 +});
0 248 \ No newline at end of file
... ...
js/app/views/PlotComponents/plotFunction/FunctionType.js
  Diff comments   View file @afd835e
... ... @@ -3,120 +3,98 @@
3 3 */
4 4 Ext.define('amdaPlotComp.plotFunction.FunctionType', {
5 5 extend: 'Ext.form.Panel',
6   -
7   - plotFunctionItems: {
8   - type: {
9   - name: "type",
10   - field: "Function Type",
11   - values: {
12   - fft: "FFT",
13   - dft: "DFT",
14   - sum: "SUM",
15   - avg: "AVG"
16   - },
17   - labels: {
18   - fft: "FFT (Magnitude^2)",
19   - dft: "DFT (Magnitude^2)",
20   - sum: "SUM",
21   - avg: "AVG"
22   - }
23   - },
24   - scale: {
25   - name: "scale_abscisse",
26   - field: "X-Axis Scale",
27   - values: {
28   - log: "logarithmic",
29   - linear: "linear",
30   - inherits: "Inherits"
31   - }
32   - },
33   - abscisse: {
34   - name: "abscisse",
35   - field: "Abscisse",
36   - values: {
37   - frequency: "Frequency",
38   - period: "Period"
39   - }
40   - },
41   - scale_ordonnee: {
42   - name: "scale_ordonnee",
43   - field: "Y-Axis Scale"
44   - }
  6 +
  7 + view: null,
  8 + currentModule: null,
  9 +
  10 + functionComboBox: "type",
  11 + x_axis: { label: "X Axis", value: "scale_abscisse" },
  12 + y_axis: { label: "Y Axis", value: "scale_ordonnee" },
  13 + scaleOptions: {
  14 + linear: { label: "Linear", value: "linear" },
  15 + logarithmic: { label: "Logarithmic", value: "logarithmic" }
  16 + },
  17 + functionOptions: {
  18 + fft: { label: "FFT (Magnitude^2)", value: "FFT" },
  19 + dft: { label: "DFT (Magnitude^2)", value: "DFT" },
  20 + sum: { label: "SUM", value: "SUM" },
  21 + avg: { label: "AVG", value: "AVG" },
  22 + hist: { label: "Histogram Plot", value: "histogram_plot" }
45 23 },
46 24  
47   - initComponent: function () {
48   - const key_ = "key";
49   - const name_ = "name";
50   -
51   - //Combobox to choose the type of fucntion to be applied
52   - const data_function_type = [];
53   - let item_type = {};
54   - item_type[key_] = this.plotFunctionItems.type.values.fft;
55   - item_type[name_] = this.plotFunctionItems.type.labels.fft;
56   - data_function_type.push(item_type);
57   - item_type = {};
58   - item_type[key_] = this.plotFunctionItems.type.values.dft;
59   - item_type[name_] = this.plotFunctionItems.type.labels.dft;
60   - // Disbale DFT momentarily
61   - data_function_type.push(item_type);
62   -
63   - item_type = {};
64   - item_type[key_] = this.plotFunctionItems.type.values.sum;
65   - item_type[name_] = this.plotFunctionItems.type.labels.sum;
66   - data_function_type.push(item_type);
67   - item_type = {};
68   - item_type[key_] = this.plotFunctionItems.type.values.avg;
69   - item_type[name_] = this.plotFunctionItems.type.labels.avg;
70   - data_function_type.push(item_type);
71   -
72   - const function_type = Ext.create('Ext.data.Store', {
73   - fields: [key_, name_],
74   - data: data_function_type
  25 + createFunctionComboBox: function (defaultSelection) {
  26 + const self = this;
  27 + const comboStore = Ext.create('Ext.data.Store', {
  28 + fields: ['label', 'value'],
  29 + data: Object.values(this.functionOptions)
75 30 });
76 31  
77   - //Combo to choose type of scaling
78   - const data_ = [];
79   - const item_inherits = {};
80   - item_inherits[key_] = this.plotFunctionItems.scale.values.inherits;
81   - item_inherits[name_] = this.plotFunctionItems.scale.values.inherits;
82   - // Disbale inherits momentarily
83   - //data_.push(item_inherits);
84   -
85   - const item_log = {};
86   - item_log[key_] = this.plotFunctionItems.scale.values.log;
87   - item_log[name_] = this.plotFunctionItems.scale.values.log;
88   - data_.push(item_log);
89   -
90   - const item_linear = {};
91   - item_linear[key_] = this.plotFunctionItems.scale.values.linear;
92   - item_linear[name_] = this.plotFunctionItems.scale.values.linear;
93   - data_.push(item_linear);
94   -
95   - const scale = Ext.create('Ext.data.Store', {
96   - fields: [key_, name_],
97   - data: data_
  32 + const combo = Ext.create('Ext.form.field.ComboBox', {
  33 + fieldLabel: 'Function',
  34 + store: comboStore,
  35 + queryMode: 'local',
  36 + displayField: 'label',
  37 + valueField: 'value',
  38 + editable: false,
  39 + name: this.functionComboBox,
  40 + value: defaultSelection || Object.values(this.functionOptions)[2].value, // Default value
  41 + listeners: {
  42 + change: function (combo, value) {
  43 + self.handleFunction(value);
  44 + }
  45 + }
  46 + });
  47 +
  48 + return combo;
  49 + },
  50 +
  51 + createAxisComboBox: function (axis) {
  52 + const comboStore = Ext.create('Ext.data.Store', {
  53 + fields: ['label', 'value'],
  54 + data: Object.values(this.scaleOptions)
98 55 });
99 56  
100   - //Combo to choose x type data of FFT
101   - const data__ = [];
102   - const item_frequency = {};
103   - item_frequency[key_] = this.plotFunctionItems.abscisse.values.frequency;
104   - item_frequency[name_] = this.plotFunctionItems.abscisse.values.frequency;
105   - data__.push(item_frequency);
106   -
107   - const item_period = {};
108   - item_period[key_] = this.plotFunctionItems.abscisse.values.period;
109   - item_period[name_] = this.plotFunctionItems.abscisse.values.period;
110   - data__.push(item_period);
111   -
112   - const abscisse = Ext.create('Ext.data.Store', {
113   - fields: [key_, name_],
114   - data: data__
  57 + const combo = Ext.create('Ext.form.field.ComboBox', {
  58 + fieldLabel: axis.label,
  59 + store: comboStore,
  60 + queryMode: 'local',
  61 + displayField: 'label',
  62 + valueField: 'value',
  63 + editable: false,
  64 + name: axis.value,
  65 + value: Object.values(this.scaleOptions)[0].value // Default value
115 66 });
116 67  
117   - const me = this;
  68 + return combo;
  69 + },
  70 +
  71 +
  72 + handleFunction: function (value) {
  73 + if (this.currentModule) {
  74 + this.view.remove(this.currentModule, true);
  75 + this.currentModule = null;
  76 + }
  77 +
  78 + switch (value) {
  79 + case this.functionOptions.fft.value:
  80 + this.currentModule = Ext.create('amdaPlotComp.plotFunction.FFTCmpt');
  81 + break;
  82 + case this.functionOptions.dft.value:
  83 + this.currentModule = Ext.create('amdaPlotComp.plotFunction.FFTCmpt', { title: "DFT Arguments" });
  84 + break;
  85 + case this.functionOptions.hist.value:
  86 + this.currentModule = Ext.create('amdaPlotComp.plotFunction.Histogram');
  87 + break;
  88 + default:
  89 + break;
  90 + }
  91 + if (this.currentModule)
  92 + this.view.add(this.currentModule);
  93 + },
  94 +
118 95  
119   - var tabParams = Ext.create('Ext.form.FieldSet', {
  96 + initComponent: function () {
  97 + this.view = Ext.create('Ext.form.FieldSet', {
120 98 collapsible: false,
121 99 layout: {
122 100 type: 'vbox',
... ... @@ -124,70 +102,14 @@ Ext.define('amdaPlotComp.plotFunction.FunctionType', {
124 102 align: 'stretch',
125 103 },
126 104 bodyStyle: 'background: none',
127   - items: [
128   - {
129   - xtype: 'combo',
130   - fieldLabel: this.plotFunctionItems.type.field,
131   - store: function_type,
132   - queryMode: 'local',
133   - displayField: name_,
134   - valueField: key_,
135   - editable: false,
136   - value: this.plotFunctionItems.type.values.sum,
137   - name: this.plotFunctionItems.type.name,
138   - listeners: {
139   - change: function (combo, value) {
140   - if (value === me.plotFunctionItems.type.values.fft || value === me.plotFunctionItems.type.values.dft) {
141   - me.getForm().findField(me.plotFunctionItems.abscisse.name).setVisible(true);
142   - }
143   - else {
144   - me.getForm().findField(me.plotFunctionItems.abscisse.name).setVisible(false);
145   - }
146   - }
147   - }
148   - },
149   - {
150   - xtype: 'combo',
151   - fieldLabel: this.plotFunctionItems.scale.field,
152   - store: scale,
153   - queryMode: 'local',
154   - displayField: name_,
155   - valueField: key_,
156   - editable: false,
157   - value: this.plotFunctionItems.scale.values.log,
158   - name: this.plotFunctionItems.scale.name
159   - },
160   - {
161   - xtype: 'combo',
162   - fieldLabel: this.plotFunctionItems.abscisse.field,
163   - store: abscisse,
164   - queryMode: 'local',
165   - displayField: name_,
166   - valueField: key_,
167   - editable: false,
168   - hidden: true,
169   - value: this.plotFunctionItems.abscisse.values.frequency,
170   - name: this.plotFunctionItems.abscisse.name
171   - },
172   - {
173   - xtype: 'combo',
174   - fieldLabel: this.plotFunctionItems.scale_ordonnee.field,
175   - store: scale,
176   - queryMode: 'local',
177   - displayField: name_,
178   - valueField: key_,
179   - editable: false,
180   - value: this.plotFunctionItems.scale.values.log,
181   - name: this.plotFunctionItems.scale_ordonnee.name
182   - }
183   - ]
  105 + items: [this.createFunctionComboBox(), this.createAxisComboBox(this.x_axis), this.createAxisComboBox(this.y_axis)]
184 106 });
185 107  
186 108 const config =
187 109 {
188   - title: 'Function Type',
  110 + title: 'Function To Apply',
189 111 bodyStyle: { background: '#dfe8f6' },
190   - items: [tabParams]
  112 + items: [this.view]
191 113 };
192 114  
193 115 Ext.apply(this, config);
... ... @@ -199,16 +121,19 @@ Ext.define('amdaPlotComp.plotFunction.FunctionType', {
199 121 * @returns les valeurs des comboboxes se forme d'un dictionnaire
200 122 */
201 123 getValues: function () {
202   - const value_scale = this.getForm().findField(this.plotFunctionItems.scale.name).getValue();
203   - const value_abscisse = this.getForm().findField(this.plotFunctionItems.abscisse.name).getValue();
204   - const value_scale_ordonnee = this.getForm().findField(this.plotFunctionItems.scale_ordonnee.name).getValue();
205   - const type_function = this.getForm().findField(this.plotFunctionItems.type.name).getValue();
206   -
  124 + const xAxisScale = this.getForm().findField(this.x_axis.value).getValue();
  125 + const yAxisScale = this.getForm().findField(this.y_axis.value).getValue();
  126 + const functionType = this.getForm().findField(this.functionComboBox).getValue();
207 127 let out = {};
208   - out[this.plotFunctionItems.type.name] = type_function;
209   - out[this.plotFunctionItems.abscisse.name] = value_abscisse;
210   - out[this.plotFunctionItems.scale.name] = value_scale;
211   - out[this.plotFunctionItems.scale_ordonnee.name] = value_scale_ordonnee;
  128 + out[this.functionComboBox] = functionType;
  129 + out[this.x_axis.value] = xAxisScale;
  130 + out[this.y_axis.value] = yAxisScale;
  131 +
  132 + const values = this.currentModule.getValues();
  133 +
  134 + // Adding values to out
  135 + Object.assign(out, values);
  136 + console.log(out);
212 137  
213 138 return out;
214 139 }
... ...
js/app/views/PlotComponents/plotFunction/Histogram.js 0 → 100644
  Diff comments   View file @afd835e
... ... @@ -0,0 +1,45 @@
  1 +Ext.define('amdaPlotComp.plotFunction.Histogram', {
  2 + extend: 'amdaPlotComp.plotFunction.BaseComponent',
  3 + title: "Histogram Arguments",
  4 +
  5 +
  6 + items: [
  7 + {
  8 + xtype: 'numberfield',
  9 + fieldLabel: 'X Min',
  10 + name: 'xMin',
  11 + allowDecimals: true, // This allows decimal numbers
  12 + hideTrigger: true, // Hides the spinner buttons
  13 + keyNavEnabled: false, // Disables keyboard navigation for precision
  14 + },
  15 + {
  16 + xtype: 'numberfield',
  17 + fieldLabel: 'X Max',
  18 + name: 'xMax',
  19 + allowDecimals: true, // This allows decimal numbers
  20 + hideTrigger: true, // Hides the spinner buttons
  21 + keyNavEnabled: false, // Disables keyboard navigation for precision
  22 + },
  23 + {
  24 + xtype: 'numberfield',
  25 + fieldLabel: 'Number of Bins',
  26 + name: 'numBins',
  27 + minValue: 1,
  28 + value: 100,
  29 + allowDecimals: false, // This ensures only integers are allowed
  30 + keyNavEnabled: false, // Disables keyboard navigation for precision
  31 + },
  32 + {
  33 + xtype: 'combo',
  34 + fieldLabel: 'Density Type',
  35 + name: 'densityType',
  36 + store: ['Density', 'Normalized Density'],
  37 + value: 'Density' // Set 'Density' as default
  38 + }
  39 + ],
  40 +
  41 + getValues: function () {
  42 +
  43 + }
  44 +
  45 +});
... ...