1. #1
    Sencha User
    Join Date
    Apr 2012
    Location
    Billerica, MA
    Posts
    60
    Vote Rating
    9
    jattardi will become famous soon enough

      0  

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

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


    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:

    Code:
      [
        { "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:

    Code:
    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!

  2. This may be a bit easier to read but it would probably produce the same effect. I didn't test out your code, though.
    Code:
    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);
      }
    });

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    This may be a bit easier to read but it would probably produce the same effect. I didn't test out your code, though.
    Code:
    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);
      }
    });

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Location
    Billerica, MA
    Posts
    60
    Vote Rating
    9
    jattardi will become famous soon enough

      0  

    Default


    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.

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    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:
    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'}
        ]
    },
    Code:
    //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.');
        }
    });
    Last edited by jerome76; 18 Jul 2012 at 10:44 AM. Reason: Added example

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Billerica, MA
    Posts
    60
    Vote Rating
    9
    jattardi will become famous soon enough

      0  

    Default


    Awesome!

    Thanks very much. I appreciate the help.

Thread Participants: 1

Tags for this Thread