1
제목이 지정하면 ComboBox가있는 열이있는 셀로 GridPanel이 있습니다. 기본적으로 ComboBox가 포함 된 각 셀에는 선택한 항목이 현재 rownumber로 표시되며 사용자는 ComboBox의 항목을 변경할 수 있습니다.다른 셀 (Combobox)을 기반으로하는 GridPanel 셀 (ComboBox) 업데이트 중, 셀이 모두 동일한 열에 속해 있습니까?
문제 : [B] 내가 행동 [/ B]을하려는 예제로 문제를 설명하겠습니다. 사용자가 ComboBox 값을 2 (행 번호 2에 있음)에서 6으로 변경하고 행 6에있는 ComboBox 값을 6에서 2로 변경하는 시나리오를 생각해 봅니다. 각 행이 ComboBox에서 선택한 항목으로 중복 항목이 없습니다.
제안 된 해결책 : 나는 몇 가지 시도를했지만 아래에 설명 된 시점에 갇혀있었습니다. GridPanel 용 Store1과 ComboBox 용 Store2의 두 가지 점포가 있습니다. Listener 이벤트에서 -> BeforeSelect 이벤트 콤보 상자 1) 나는 선택한 값 (사용자가 수정 한 값) 2) GridPanel에 바운드 된 데이터를 반복합니다. 수정 될 수있는 편집 가능한 열) ---> [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>