Aug 17, 2009, 9:37 AM
[CLOSED] Type Ahead in a Combo
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>