google closure tool combo box get model

StackOverflow https://stackoverflow.com/questions/17694100

Question

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

Was it helpful?

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 ]

OTHER TIPS

In the example code the event listener is attached to the ComboBox, can't find any method of getting the currently selected ComboBoxItem and that's were the model was attached to. So the question is: "How to get access to the ComboBoxItem when attaching change event on the Combobox?" I would expect index or selectedItemIndex or something like that.

goog.events.listen(cb, 'change', handleChangeEvent);
// inside event handler
e.target===this;//true
//second item was clicked:
this === cb;//true
cb.getItemAt(1).getValue();//prints the model object
                           // but ComboBox has no selectedItemIndex
                           // or something helpful to get the ComboBoxItem

It would be helpful if they could provide a working example in either the demo's or unit tests, more people would be able to use it. As it is now it's very hard to figure out this mostly undocumented library.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top