title: ExtJS 4 ComboBox multiSelect display number of selected values
body: <p>I am writing a POC and my client wishes to display the number of selected values underneath a multi-select combo box.</p>
  
  <p>I can get the number of values from the select event listener but wanted to encapsulate the functionality in the component itself rather than have <em>DIV</em> where i perform a DOM update.</p>
  
  <p>The code for the multi-select combo box is as follows:</p>
  
  <pre><code>Ext.onReady(function () {
      // The data store containing the list of states
      var states = Ext.create('Ext.data.Store', {
          fields: ['abbr', 'name'],
          data: [{
              name: 'ALABAMA',
              abbreviation: 'AL'
          }, {
              name: 'ALASKA',
              abbreviation: 'AK'
          }, {
              name: 'AMERICAN SAMOA',
              abbreviation: 'AS'
          }, {
              name: 'ARIZONA',
              abbreviation: 'AZ'
          }, {
              name: 'ARKANSAS',
              abbreviation: 'AR'
          }, {
              name: 'CALIFORNIA',
              abbreviation: 'CA'
          }, {
              name: 'COLORADO',
              abbreviation: 'CO'
          }, {
              name: 'CONNECTICUT',
              abbreviation: 'CT'
          }, {
              name: 'DELAWARE',
              abbreviation: 'DE'
          }, {
              name: 'DISTRICT OF COLUMBIA',
              abbreviation: 'DC'
          }, {
              name: 'FEDERATED STATES OF MICRONESIA',
              abbreviation: 'FM'
          }, {
              name: 'FLORIDA',
              abbreviation: 'FL'
          }, {
              name: 'GEORGIA',
              abbreviation: 'GA'
          }, {
              name: 'GUAM',
              abbreviation: 'GU'
          }, {
              name: 'HAWAII',
              abbreviation: 'HI'
          }, {
              name: 'IDAHO',
              abbreviation: 'ID'
          }, {
              name: 'ILLINOIS',
              abbreviation: 'IL'
          }, {
              name: 'INDIANA',
              abbreviation: 'IN'
          }, {
              name: 'IOWA',
              abbreviation: 'IA'
          }, {
              name: 'KANSAS',
              abbreviation: 'KS'
          }, {
              name: 'KENTUCKY',
              abbreviation: 'KY'
          }, {
              name: 'LOUISIANA',
              abbreviation: 'LA'
          }, {
              name: 'MAINE',
              abbreviation: 'ME'
          }, {
              name: 'MARSHALL ISLANDS',
              abbreviation: 'MH'
          }, {
              name: 'MARYLAND',
              abbreviation: 'MD'
          }, {
              name: 'MASSACHUSETTS',
              abbreviation: 'MA'
          }, {
              name: 'MICHIGAN',
              abbreviation: 'MI'
          }, {
              name: 'MINNESOTA',
              abbreviation: 'MN'
          }, {
              name: 'MISSISSIPPI',
              abbreviation: 'MS'
          }, {
              name: 'MISSOURI',
              abbreviation: 'MO'
          }, {
              name: 'MONTANA',
              abbreviation: 'MT'
          }, {
              name: 'NEBRASKA',
              abbreviation: 'NE'
          }, {
              name: 'NEVADA',
              abbreviation: 'NV'
          }, {
              name: 'NEW HAMPSHIRE',
              abbreviation: 'NH'
          }, {
              name: 'NEW JERSEY',
              abbreviation: 'NJ'
          }, {
              name: 'NEW MEXICO',
              abbreviation: 'NM'
          }, {
              name: 'NEW YORK',
              abbreviation: 'NY'
          }, {
              name: 'NORTH CAROLINA',
              abbreviation: 'NC'
          }, {
              name: 'NORTH DAKOTA',
              abbreviation: 'ND'
          }, {
              name: 'NORTHERN MARIANA ISLANDS',
              abbreviation: 'MP'
          }, {
              name: 'OHIO',
              abbreviation: 'OH'
          }, {
              name: 'OKLAHOMA',
              abbreviation: 'OK'
          }, {
              name: 'OREGON',
              abbreviation: 'OR'
          }, {
              name: 'PALAU',
              abbreviation: 'PW'
          }, {
              name: 'PENNSYLVANIA',
              abbreviation: 'PA'
          }, {
              name: 'PUERTO RICO',
              abbreviation: 'PR'
          }, {
              name: 'RHODE ISLAND',
              abbreviation: 'RI'
          }, {
              name: 'SOUTH CAROLINA',
              abbreviation: 'SC'
          }, {
              name: 'SOUTH DAKOTA',
              abbreviation: 'SD'
          }, {
              name: 'TENNESSEE',
              abbreviation: 'TN'
          }, {
              name: 'TEXAS',
              abbreviation: 'TX'
          }, {
              name: 'UTAH',
              abbreviation: 'UT'
          }, {
              name: 'VERMONT',
              abbreviation: 'VT'
          }, {
              name: 'VIRGIN ISLANDS',
              abbreviation: 'VI'
          }, {
              name: 'VIRGINIA',
              abbreviation: 'VA'
          }, {
              name: 'WASHINGTON',
              abbreviation: 'WA'
          }, {
              name: 'WEST VIRGINIA',
              abbreviation: 'WV'
          }, {
              name: 'WISCONSIN',
              abbreviation: 'WI'
          }, {
              name: 'WYOMING',
              abbreviation: 'WY'
          }]
      });
  
      // Create the combo box, attached to the states data store
      Ext.create('Ext.form.ComboBox', {
          labelAlign: 'top',
          labelPad: 10,
          fieldLabel: 'Choose State',
          store: states,
          queryMode: 'local',
          editable: false,
          displayField: 'name',
          valueField: 'abbreviation',
          renderTo: Ext.getBody(),
          multiSelect: true,
          width: 400,
          displayTpl: '&lt;tpl for="."&gt;' +
              '{name}' +
              '&lt;tpl if="xindex &lt; xcount"&gt;, &lt;/tpl&gt;' +
              '&lt;/tpl&gt;',
          listConfig: {
              itemTpl: '{name} &lt;div class="chkbox"&gt;&lt;/div&gt;'
          },
          listeners: {
              select: function (combo, records) {
                  console.log(records.length);   
              }
          }
      });
  
  });
  </code></pre>
  
  <p>Is there any easy way to achieve this?</p>