[CLOSED] ItemSelector Control with ComboBox selection

[vmehta]

Hello,

I am using a combobox control & ItemSelector control in my application.
On combobox selection change, the selected items on the right side container of item selector should be loaded.

Say I have combobox values as Combo1, combo2, combo3 and Available items in itemselector be as item1, iteam2, item3, item4, item5.

Step 1: Selecting combo1 in combobox and item1,item2 in item selector and move it to right side box of the itemselector.
Step 2: Changing the combo box selection to combo2 and items as item3,item4,item5 and move it to right side box.
Step 3: Now, selecting combo1 again should display/load item1, item2 (selections made previously).Similarly on every combo item change, the respective selection should be displayed on the right side box.

Please let me know how this can be achieved.

[Daniil]

Hi @vmehta,

To catch selecting a ComboBox's item you can listen to its Select event.
http://docs.sencha.com/extjs/4.2.1/#...x-event-select

As for moving items from right to left and otherwise, I can suggest you to investigate the ItemSelector's sources.
http://svn.ext.net/premium/trunk/Ext...elect-debug.js

For example, search for "onAddBtnCLick". This function is being called when a user click the "Add to Selected" button.

[vmehta]

Thanks for thr response but i am unable to access the provided link "http://svn.ext.net/premium/trunk/Ext...elect-debug.js".
Can you please provide the content over here.

[geoffrey.mcgill]

You Svn credentials have been resent. You should have now.

[vmehta]

Thank You !!

I need to access/Bind the ToTitle part in Itemselector control(the place where the selected items are been displayed) based on the change in selection of combobox.
Is there any way I can bind only the ToTitle part of the Itemselector Control??

Any help is appreciated.


Thanks In advance.

[Daniil]

Is there any way I can bind only the ToTitle part of the Itemselector Control??

If I correctly understand the requirement, you can change it on the fly in JavaScript:

App.ItemSelector1.toField.child("panel").setTitle("New Title")

[vmehta]

If I correctly understand the requirement, you can change it on the fly in JavaScript:

App.ItemSelector1.toField.child("panel").setTitle("New Title")

The ItemselectorSnapshot1 displays the "SelectID" combobox where the text is "SCR01" and the selected values in itemselector are "Three","Four","Six", on Save button click it gets saved to database. Similarly ItemselectorSnapshot2 & ItemselectorSnapshot3 displays selections for the combobox SelectID "scr02" & "scr03" on click of save button,combobox selection id and the selectedReports ids would get saved in the db.

My requirement is whenever there is a change in combobox selection say "scr01" is changed to "scr03" the relative reports of "scr03" should be displayed in the selected reports of itemselector. The concern is how it can be set for the selectedreports only as it is a part of itemselector control and not a separate list box.

Thank You !

[Daniil]

The concern is how it can be set for the selectedreports only as it is a part of itemselector control and not a separate list box.

Sorry, I don't understand what you need. Please elaborate on that. Probably, the best is providing us with a sample to demonstrate the problem.

[vmehta]

Sorry, I don't understand what you need. Please elaborate on that. Probably, the best is providing us with a sample to demonstrate the problem.

Hi,

Please look at the sample below :

Step 1: Selecting scr1 in combobox and items "Zero"&"One" in item selector and move it to right side box of the itemselector. Click save
Step 2: Changing the combo box selection to scr2 and items as two,three,four and move it to right side box. Save.
Step 3: Now, selecting scr1 again should display/load zero,One (selections made previously).
Similarly On every combo item change, the respective selection should be displayed on the right side box(selected reports).

Please let me know how this can be achieved.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
    protected void ShowValue(object sender, DirectEventArgs e)
    {
        StringBuilder sb = new StringBuilder(256);

        foreach (Ext.Net.ListItem item in ItemSelector1.SelectedItems)
        {
            sb.AppendFormat("Value={0}, Index={1}, Text={2} <br/>", item.Value, item.Index, item.Text);
        }

        X.Msg.Alert("Selection", sb.ToString()).Show();
    }    
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Overview of MultiSelect - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
    
    <style>
        .label {
            font    : bold 11px tahoma,arial,sans-serif;
            width   : 300px;
            height  : 25px;
            padding : 5px 0;
            border  : 1px dotted #99bbe8;
            color   : #15428b;
            cursor  : default;
            margin  : 10px;
            background  : #dfe8f6;
            text-align  : center;
            margin-left : 0px;
        }
    </style>
</head>
<body>

<ext:ComboBox ID="cb1" runat="server" FieldLabel="Select ID" >
<Items>
<ext:ListItem Text="scr1" Value="1"></ext:ListItem>
<ext:ListItem Text="scr2" Value="2"></ext:ListItem>
<ext:ListItem Text="scr3" Value="3"></ext:ListItem>
</Items>
</ext:ComboBox>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <%--<ext:ResourceManager ID="ResourceManager2" runat="server" />
        --%>
        <ext:FormPanel ID="FormPanel1" 
            runat="server"
            Title="ItemSelector Test"
            Width="700"
            BodyPadding="10"
            Height="300"
            Layout="FitLayout">
            <Items>
                <ext:ItemSelector 
                    ID="ItemSelector1" 
                    runat="server"
                    FieldLabel="ItemSelector"
                    AllowBlank="false"
                    MsgTarget="Side"
                   FromTitle="List of Reports" ToTitle="Selected Reports">
                    
                    <Items>
                        <ext:ListItem Text="Zero" Value="0" />
                        <ext:ListItem Text="One" Value="1" />
                        <ext:ListItem Text="Two" Value="2" />
                        <ext:ListItem Text="Three" Value="3" />
                        <ext:ListItem Text="Four" Value="4" />
                        <ext:ListItem Text="Five" Value="5" />
                        <ext:ListItem Text="Six" Value="6" />
                        <ext:ListItem Text="Seven" Value="7" />
                        <ext:ListItem Text="Eight" Value="8" />
                        <ext:ListItem Text="Nine" Value="9" />
                    </Items>
                    <SelectedItems>
                        <ext:ListItem Value="3" />
                        <ext:ListItem Value="4" />
                        <ext:ListItem Value="6" />
                    </SelectedItems>
                    <%--<Listeners>
                    <Change Handler="alert('Change');" />
                    </Listeners>--%>
                </ext:ItemSelector>
            </Items>
            <DockedItems>
               
                <ext:Toolbar ID="Toolbar2" runat="server" Dock="Bottom">
                    <Defaults>
                        <ext:Parameter Name="minWidth" Value="75" />
                    </Defaults>
                    <Items>
                        <ext:ToolbarFill />
                        <ext:Button ID="Button2" runat="server" Text="Clear" Handler="if (!App.ItemSelector1.disabled) { App.ItemSelector1.clearValue(); }" />
                        <ext:Button ID="Button3" runat="server" Text="Reset" Handler="App.ItemSelector1.reset();" />
                        <ext:Button ID="Button4" runat="server" Text="Save" OnDirectClick="ShowValue" />
                    </Items>
                </ext:Toolbar>
            </DockedItems>
        </ext:FormPanel>

          </form>
</body>
</html>

[Daniil]

Ok, let's consider "Step 1".

Step 1: Selecting scr1 in combobox and items "Zero"&"One" in item selector and move it to right side box of the itemselector.

The first step is to listen to the ComboBox's Select event, as I suggested here:

To catch selecting a ComboBox's item you can listen to its Select event.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-event-select

Going further, you should move items from left to right. Could you, please, clarify there is any result on that:

As for moving items from right to left and otherwise, I can suggest you to investigate the ItemSelector's sources.
http://svn.ext.net/premium/trunk/Ext...elect-debug.js

For example, search for "onAddBtnCLick". This function is being called when a user click the "Add to Selected" button.