Mar 19, 2016, 8:36 PM
[CLOSED] ItemSelector questions
I am using the ItemSelector control for the first time in 4 years and have some questions.
When the user types a new tag in the textfield and presses the add button I need to:
Finally when the user presses the save button I need to:
- How to set the ButtonsText for the ItemSelector?
- Can the Items list and SelectedItems list be swapped? SelectedItems on the left and Items on the right.
- Can I add my own navigation button? I would like to add a clear.
- Can the SelectedItems list be resorted after adding items from the Items list?
- Can the Items list be resorted after removing items from the SelectedItems list?
When the user types a new tag in the textfield and presses the add button I need to:
- Add the new tag to the store;
- Update the ItemSelector Items list with the updated store;
- Add the entered tag to SelectedItems list and update
Finally when the user presses the save button I need to:
- Gather the SelectedItems list and call a direct method.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sandbox.Code.ItemSelector.Default" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
// A list of available tags will be pulled from the database.
List<object> availableTags = new List<object>();
availableTags.Add(new { Tag = "DEF" });
availableTags.Add(new { Tag = "GHI" });
availableTags.Add(new { Tag = "JKL" });
availableTags.Add(new { Tag = "MNO" });
availableTags.Add(new { Tag = "PQR" });
availableTags.Add(new { Tag = "STU" });
availableTags.Add(new { Tag = "VWX" });
availableTags.Add(new { Tag = "YZ" });
availableTags.Add(new { Tag = "ABC" });
eamEtgAvailableTagsStore.DataSource = availableTags;
eamEtgAvailableTagsStore.DataBind();
// A list of associated tags will be pulled from the database.
eamEtgTags.SelectedItems.Clear();
eamEtgTags.SelectedItems.Add(new Ext.Net.ListItem() { Value = "DEF" });
eamEtgTags.UpdateSelectedItems();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>ItemSelector Question</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Window ID="TagsDialog" runat="server" ClientIDMode="Static" Title="Edit: Tags" Icon="TagBlueEdit" Width="500" Layout="FitLayout"
Resizable="false" Modal="true" Border="false" DefaultFocus="eamEtgNewTag">
<HtmlBin>
<script type="text/javascript">
Routines = {
addNewTag: function () {
// How to add the new tag:
// 1) To the store
// 2) Update the ItemSelector items with the updated store
// 3) Add it to SelectedItems and update
App.eamEtgNewTag.reset();
ctrl.disable();
},
saveTags: function () {
// Need to gather the selectedItems add call a direct method.
Ext.Msg.alert("Save", "Saving the tags");
Routines.close();
},
close: function () {
App.TagsDialog.close();
}
}
</script>
</HtmlBin>
<Items>
<ext:FormPanel runat="server" BodyPadding="5">
<Items>
<ext:ItemSelector ID="eamEtgTags" runat="server" ClientIDMode="Static" FromTitle="Available Tags"
ToTitle="Associated Tags" Buttons="add,remove" DisplayField="Tag" ValueField="Tag" Height="120">
<Store>
<ext:Store ID="eamEtgAvailableTagsStore" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Tag" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Tag" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
</ext:ItemSelector>
<ext:FieldContainer runat="server" Layout="HBoxLayout" AnchorHorizontal="100%">
<Items>
<ext:Container runat="server" Flex="1" />
<ext:TextField ID="eamEtgNewTag" runat="server" ClientIDMode="Static" MaxLength="63"
EnforceMaxLength="true" Width="170">
<Listeners>
<Change Handler="App.eamEtgddBtn.setDisabled(!this.isDirty());" />
</Listeners>
</ext:TextField>
<ext:Button ID="eamEtgddBtn" runat="server" ClientIDMode="Static" Text="Add" Icon="Add"
MarginSpec="0 0 0 5" Disabled="true">
<Listeners>
<Click Fn="Routines.addNewTag" />
</Listeners>
</ext:Button>
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Save" Icon="BookGo" OnClientClick="Routines.saveTags" />
<ext:Button runat="server" Text="Cancel" Icon="BulletCross" OnClientClick="Routines.close" />
</Buttons>
</ext:Window>
</form>
</body>
</html>
Last edited by fabricio.murta; Mar 31, 2016 at 1:02 PM.
Reason: no user feedback for 7+ days
