1

正如主题所指定的，我有一个带有 ComboBox 的 GridPanel 作为列之一的单元格。默认情况下，包含 ComboBox 的每个单元格都将所选项目作为当前行号，用户可以更改 ComboBox 中的项目。

问题：我将用一个[B] 我打算成为行为[/B] 的例子来解释这个问题。考虑用户将 ComboBox 值从 2（出现在第 2 行）更改为 6 的场景，第 6 行中出现的 ComboBox 的值应该从 6 更改为 2。即这些值必须交换，以便每一行将没有任何重复的条目作为组合框中的选定项。

建议的解决方案：我尝试了几件事，但我被困在了我在下面解释的一点上。我有两个商店 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>
4

1 回答 1

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;
    }
于 2013-04-25T06:33:44.673 回答