Search code examples
javascriptgoogle-closuregoogle-closure-librarygoogle-closure-templates

google closure tool combo box get model

How to get object from select combomenuitem...?i tried e.target.getMenu().getModel()

</html>
<head>
  <title>goog.ui.ComboBox</title>
   <script src="closure-library/closure/goog/base.js"></script>
  <script>

    goog.require('goog.events');
    goog.require('goog.ui.ComboBox');
     goog.require('goog.dispose');
    goog.require('goog.dom');
  var test;
  </script>

  <style>

  html, body {
    overflow:hidden;
    margin: 0;
    padding: 5px;
  }

  #c {
    margin-bottom: 10px;
    font-size: small;
  }

  /* Size the combobox so that it is sufficiently small to demonstrate the menu
     being positioned to left-align with the control. */
  .goog-combobox input {
    width: 100px;
  }

  fieldset {
    display: inline-block;
    margin: 10px;
    text-align: initial;
  }
  </style>
</head>
<body>

  <div id="c">cb.value = '<span id="v"></span>'</div>

  <fieldset style="float:left">
    <legend>LTR</legend>
    <div class="combo"></div>
  </fieldset>

    <script type="text/javascript">
  function createTestComboBox() {
    var cb = new goog.ui.ComboBox();

    cb.setUseDropdownArrow(true);
    cb.setDefaultText('Select a folder...');
    cb.addItem(new goog.ui.ComboBoxItem('Inbox',{"a":1}));
    cb.addItem(new goog.ui.ComboBoxItem('Bills & statements',{"b":2}));
    cb.addItem(new goog.ui.ComboBoxItem('Cal alumni',{"c":3}));
    cb.addItem(new goog.ui.ComboBoxItem('Calendar Stuff',{"d":4}));
    cb.addItem(new goog.ui.ComboBoxItem('Design',{"e":5}));
    cb.addItem(new goog.ui.ComboBoxItem('Music',{"f":6}));
    cb.addItem(new goog.ui.ComboBoxItem('Netflix',{"g":7}));
    cb.addItem(new goog.ui.ComboBoxItem('Personal',{"h":8}));
    cb.addItem(new goog.ui.ComboBoxItem('Photos',{"i":9}));
    cb.addItem(new goog.ui.ComboBoxItem('Programming languages',{"j":10}));
     return cb;
  }

  var controls = [];
  var containerEls = goog.dom.getElementsByClass(goog.getCssName('combo'));
  for (var i = 0; i < containerEls.length; i++) {
    var cb = createTestComboBox();
    cb.render(containerEls[i]);
    goog.events.listen(cb, 'change', handleChangeEvent);
    controls.push(cb);
  }

  function handleChangeEvent(e) {
    test=e;
    goog.dom.setTextContent(document.getElementById('v'), e.target.getValue());
  }

  window.onbeforeunload = function() {
    goog.disposeAll(controls);
  };

  </script>
</body>
</html>

enter image description here

Solution

  • You can use getModel which is defined in goog.ui.component and it should be available to ComboBoxitem thru Prototype Inheritance

    goog.Disposable >> goog.events.EventTarget >> goog.ui.Component >> goog.ui.Control >> goog.ui.MenuItem >> goog.ui.ComboBoxItem

    goog.ui.Component.prototype.getModel = function() {
  return this.model_;
};

    https://code.google.com/p/closure-library/source/browse/closure/goog/ui/component.js

    Documentation - http://docs.closure-library.googlecode.com/git/class_goog_ui_ComboBoxItem.html [ find GetModel ]