基于另一个单元格（组合框）更新GridPanel单元格（组合框），两个单元格属于同一列？
Posted
技术标签:
【中文标题】基于另一个单元格（组合框）更新GridPanel单元格（组合框），两个单元格属于同一列？【英文标题】：Updating GridPanel Cell(ComboBox) based on another Cell(Combobox), Both the cell belongs to the same column? 【发布时间】：2013-04-24 10:01:58 【问题描述】：正如主题所指定的，我有一个带有 ComboBox 的 GridPanel 作为其中一列的单元格。 默认情况下，包含 ComboBox 的每个单元格都将所选项目作为当前行号，用户可以更改 ComboBox 中的项目。
问题：我将用一个 [B] 我打算成为行为 [/B] 的示例来解释问题。考虑用户将 ComboBox 值从 2（出现在第 2 行）更改为 6 的场景，第 6 行中出现的 ComboBox 的值应该从 6 更改为 2。也就是说，值必须交换，以便每一行将在 ComboBox 中没有任何重复条目作为选定项。
建议的解决方案：我尝试了几件事，但我被困在了我在下面解释的一点上。 我有两个商店 Store1 用于 GridPanel 和 Store2 用于 ComboBox。 在 Listeners 事件中 --> ComboBox 的 BeforeSelect 事件 1）我得到选择的值（用户修改的值） 2）遍历绑定到 GridPanel 的数据（因为还有一些其他可编辑的列可能已被修改）--->[B] 这是我被卡住的部分[/B] 3) 更新 Store1 并提交将反映在数据视图中的更改。 这就是我的想法。
是否可以在客户端执行此操作，或者我们必须在服务器端执行此操作？我更喜欢客户端。 我开发了一个示例页面，其中展示了 gridpanel 、 combobox 等。
我在过去 3 年中一直在 Telerik Controls 工作，而且我是 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>
【问题讨论】：
【参考方案1】：我能够解决这个问题。把上面代码中的这个方法 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;
【讨论】：
以上是关于基于另一个单元格（组合框）更新GridPanel单元格（组合框），两个单元格属于同一列？的主要内容，如果未能解决你的问题，请参考以下文章