[CLOSED] Moving between 2 stores

  1. #1

    [CLOSED] Moving between 2 stores



    I have the following page and on it I have a store for the combo and a store for the grid. On the button click I want to remove the selected record from the combos store and add it to the grids store.

    I have seen this done with 2 grids but I seem to be unable to get it to work with a combo, can you help please?



    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <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>
    
    
    <ext:Panel ID="Panel43" Border="true" runat="server" Height="500">
      <Body>
        <ext:ComboBox ID="cboLanguages" runat="server" 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">
        </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>
          
          <Buttons>
          </Buttons>
        </ext:GridPanel>
      </Body>
    </ext:Panel>
  2. #2

    RE: [CLOSED] Moving between 2 stores



    Ok, I've partially engaged my brain this morning and come up with the bit to remove the row from the combo store and put it in the grid store giving me the following page.

    My only problem now is how do I know which record in the grid store is chosen when the delete command is clicked and then remove this row from the grid store and add it back into the combo store?



    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <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) {
          grid.store.add(combo.store.getAt(combo.getSelectedIndex()))
          combo.store.remove(combo.store.getAt(combo.getSelectedIndex()));            
          if (combo.store.getCount() > 0) {                
            combo.setValue(combo.store.getAt(0).get(combo.valueField));            
          }
        }
    
    
        function removeFromGrid(grid, combo) {
         //No idea how to code this one
          }
        }
        
        </script>
    
    
    <ext:Panel ID="Panel43" Border="true" runat="server" Height="500">
      <Body>
        <ext:ComboBox ID="cboLanguages" runat="server" 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>
           <Click Handler="removeFromGrid(#{grdLanguages}, #{cboLanguages});" />
          </Listeners>
                
        </ext:GridPanel>
      </Body>
    </ext:Panel>
  3. #3

    RE: [CLOSED] Moving between 2 stores

    Hi,

    1. You need handle Command listener instead Click. So, add the following listener for grid
    <Command Handler="if(command === 'Delete'){removeFromGrid(#{grdLanguages}, #{cboLanguages}, record);}" />
    2. Try the following
    function removeFromGrid(grid, combo, record) {
                combo.store.add(record);
                grid.store.remove(record);
            }
  4. #4

    RE: [CLOSED] Moving between 2 stores

    Perfect, thanks.

    Only issue now is the store is not sorted alphabetically when an item is put back into the combo store, it just tags the item onto the end. Is there a way to re-sort it?
  5. #5

    RE: [CLOSED] Moving between 2 stores

    Hi,

    There are two options:

    1. Use 'addSorted' instead 'add' (you should have predefined sort - Sort property of store)
    addSorted( Ext.data.Record record ) : void
    (Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information.

    2. Call 'sort' function of store after 'add'
    sort( String fieldName, [String dir] ) : void
    Sort the Records. If remote sorting is used, the sort is performed on the server, and the cache is reloaded. If local sorting is used, the cache is sorted internally.
    Parameters:
    fieldName : String
    The name of the field to sort by.
    dir : String
    (optional) The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
    Returns:
    void
  6. #6

    RE: [CLOSED] Moving between 2 stores

    Solved, Thanks :)

Similar Threads

  1. Combobox with two stores
    By SMS in forum 1.x Help
    Replies: 3
    Last Post: Jul 12, 2011, 11:45 AM
  2. Ext.net.Debug + Stores
    By peter.campbell in forum 1.x Help
    Replies: 2
    Last Post: Mar 29, 2011, 10:54 AM
  3. [CLOSED] Stores and ComboBoxes
    By state in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 05, 2009, 3:07 PM
  4. [CLOSED] ComboBox Stores
    By state in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 20, 2009, 2:43 PM
  5. [CLOSED] Committing several stores
    By pschojer in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 17, 2009, 8:32 AM

Posting Permissions