正如主题指定的那样，我有一个GridPanel，其中ComboBox作为列之一的单元格。 默认情况下，包含ComboBox的每个单元格都将所选项目作为当前rownumber，用户可以更改ComboBox中的项目。
问题：我将用一个例子来解释这个问题[B]我打算成为行为[/ B]。考虑用户将ComboBox值从2（在第2行中出现）更改为6的情况，第6行中存在的ComboBox的值应从6更改为2.即值必须交换，以便每行都将没有任何重复的条目作为ComboBox中的选定项目。
建议的解决方案：我尝试了一些事情，但我陷入了下面我解释过的问题。 我有两个商店Store1用于GridPanel，Store2用于ComboBox。 在Listeners事件中 - ＆gt; BeforeSelect ComboBox事件 1）我得到选定的值（用户修改为的值） 2）迭代绑定到GridPanel的数据（因为还有一些其他可编辑的列可能已被修改）---＆gt; [B]这是我被卡住的部分[/ B] 3）更新Store1并提交将反映在数据视图中的更改。 这就是我的想法。
是否可以在客户端执行此操作，还是必须在服务器端执行此操作？我更喜欢客户端。 我开发了一个示例页面，展示了gridpanel，combobox等。
我是Telerik Controls过去3年的背景，我是Ext.net的新手（从过去3天开始在POC工作）
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Data.Linq" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
//if (!X.IsAjaxRequest)
//{
this.Store1.DataSource = new List<Company>
{
new Company(0, "3m Co", 71.72, "name1", 0.03, 1),
new Company(1, "Alcoa Inc", 29.01, "name2", 1.47,2),
new Company(2, "Altria Group Inc", 83.81, "name3", 0.34,3),
new Company(3, "American Express Company", 52.55, "name4", 0.02,4),
new Company(4, "American International Group, Inc.", 64.13, "name5", 0.49,5),
new Company(5, "AT&T Inc.", 31.61, "name6", -1.54,6),
new Company(6, "Boeing Co.", 75.43, "name7", 0.71,7),
new Company(7, "Caterpillar Inc.", 67.27, "name8", 1.39,8),
new Company(8, "Citigroup, Inc.", 49.37, "name9", 0.04,9),
new Company(9, "E.I. du Pont de Nemours and Company", 40.48, "name10", 1.28,10)
};
this.Store1.DataBind();
List<object> Items = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
Items.Add(new { Text = "C" + i, ItemValue = i });
}
Store2.DataSource = Items;
Store2.DataBind();
if (!this.IsPostBack)
{
//RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel;
//sm.SelectedRow = new SelectedRow(2);
//sm.SelectedRows.Add(new SelectedRow(2));
//sm.SelectedRows.Add(new SelectedRow("11"));
}
//}
}
protected void SubmitSelection(object sender, DirectEventArgs e)
{
string json = e.ExtraParams["Values"];
if (string.IsNullOrEmpty(json))
{
return;
}
//XML will be represent as
//<records>
// <record><Name>Alcoa Inc</Name><Price>29.01</Price><Change>0.42</Change><PctChange>1.47</PctChange></record>
// ...
// <record>...</record>
//</records>
XmlNode xml = JSON.DeserializeXmlNode("{records:{record:" + json + "}}");
foreach (XmlNode row in xml.SelectNodes("records/record"))
{
string enable = row.SelectSingleNode("Enable").InnerXml;
string name = row.SelectSingleNode("Name").InnerXml;
string price = row.SelectSingleNode("Price").InnerXml;
string change = row.SelectSingleNode("UpdatedBy").InnerXml;
string pctChange = row.SelectSingleNode("PctChange").InnerXml;
//handle values
}
List<Company> companies = JSON.Deserialize<List<Company>>(json);
foreach (Company company in companies)
{
string name = company.Name;
double price = company.Price;
string change = company.UpdatedBy;
double pctChange = company.PctChange;
//handle values
}
Dictionary<string, string>[] companies1 = JSON.Deserialize<Dictionary<string, string>[]>(json);
foreach (Dictionary<string, string> row in companies1)
{
string name = row["Name"];
string price = row["Price"];
string change = row["UpdatedBy"];
string pctChange = row["PctChange"];
//handle values
}
this.ResourceManager1.AddScript("Ext.Msg.alert('Submitted', 'Please see source code how to handle submitted data');");
}
public class Company
{
public Company(int id, string name, double price, string updatedBy, double pctChange, int displayOrder)
{
this.ID = id;
this.Name = name;
this.Price = price;
this.UpdatedBy = updatedBy;
this.PctChange = pctChange;
this.DisplayOrder = displayOrder;
}
public int ID { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public string UpdatedBy { get; set; }
public double PctChange { get; set; }
public int DisplayOrder { get; set; }
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo Grid For Admin Screen</title>
<link href="resources/css/examples.css" rel="stylesheet" />
<script>
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "black", value);
}
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
}
var duplicated = function (store, SelectedItem, index) {
var found = false;
//TODO: Iterate through the data which was bounded to the GridPanel
// Update the Store1 and commit the changes which will reflect in the dataview.
//if (index != undefined || index != null) {
// store.store.each(function (record) {
// if (found = (record.data.itemValue == SelectedItem.data.itemValue) ? true : false) {
// record.data.itemValue = store.value;
// record.data.text = store.rawValue;
// alert("Duplicate present");
// found = true;
// };
// }
//)
//}
return found;
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Decision Support Admin Screen</h1>
<p>This example shows how to maintance selection between paging</p>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="Enable" Type="Boolean" />
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Price" />
<ext:ModelField Name="UpdatedBy" />
<ext:ModelField Name="PctChange" />
<ext:ModelField Name="DisplayOrder" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="text" Type="String" ServerMapping="Text" />
<ext:ModelField Name="itemValue" Type="int" ServerMapping="ItemValue" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
Title="Decision Support Admin Screen"
Collapsible="false"
DisableSelection="false"
Width="600">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:CheckColumn runat="server" Text="Enable" Editable="true" Width="55" DataIndex="Enable"></ext:CheckColumn>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="Name" Flex="1" />
<ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="Price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Updated By" Width="75" DataIndex="UpdatedBy">
<Renderer Fn="change" />
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="PctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:ComponentColumn ID="ComponentColumn2"
runat="server"
Editor="true"
DataIndex="DisplayOrder"
Flex="1"
Text="Display Order Dynamic">
<Component>
<ext:ComboBox ID="ComboBox2" runat="server" StoreID="Store2" ValueField="itemValue" DisplayField="text">
<Listeners>
<BeforeSelect Fn="duplicated">
</BeforeSelect>
</Listeners>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true">
<Plugins>
<ext:GridDragDrop ID="GridDragDrop1" runat="server" DragText="Drag and drop to reorganize" />
</Plugins>
</ext:GridView>
</View>
</ext:GridPanel>
<table>
<tr>
<td>
<ext:Button ID="btnSave" runat="server" Text="Save">
<DirectEvents>
<Click OnEvent="SubmitSelection">
<ExtraParams>
<ext:Parameter
Name="Values"
Value="#{GridPanel1}.getRowsValues()"
Mode="Raw"
Encode="true" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</td>
<td>
<ext:Button ID="btnBack" runat="server" Text="Back" />
</td>
</tr>
</table>
</form>
</body>
</html>
答案 0 :(得分：0)
我能够解决这个问题。只需用上面的代码替换此方法var duplicated = function（store，SelectedItem，index）
var duplicated = function (store, SelectedItem, index) {
var found = false;
var GridPanelStore = Ext.getCmp('GridPanel1').getStore();
GridPanelStore.each(function (record) {
if (record.data.DisplayOrder == SelectedItem.data.itemValue) {
record.data.DisplayOrder = store.value;
//TODO: Do we have to display the user some Notification about the duplicate value?
found = true;
}
else if (record.data.DisplayOrder == store.value) {
record.data.DisplayOrder = SelectedItem.data.itemValue;
found = true;
}
}
)
GridPanelStore.commitChanges;
Ext.getCmp('GridPanel1').getView().refresh(false);
return found;
}