[CLOSED] Type Ahead in a Combo

[CMA]

In the following page when I select an item from the combo list with the mouse and call the "removeFromCombo" function is works correctly.

But if I use the type ahead and then use that selection (ie, type the first 2 letters and select that one) it then falls over on the "removeFromCombo" call at the line: grid.store.add(combo.store.getAt(idx))

It seems to be the getItemAt function somewhere doesnt return a valid item when using type ahead.

Have I missed setting a property on my combo?

<ext:Store ID="StoreLanguages" runat="server">
  <Reader>
    <ext:JsonReader ReaderID="AttributeID">
      <Fields>
        <ext:RecordField Name="AttributeID" />
        <ext:RecordField Name="Description" />
      </Fields>
    </ext:JsonReader>
  </Reader>
</ext:Store>


<ext:Store ID="LanguagesSpokenStore" runat="server">
  <Reader>
    <ext:JsonReader ReaderID="AttributeID">
      <Fields>
        <ext:RecordField Name="AttributeID" />
        <ext:RecordField Name="Description" />
      </Fields>
    </ext:JsonReader>
  </Reader>
</ext:Store>


<script type="text/javascript">


  function removeFromCombo(combo, grid) {
    
    var idx = combo.getSelectedIndex();
    
      if (idx !== -1) {
        grid.store.add(combo.store.getAt(idx))
        combo.store.remove(combo.store.getAt(idx));            
        if (combo.store.getCount() > 0) {                
          combo.setValue(combo.store.getAt(0).get(combo.valueField));            
        }
      }
    }


    function removeFromGrid(grid, combo, record) {
      combo.store.add(record);
      grid.store.remove(record);


    }  
    
    </script>


<ext:ComboBox AllowBlank="false" ID="cboLanguages" runat="server" TypeAhead="true"
  Mode="Local" ForceSelection="true" TriggerAction="All" Width="250" HideLabel="true"
  EmptyText="Select a Language to Add" StoreID="StoreLanguages" ValueField="AttributeID"
  DisplayField="Description" />
<ext:Button ID="btnInsertLanguage" runat="server" Text="Add Language" Icon="Add">
  <Listeners>
    <Click Handler="removeFromCombo(#{cboLanguages}, #{grdLanguages});" />
  </Listeners>
</ext:Button>
        
<ext:GridPanel ID="grdLanguages" runat="server" Title="" StoreID="LanguagesSpokenStore"
  StripeRows="true" EnableViewState="true" Width="395" Height="130" StyleSpec="paddingBottom:3px">
  <ColumnModel>
    <Columns>
      <ext:Column DataIndex="AttributeID" Header="AttributeID" Width="30" />
      <ext:Column DataIndex="Description" Header="Language Spoken" Width="280" />
      <ext:ImageCommandColumn Width="25" ColumnID="CommandView">
        <Commands>
          <ext:ImageCommand CommandName="Delete" Icon="BulletCross" Text="">
            <ToolTip Text="Remove this Language" />
          </ext:ImageCommand>
        </Commands>
      </ext:ImageCommandColumn>
    </Columns>
  </ColumnModel>
  <Listeners>
    <Command Handler="if(command === 'Delete'){removeFromGrid(#{grdLanguages}, #{cboLanguages}, record);}" />
  </Listeners>
  <Buttons>
  </Buttons>
</ext:GridPanel>

[Vladimir]

Hi,

Try to add the following line to the begin of removeFromCombo

combo.store.clearFilter();

[CMA]

Solved, Thanks :)