CDPP / AMDA_IHM

Commit 33705dc42b7abdfe4689d356c9637555161b69fd

Authored by Benjamin Renard
1 parent 58e288eb
Exists in master and in 99 other branches 10098, 10178, 5390, 6629, 6728, 6920, 7494, 7497, 7616, 8459, 8528, 8928, 9014, 9016Bis, 9017, 9049, 9084, 9259, 9326, 9345, 9505, 9660, 9750, 9750.bck, 9800, 9980, FER_10285, FER_10400, FER_10435, FER_10557, FER_10663, FER_10765, FER_10828, FER_10828_2, FER_10829, FER_10836, FER_10852, FER_10934, FER_11100, FER_11242, FER_11478, FER_11500, FER_11537, FER_11586, FER_11588, FER_5119, FER_5165, FER_6265, FER_6860, FER_6899, FER_6951, FER_7618, FER_7862, FER_8455, FER_9629, FER_9660, FER_9915, FER_CR41, FER_CR42, FER_CR43, FER_TFCat, Histo1D2D, MAZ_10936, MAZ_11362, MAZ_11427, MAZ_6018, MAZ_9016_New, MAZ_FIX_9016, New_ColorMaps, SpeasyGet, akkodis/amdadev, amdadev, amdadev_test, anr_tempete, catalog-histo, create-user, cu2022, density_maps, develop, epn-tap, expression-parser-bre, frames-transformation, hapi, homePage, master_vge, mlplasmas, multiplot, new-save-plot-request, openam, plot-request, remoteData, rm_6912, rm_6912_bis, rm_7926, rm_8932, save-other-requests, special-params, test-merge, ws_get_catalog

Catalog visu rework

Showing 5 changed files with 467 additions and 328 deletions   Show diff stats
Inline Side-by-side
js/app/models/CatalogNode.js
  Diff comments   View file @33705dc
1   -/**
  1 +/**
2 2 * Project : AMDA-NG
3 3 * Name : CatalogNode.js
4 4 * @class amdaModel.CatalogNode
... ... @@ -10,20 +10,20 @@
10 10 Ext.define('amdaModel.CatalogNode', {
11 11  
12 12 extend: 'amdaModel.TimeTableNode',
13   -
  13 +
14 14 statics: {
15 15 nodeType: 'catalog',
16 16 objectName: 'Catalog'
17 17 },
18 18  
19 19 constructor : function(config)
20   - {
  20 + {
21 21 this.callParent(arguments)
22 22 this.set('moduleId',myDesktopApp.dynamicModules.catalog.id);
23 23 this.set('objectDataModel',amdaModel.Catalog.$className);
24 24 if (this.get('leaf')) this.set('iconCls', 'icon-catalog');
25 25 },
26   -
  26 +
27 27 localMenuItems : function() {
28 28 var menuItems =
29 29 [
... ... @@ -45,7 +45,7 @@ Ext.define('amdaModel.CatalogNode', {
45 45 hidden : true
46 46 }
47 47 ];
48   -
  48 +
49 49 return menuItems;
50 50 },
51 51  
... ... @@ -58,24 +58,24 @@ Ext.define('amdaModel.CatalogNode', {
58 58 fnId : 'mult-downloadMulti',
59 59 text : 'Download selected '+this.self.objectName+'s'
60 60 }];
61   -
  61 +
62 62 return menuItems;
63 63 },
64 64  
65   - shareNode: function(node) {
  65 + shareNode: function(node) {
66 66 myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.catalog.id, true, function (module) {
67 67 module.shareCatalog({'name' : node.get('text'), 'id' : node.get('id')});
68 68 });
69 69 },
70   -
  70 +
71 71 visu : function(contextNode) {
72 72 var me = this;
73   - myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.visu.id, true, function (module) {
  73 + myDesktopApp.getLoadedModule(myDesktopApp.dynamicModules.visu.id, true, function (module) {
74 74 // Catalog & TimeTable nodes normally use no objects in the tree
75 75 var obj = {'id' : me.get('id'), 'name' : me.get('text') };
76   - object = Ext.create(me.get('objectDataModel'), obj);
77   - me.set('object',object);
78   - module.setLinkedNode(me);
  76 + object = Ext.create(me.get('objectDataModel'), obj);
  77 + me.set('object',object);
  78 + module.setLinkedNode(me);
79 79 module.createWindow();
80 80 });
81 81 },
... ... @@ -96,7 +96,7 @@ Ext.define('amdaModel.CatalogNode', {
96 96 // edit newNode into Parameter Module with node as contextNode
97 97 timeTabNode.editInModule();
98 98 });
99   -
100   -
  99 +
  100 +
101 101 }
102 102 });
... ...
js/app/views/CatalogUI.js
  Diff comments   View file @33705dc
... ... @@ -93,7 +93,7 @@ Ext.define('amdaUI.CatalogUI', {
93 93 if (updateStatus) {
94 94 /// real object update
95 95 // update TimeTable object with the content of form
96   - basicForm.updateRecord(this.object);
  96 + basicForm.updateRecord(this.object.get('name'));
97 97 }
98 98 // return the update status
99 99 return updateStatus;
... ... @@ -161,7 +161,7 @@ Ext.define('amdaUI.CatalogUI', {
161 161 timeTabNode.editInModule();
162 162 });
163 163 },
164   - // Convert UTC date to client local date
  164 + // Convert UTC date to client local date
165 165 convertUTCDateToLocalDate: function (date) {
166 166 if (date == null) {
167 167 return date;
... ...
js/app/views/CatalogVisuHistogram.js 0 → 100644
  Diff comments   View file @33705dc
... ... @@ -0,0 +1,34 @@
  1 +/**
  2 + * Project AMDA-NG
  3 + * Name CatalogVisuHistogram.js
  4 + * @class amdaUI.CatalogVisuHistogram
  5 + * @extends Ext.container.Container
  6 + * @brief Histogram Visualization Module UI definition (View)
  7 + * @author elena
  8 + */
  9 +
  10 +Ext.define('amdaUI.CatalogVisuHistogram', {
  11 + extend: 'Ext.form.Panel',
  12 + alias: 'widget.panelCatalogVisuHistogram',
  13 +
  14 + constructor: function(config) {
  15 + this.init(config);
  16 + this.callParent(arguments);
  17 + },
  18 +
  19 + initVisu: function() {
  20 +
  21 + },
  22 +
  23 + init : function (config)
  24 + {
  25 + var myConf = {
  26 + //layout: 'border',
  27 + items: [
  28 +
  29 + ]
  30 + };
  31 +
  32 + Ext.apply (this, Ext.apply(arguments, myConf));
  33 + }
  34 +});
... ...
js/app/views/CatalogVisuScatter.js 0 → 100644
  Diff comments   View file @33705dc
... ... @@ -0,0 +1,266 @@
  1 +/**
  2 + * Project AMDA-NG
  3 + * Name CatalogVisuScatter.js
  4 + * @class amdaUI.CatalogVisuScatter
  5 + * @extends Ext.container.Container
  6 + * @brief Scatter Visualization Module UI definition (View)
  7 + * @author elena
  8 + */
  9 +
  10 +Ext.define('amdaUI.CatalogVisuScatter', {
  11 + extend: 'Ext.form.Panel',
  12 + alias: 'widget.panelCatalogVisuScatter',
  13 +
  14 + constructor: function(config) {
  15 + this.init(config);
  16 + this.callParent(arguments);
  17 + },
  18 +
  19 + getChart: function(chart) {
  20 + var store = Ext.create('Ext.data.Store', {
  21 + fields : [],
  22 + autoload : false
  23 + });
  24 +
  25 + var xAxisTitleField = Ext.getCmp('visu-scatter-X-title');
  26 + xAxisTitle = xAxisTitleField.getValue();
  27 + if (!xAxisTitle || (xAxisTitle == ''))
  28 + xAxisTitle = 'X axis';
  29 +
  30 + this.getAxisOptions('X');
  31 +
  32 + var chartConfig = {
  33 + animate: false,
  34 + mask: false,
  35 + shadow: false,
  36 + theme:'Blue',
  37 + background: { fill : "#fff" },
  38 + store: store,
  39 + axes: [{
  40 + type: 'Numeric',
  41 + position: 'bottom',
  42 + fields: [],
  43 + title: xAxisTitle,
  44 + grid : true
  45 + }, {
  46 + type: 'Numeric',
  47 + position: 'left',
  48 + fields: [],
  49 + title: 'Y axis',
  50 + grid: true
  51 + }],
  52 + series: [{
  53 + type: 'scatter',
  54 + showMarkers: true,
  55 + highlight: true,
  56 +// markerConfig: {
  57 + // radius: 5,
  58 +// size: 5
  59 +// },
  60 + // // axes: ['left', 'bottom'],
  61 + xField: '',
  62 + yField: '',
  63 +// label: {
  64 +// // display: 'under',
  65 +// // renderer: function(value, label, storeItem, item, i, display, animate, index) {
  66 +// // return storeItem.param3;
  67 +// // }
  68 +// },
  69 + tips: {
  70 +// trackMouse: true,
  71 + width: 10,
  72 + height: 20,
  73 + hideDelay: 100, //200 ms
  74 + mouseOffset: [0,0], //[15,18]
  75 + renderer: function(storeItem, item) {
  76 + this.setTitle(storeItem.index + 1);
  77 + }
  78 + }
  79 + }]
  80 + };
  81 +
  82 + return Ext.create('Ext.chart.Chart', chartConfig);
  83 + },
  84 +
  85 + initVisu: function() {
  86 + var me = this;
  87 + },
  88 +
  89 + getAxisOptions: function(axisName) {
  90 + var axisParamField = Ext.getCmp('visu-scatter-' + axisName + '-param');
  91 + console.log(axisParamField.getValue());
  92 +
  93 +
  94 + var axisTitleField = Ext.getCmp('visu-scatter-'+axisName+'-title');
  95 + axisTitle = axisTitleField.getValue();
  96 + if (!axisTitle || (axisTitle == ''))
  97 + axisTitle = axisName+' axis';
  98 + },
  99 +
  100 + getAxisConfig: function(axisIndex, axisName, parametersStore) {
  101 + var paramComboConfig = {
  102 + xtype: 'combo',
  103 + emptyText: 'select parameter',
  104 + editable: false,
  105 + store: parametersStore,
  106 + queryMode: 'local',
  107 + displayField: 'text',
  108 + valueField: 'id',
  109 + axisIndex: axisIndex,
  110 + id: 'visu-scatter-' + axisName + '-param',
  111 + tpl: Ext.create('Ext.XTemplate',
  112 + '<tpl for=".">',
  113 + '<div class="x-boundlist-item">{name}<tpl if="size &gt; 1">[{index}]</tpl></div>',
  114 + '</tpl>'
  115 + ),
  116 + displayTpl: Ext.create('Ext.XTemplate',
  117 + '<tpl for=".">',
  118 + '{name}<tpl if="size &gt; 1">[{index}]</tpl>',
  119 + '</tpl>'
  120 + ),
  121 + listeners : {
  122 + scope : this,
  123 + change : function(combo, newValue, oldValue) {
  124 + if (!combo.axisIndex || combo.axisIndex < 0) {
  125 + return;
  126 + }
  127 + if (newValue) {
  128 + /*this.chartConfig.axes[combo.axisIndex].fields = [newValue];
  129 + var rec = combo.findRecordByValue(newValue);
  130 +
  131 + this.chartConfig.axes[combo.axisIndex].title = rec.get('text');
  132 + this.chartConfig.series[combo.axisIndex].xField = newValue;*/
  133 + console.log(combo.axisIndex);
  134 + }
  135 + }
  136 + }
  137 + };
  138 +
  139 + var comboRangeConfig = {
  140 + xtype : 'combo',
  141 + name:'scaling',
  142 + valueField: 'scaling',
  143 + queryMode:'local',
  144 + store:['auto','manual'],
  145 + forceSelection:true,
  146 + value: 'auto',
  147 + width: 80,
  148 + listeners : {
  149 + scope : this,
  150 + change : function(combo, newValue, oldValue) {
  151 + var minValue = combo.next().next();
  152 + var maxValue = minValue.next().next();
  153 + var disabled = newValue == "auto";
  154 + minValue.reset();
  155 + maxValue.reset();
  156 + minValue.setDisabled(disabled);
  157 + maxValue.setDisabled(disabled);
  158 + }
  159 + }
  160 + };
  161 +
  162 + var axisRangeConfig = {
  163 + xtype : 'fieldcontainer',
  164 + layout: 'hbox',
  165 + items: [
  166 + {
  167 + xtype:'fieldset',
  168 + title: axisName + ' Range',
  169 + border: false,
  170 + layout: 'hbox',
  171 + items: [
  172 + comboRangeConfig,
  173 + {
  174 + xtype: 'splitter'
  175 + },
  176 + {
  177 + xtype: 'numberfield',
  178 + hideTrigger: true,
  179 + width: 50,
  180 + disabled: true
  181 + },
  182 + {
  183 + xtype: 'splitter'
  184 + },
  185 + {
  186 + xtype: 'numberfield',
  187 + hideTrigger: true,
  188 + width: 50,
  189 + disabled: true
  190 + }
  191 + ]
  192 + }
  193 + ]
  194 + };
  195 +
  196 + return {
  197 + xtype : 'fieldset',
  198 + title : axisName + ' axis',
  199 + items : [
  200 + paramComboConfig,
  201 + axisRangeConfig,
  202 + {
  203 + xtype: 'textfield',
  204 + fieldLabel: axisName + ' title',
  205 + id: 'visu-scatter-' + axisName + '-title'
  206 + }
  207 + ]
  208 + };
  209 + },
  210 +
  211 + getPlottingOptionConfig: function() {
  212 + var plotTypeComboConfig = {
  213 + xtype: 'combo',
  214 + emptyText: 'select plot type',
  215 + editable: false,
  216 + store: ['scatter', 'line'],
  217 + queryMode: 'local',
  218 + valueField: 'type',
  219 + value: 'scatter',
  220 + listeners : {
  221 + scope : this,
  222 + change : function(combo, newValue, oldValue) {
  223 + //this.chartConfig.series[0].type = newValue;
  224 + }
  225 + }
  226 + };
  227 +
  228 + var plotThemeComboConfig = {
  229 + xtype: 'combo',
  230 + emptyText: 'select theme',
  231 + editable: false,
  232 + store: ['Base','Green','Sky','Red','Purple','Blue','Yellow'],
  233 + queryMode: 'local',
  234 + valueField: 'type',
  235 + value: 'Blue',
  236 + listeners : {
  237 + scope : this,
  238 + change : function(combo, newValue, oldValue) {
  239 + //this.chartConfig.theme = newValue;
  240 + }
  241 + }
  242 + };
  243 +
  244 + return {
  245 + xtype : 'fieldset',
  246 + title : 'Plotting Options',
  247 + items : [
  248 + plotTypeComboConfig,
  249 + plotThemeComboConfig
  250 + ]
  251 + };
  252 + },
  253 +
  254 + init : function (config)
  255 + {
  256 + var myConf = {
  257 + items: [
  258 + this.getAxisConfig(0,'X', config.parametersStore),
  259 + this.getAxisConfig(0,'Y', config.parametersStore),
  260 + this.getPlottingOptionConfig()
  261 + ]
  262 + };
  263 +
  264 + Ext.apply (this, Ext.apply(arguments, myConf));
  265 + }
  266 +});
... ...
js/app/views/VisuUI.js
  Diff comments   View file @33705dc
... ... @@ -11,6 +11,15 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
11 11 extend: 'Ext.container.Container',
12 12 alias: 'widget.panelVisu',
13 13  
  14 + requires: [
  15 + 'amdaUI.CatalogVisuScatter',
  16 + 'amdaUI.CatalogVisuHistogram'
  17 + ],
  18 +
  19 + visuTabContents: [],
  20 +
  21 + parametersStore: null,
  22 +
14 23 constructor: function(config) {
15 24 this.init(config);
16 25 this.callParent(arguments);
... ... @@ -67,7 +76,7 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
67 76  
68 77 var onAfterInit = function(result, e)
69 78 {
70   - if (!result) {
  79 + /*if (!result) {
71 80 myDesktopApp.errorMsg(e.message);
72 81 Ext.defer(function(){Ext.Msg.toFront()},10);
73 82  
... ... @@ -162,16 +171,28 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
162 171 // me.object.set('nbIntervals',me.chartStore.getTotalCount());
163 172  
164 173 // load object into form
165   - var formPanel = me.items.items[0].items.items[0];
166   - formPanel.getForm().loadRecord(me.object);
  174 + //BRE - var formPanel = me.items.items[0].items.items[0];
  175 + //formPanel.getForm().loadRecord(me.object);
167 176 }
168 177 }
169 178 });
170 179  
171   - me.chartStore.load();
  180 + me.chartStore.load();*/
172 181 }
173 182  
174   - AmdaAction.initForChart(this.object.get('id'), this.object.get('folderId'), this.object.get('objName'), this.fromPlugin, 'catalog', onAfterInit);
  183 + //AmdaAction.initForChart(this.object.get('id'), this.object.get('folderId'), this.object.get('objName'), this.fromPlugin, 'catalog', onAfterInit);
  184 + this.formPanel.getForm().loadRecord(this.object);
  185 +
  186 + this.parametersStore.removeAll();
  187 + Ext.Array.each(this.object.get('parameters'), function(param) {
  188 + for (index = 0; index < param.size; ++index) {
  189 + me.parametersStore.add({'paramId': param.id+'_'+index, 'name' : param.name, 'index': index, 'size': param.size});
  190 + }
  191 + });
  192 +
  193 + Ext.Array.each(this.visuTabContents, function(content) {
  194 + content.initVisu();
  195 + });
175 196 },
176 197  
177 198  
... ... @@ -214,7 +235,7 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
214 235  
215 236 plotChart : function () {
216 237  
217   - this.chartConfig.store = this.chartStore;
  238 + /*this.chartConfig.store = this.chartStore;
218 239  
219 240 var xTitle = this.items.items[0].items.items[0].items.items[1].items.items[2].getValue();
220 241 var yTitle = this.items.items[0].items.items[0].items.items[2].items.items[2].getValue();
... ... @@ -248,7 +269,13 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
248 269  
249 270 var chart = Ext.create('Ext.chart.Chart', this.chartConfig);
250 271  
251   - this.replaceChart(chart);
  272 + this.replaceChart(chart);*/
  273 + var chart = Ext.getCmp('visu-chart');
  274 + var tabPanel = Ext.getCmp('visu-tabpanel');
  275 +
  276 + var chartPanel = chart.up();
  277 + chartPanel.remove(chart);
  278 + chartPanel.insert(tabPanel.activeTab.items.items[0].getChart());
252 279 },
253 280  
254 281 replaceChart: function(chart) {
... ... @@ -259,323 +286,133 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
259 286 chartPanel.insert(oldIndex, chart);
260 287 },
261 288  
  289 + initChartTypes: function() {
  290 + var me = this;
  291 +
  292 + var tabPanel = Ext.getCmp('visu-tabpanel');
  293 + if (!tabPanel)
  294 + return;
  295 +
  296 + var chartTypes = [
  297 + {
  298 + title: 'Scatter',
  299 + widget: 'widget.panelCatalogVisuScatter'
  300 + },
  301 + {
  302 + title: 'Histogram',
  303 + widget: 'widget.panelCatalogVisuHistogram'
  304 + }
  305 + ];
  306 +
  307 + var isFirst = true;
  308 + Ext.Array.each(chartTypes, function(chartType) {
  309 + var tabContent = Ext.create(chartType.widget, {parametersStore : me.parametersStore});
  310 + var tab = tabPanel.add({
  311 + title: chartType.title,
  312 + items: [
  313 + tabContent
  314 + ],
  315 + layout: 'fit'
  316 + });
  317 + me.visuTabContents.push(tabContent);
  318 + if (isFirst) {
  319 + tabPanel.setActiveTab(tab);
  320 + isFirst = false;
  321 + }
  322 + });
  323 + },
  324 +
262 325 init : function (config)
263 326 {
264   - var store = Ext.create('Ext.data.Store', {
265   - fields : [],
266   - autoload : false
  327 + this.parametersStore = Ext.create('Ext.data.Store', {
  328 + fields: [
  329 + {name: 'paramId', type: 'string'},
  330 + {name: 'name', type: 'string'},
  331 + {name: 'index', type: 'int'},
  332 + {name: 'size', type: 'int'}
  333 + ],
  334 + data: []
267 335 });
268 336  
269   - var rangeStore = Ext.create('Ext.data.Store', {
  337 + var store = Ext.create('Ext.data.Store', {
270 338 fields : [],
271 339 autoload : false
272 340 });
273 341  
274   - this.chartConfig = {
275   - width: 500,
276   - height: 500,
277   - animate: false,
278   - mask: false,
279   - shadow: false,
280   - theme:'Blue',
281   - background: { fill : "#fff" },
282   - store: store,
283   - axes: [{
284   - type: 'Numeric',
285   - position: 'bottom',
286   - fields: [],
287   - title: 'X axis',
288   - grid : true
289   - }, {
290   - type: 'Numeric',
291   - position: 'left',
292   - fields: [],
293   - title: 'Y axis',
294   - grid: true
295   - }],
296   - series: [{
297   - type: 'scatter',
298   - showMarkers: true,
299   - highlight: true,
300   -// markerConfig: {
301   - // radius: 5,
302   -// size: 5
303   -// },
304   - // // axes: ['left', 'bottom'],
305   - xField: '',
306   - yField: '',
307   -// label: {
308   -// // display: 'under',
309   -// // renderer: function(value, label, storeItem, item, i, display, animate, index) {
310   -// // return storeItem.param3;
311   -// // }
312   -// },
313   - tips: {
314   -// trackMouse: true,
315   - width: 10,
316   - height: 20,
317   - hideDelay: 100, //200 ms
318   - mouseOffset: [0,0], //[15,18]
319   - renderer: function(storeItem, item) {
320   - this.setTitle(storeItem.index + 1);
321   - }
322   - }
323   - }]
324   - }
325   -
326   - this.parList = Ext.create('Ext.data.Store', {
327   - fields : [ 'text', 'id']
328   - });
329   -
330   - var chart = Ext.create('Ext.chart.Chart', this.chartConfig);
331   -
332   - this.parCombo = Ext.create('Ext.form.ComboBox', {
333   - emptyText: 'select parameter',
334   - editable: false,
335   - store: this.parList,
336   - queryMode: 'local',
337   - displayField: 'text',
338   - valueField: 'id',
339   - // tpl:'<tpl for="."><div ext:qtip="{qtip}" class="x-combo-list-item">{Name}</div></tpl>',
340   - listeners : {
341   - scope : this,
342   - change : function(combo, newValue, oldValue) {
343   - if (newValue) {
344   - this.chartConfig.axes[0].fields = [newValue];
345   - var rec = combo.findRecordByValue(newValue);
346   -
347   - this.chartConfig.axes[0].title = rec.get('text');
348   - this.chartConfig.series[0].xField = newValue;
349   - }
350   - }
351   - }
352   - });
353   -
354   - this.parCombo1 = Ext.create('Ext.form.ComboBox', {
355   - emptyText: 'select parameter',
356   - editable: false,
357   - store: this.parList,
358   - queryMode: 'local',
359   - displayField: 'text',
360   - valueField: 'id',
361   - listeners : {
362   - scope : this,
363   - change : function(combo, newValue, oldValue) {
364   - if (newValue) {
365   - this.chartConfig.axes[1].fields = [newValue];
366   - var rec = combo.findRecordByValue(newValue);
367   - this.chartConfig.axes[1].title = rec.get('text');
368   - this.chartConfig.series[0].yField = newValue;
369   - }
370   - }
371   - }
372   - });
373   -
374   - var plotTypeCombo = Ext.create('Ext.form.ComboBox', {
375   - emptyText: 'select plot type',
376   - editable: false,
377   - store: ['scatter', 'line'],
378   - queryMode: 'local',
379   - valueField: 'type',
380   - value: 'scatter',
381   - listeners : {
382   - scope : this,
383   - change : function(combo, newValue, oldValue) {
384   - this.chartConfig.series[0].type = newValue;
385   - }
386   - }
387   - });
388   -
389   - var plotThemeCombo = Ext.create('Ext.form.ComboBox', {
390   - emptyText: 'select theme',
391   - editable: false,
392   - store: ['Base','Green','Sky','Red','Purple','Blue','Yellow'],
393   - //'Category1','Category2','Category3','Category4','Category5','Category6'],
394   - queryMode: 'local',
395   - valueField: 'type',
396   - value: 'Blue',
397   - listeners : {
398   - scope : this,
399   - change : function(combo, newValue, oldValue) {
400   - this.chartConfig.theme = newValue;
401   - }
402   - }
403   - });
404   -
405   - var comboRangeConfig = {
406   - // fieldLabel:'X Range',
407   - name:'scaling',
408   - valueField: 'scaling',
409   - queryMode:'local',
410   - store:['auto','manual'],
411   - forceSelection:true,
412   - value: 'auto',
413   - width: 80,
414   - listeners : {
415   - scope : this,
416   - change : function(combo, newValue, oldValue) {
417   - var minValue = combo.next().next();
418   - var maxValue = minValue.next().next();
419   - var disabled = newValue == "auto";
420   - minValue.reset();
421   - maxValue.reset();
422   - minValue.setDisabled(disabled);
423   - maxValue.setDisabled(disabled);
424   - }
425   - }
426   - };
427   -
428   - this.comboXrange = Ext.create('Ext.form.ComboBox', comboRangeConfig);
429   - this.comboYrange = Ext.create('Ext.form.ComboBox', comboRangeConfig);
430   -
431   - var formPanel = Ext.create('Ext.form.Panel', {
432   - region : 'center',
433   - layout: 'hbox',
  342 + this.formPanel = Ext.create('Ext.form.Panel', {
  343 + region: 'center',
  344 + layout: 'border',
434 345 bodyStyle: {background : '#dfe8f6'},
435 346 defaults: { border : false, align: 'stretch', padding: '3'},
436   - fieldDefaults: { labelWidth: 80, labelAlign : 'top' },
437   - items: [ {
438   - xtype: 'form',
439   - flex : 1,
440   - bodyStyle: {background : '#dfe8f6'},
441   - items: [{
442   - xtype : 'fieldset',
443   - items : [{
444   - xtype: 'fieldcontainer',
445   - layout: 'hbox',
446   - items: [
447   - { xtype:'textfield', fieldLabel: 'Catalog Name', name: 'name', readOnly: true},
448   - { xtype: 'splitter' },
449   - { xtype:'textfield', fieldLabel: 'Intervals', name: 'nbIntervals', readOnly: true}
450   - ]
451   - }]
452   - },{
453   - xtype : 'fieldset',
454   - title : 'X axis',
455   - items : [
456   - this.parCombo,
457   - {
458   - xtype : 'fieldcontainer',
459   - layout: 'hbox',
460   - items: [{
461   - xtype:'fieldset',
462   - title: 'X Range',
463   - border: false,
464   - layout: 'hbox',
465   - items: [
466   - this.comboXrange,
467   - {
468   - xtype: 'splitter'
469   - }, {
470   - xtype: 'numberfield',
471   - hideTrigger: true,
472   - width: 50,
473   - disabled: true
474   - },{
475   - xtype: 'splitter'
476   - },{
477   - xtype: 'numberfield',
478   - hideTrigger: true,
479   - width: 50,
480   - disabled: true
481   - }]
482   - }]
483   - },
484   -// { xtype : 'checkbox', boxLabel: 'Logarithmic'},
485   - { xtype: 'textfield', fieldLabel: 'X title', name: 'xtitle'}
486   - ]
487   - },{
488   - xtype : 'fieldset',
489   - title : 'Y axis',
490   - items : [
491   - this.parCombo1,
492   - {
493   - xtype : 'fieldcontainer',
494   - layout: 'hbox',
495   - items: [{
496   - xtype:'fieldset',
497   - title: 'Y Range',
498   - border: false,
499   - layout: 'hbox',
500   - items: [
501   - this.comboYrange,
502   - {
503   - xtype: 'splitter'
504   - }, {
505   - xtype: 'numberfield',
506   - hideTrigger: true,
507   - width: 50,
508   - disabled: true
509   - },{
510   - xtype: 'splitter'
511   - },{
512   - xtype: 'numberfield',
513   - hideTrigger: true,
514   - width: 50,
515   - disabled: true
516   - }]
517   - }]
518   - },
519   -// { xtype : 'checkbox', boxLabel: 'Logarithmic',
520   -// listeners: {
521   -// scope: this,
522   -// change : function( check, newValue, oldValue) {
523   -//
524   -// }
525   -// }
526   -// },
527   - { xtype: 'textfield', fieldLabel: 'Y title', name: 'ytitle'}
528   - ]
529   - },
530   - {
531   - xtype : 'fieldset',
532   - title : 'Plotting Options',
533   - items : [
534   - plotTypeCombo,
535   - plotThemeCombo
536   - ]
537   - }
538   - ],
539   - fbar:[{
540   - type: 'button',
541   - text: 'Plot',
542   - scope : this,
543   - handler: this.plotChart
544   -
545   - },{
546   - type: 'button',
547   - text: 'Reset',
548   - scope : this,
549   - handler: this.reset
550   -
551   - }]
552   - }, {
553   - xtype: 'form',
554   - // padding: '3',
555   - flex: 2,
556   - items : [ chart ],
557   - fbar:[
558   - {
559   - type: 'button',
560   - text: 'Save Chart',
561   - scope: this,
562   - handler: function() {
563   - var chartPanel = this.items.items[0].items.items[1];
564   - var chart = chartPanel.down('chart');
565   - chart.save({
566   - type: 'image/png',
567   - defaultUrl : window.location //'http://apus.irap.omp.eu/NEWAMDA/'
568   - });
569   - }
570   - }]
571   - }
572   - ]
573   - });
574   -
575   - var myConf = {
  347 + items: [
  348 + {
  349 + xtype : 'fieldset',
  350 + region: 'north',
  351 + items : [
  352 + {
  353 + xtype: 'fieldcontainer',
  354 + layout: 'hbox',
  355 + fieldDefaults: { labelWidth: 80, labelAlign : 'right' },
  356 + items: [
  357 + { xtype:'textfield', fieldLabel: 'Catalog Name', name: 'name', readOnly: true},
  358 + { xtype: 'splitter' },
  359 + { xtype:'textfield', fieldLabel: 'Intervals', name: 'nbIntervals', readOnly: true}
  360 + ]
  361 + }
  362 + ],
  363 + },
  364 + {
  365 + xtype: 'container',
  366 + region: 'center',
  367 + layout: 'border',
  368 + items: [
  369 + {
  370 + xtype: 'tabpanel',
  371 + region: 'west',
  372 + width: 250,
  373 +// height: 400,
  374 + id: 'visu-tabpanel'
  375 + },
  376 + {
  377 + xtype: 'chart',
  378 + region: 'center',
  379 + store: store,
  380 + id: 'visu-chart',
  381 + animate: false,
  382 + mask: false,
  383 + shadow: false,
  384 + theme:'Blue',
  385 + background: { fill : "#fff" }
  386 + }
  387 + ]
  388 + }
  389 + ],
  390 + fbar:[
  391 + {
  392 + type: 'button',
  393 + text: 'Plot',
  394 + scope : this,
  395 + handler: this.plotChart
  396 + },
  397 + {
  398 + type: 'button',
  399 + text: 'Reset',
  400 + scope : this,
  401 + handler: this.reset
  402 + },
  403 + {
  404 + type: 'button',
  405 + text: 'Save Chart',
  406 + scope : this,
  407 + handler: this.saveChart
  408 + }
  409 + ]
  410 + });
  411 +
  412 + var myConf = {
576 413 layout: 'border',
577 414 items: [
578   - formPanel,
  415 + this.formPanel,
579 416 {
580 417 xtype: 'panel',
581 418 region: 'south',
... ... @@ -594,6 +431,8 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
594 431 ]
595 432 };
596 433  
  434 + this.initChartTypes();
  435 +
597 436 Ext.apply (this, Ext.apply(arguments, myConf));
598 437 }
599 438 });
... ...