Is this horribly inefficient? (Question about using enum constants)

[jattardi]

Sorry for the confusing title, I wasn't sure how to summarize my question. I'm trying to find out if this implementation I've done is inefficient or otherwise nonsensical.

In a nutshell: This view shows the health of hardware components in a system. The health status is retrieved via a REST API call, and the results look like this:

  [
    { "slot":0, "name":"temperature_sensor", "status": 1 },
    { "slot":1, "name":"cooling_fans", "status": 1 },
    { "slot":2, "name":"power_supplies", "status": 3 }
  ]

As you can see, each has a symbolic name (e.g. "temperature_sensor") and a status code (e.g. 3). I want to map these to friendly display names, so that these will be displayed like so:

Temperature Sensor: OK
Cooling Fans: OK
Power Supplies: ERROR

The only way I could come up with to do this is have a few arrays as statics in my view class, and reference those from the itemTpl in my list:

Ext.define('MyApp.view.ServerHealthView', {
  extend: 'Ext.List',
  
  statics: {
     componentNames: {
         temperature_sensor: "Temperature Sensor",
         cooling_fans: "Cooling Fans",
         power_supplies: "Power Supplies"
     },

     statusNames: [
        "OK",
        "WARNING",
        "ERROR" 
     ]
  },

  config: {
      title: 'Health',
      itemTpl: '{[MyApp.view.ServerHealthView.componentNames[values.name]} : {[MyApp.view.ServerHealthView.statusNames[values.status]} '
  });

Is there an easier way to do this that I'm missing? I couldn't find any information about referencing the enum arrays without using the full class name (since 'this' refers to the template's scope).

Any input or help would be appreciated here. Thanks!

[jerome76]

This may be a bit easier to read but it would probably produce the same effect. I didn't test out your code, though.

Ext.define('MyApp.view.ServerHealthView', {
  extend: 'Ext.List',
  componentNames: {
    temperature_sensor: "Temperature Sensor",
    cooling_fans: "Cooling Fans",
    power_supplies: "Power Supplies"
  },
  statusNames: [
    "OK",
    "WARNING",
    "ERROR" 
  ],
  config: {
    title: 'Health',
    //itemTpl: '{[MyApp.view.ServerHealthView.componentNames[values.name]} : {[MyApp.view.ServerHealthView.statusNames[values.status]} '
  },
  initialize: function(){
    var me = this;
    //may be setTpl if setItemTpl doesn't work
    me.setItemTpl({[me.componentNames[values.name]]}: {[me.statusNames[values.status]]});
    me.callParent(arguments);
  }
});

[jattardi]

That looks a little clearer, thanks!

In general, though, does my approach make sense? Does it make sense to have static arrays? My background is mainly Java where I'd have an enum defined in some class to represent this stuff.

[jerome76]

Yeah I understand. Your approach does make sense and I would probably use it too if I didn't discover the way I posted.

A prime example of using statics can be found in Ext.MessageBox's source code:

statics: {
    OK    : {text: 'OK',     itemId: 'ok',  ui: 'action'},
    YES   : {text: 'Yes',    itemId: 'yes', ui: 'action'},
    NO    : {text: 'No',     itemId: 'no'},
    CANCEL: {text: 'Cancel', itemId: 'cancel'},


    INFO    : Ext.baseCSSPrefix + 'msgbox-info',
    WARNING : Ext.baseCSSPrefix + 'msgbox-warning',
    QUESTION: Ext.baseCSSPrefix + 'msgbox-question',
    ERROR   : Ext.baseCSSPrefix + 'msgbox-error',


    OKCANCEL: [
        {text: 'Cancel', itemId: 'cancel'},
        {text: 'OK',     itemId: 'ok',  ui : 'action'}
    ],
    YESNOCANCEL: [
        {text: 'Cancel', itemId: 'cancel'},
        {text: 'No',     itemId: 'no'},
        {text: 'Yes',    itemId: 'yes', ui: 'action'}
    ],
    YESNO: [
        {text: 'No',  itemId: 'no'},
        {text: 'Yes', itemId: 'yes', ui: 'action'}
    ]
},

//example taken from source
Ext.Msg.show({
    title: 'Address',
    message: 'Please enter your address:',
    width: 300,
    buttons: Ext.MessageBox.OKCANCEL,
    multiLine: true,
    prompt : { maxlength : 180, autocapitalize : true },
    fn: function(buttonId) {
		console.log('You pressed the "' + buttonId + '" button.');
    }
});

[jattardi]

Awesome!

Thanks very much. I appreciate the help.