1

件名が指定しているように、列の 1 つに ComboBox をセルとして持つ GridPanel があります。デフォルトでは、ComboBox を含む各セルには現在の行番号として選択された項目があり、ユーザーは ComboBox 内の項目を変更できます。

問題: [B] 私が意図する動作[/B] の例で問題を説明します。ユーザーが ComboBox の値を 2 (行番号 2 に存在) から 6 に変更するシナリオを考えてみましょう。行 6 に存在する ComboBox の値は 6 から 2 に変更する必要があります。つまり、各行がComboBox で選択されたアイテムとして重複するエントリがありません。

提案された解決策: 私はいくつかのことを試しましたが、以下で説明するポイントで行き詰まりました。GridPanel 用の Store1 と ComboBox 用の Store2 の 2 つのストアがあります。Listeners イベントで --> ComboBox の BeforeSelect イベント 1) 選択した値 (ユーザーが変更した値) を取得します 2) GridPanel にバインドされたデータを反復処理します (他の編集可能な列がいくつかあるため)変更されている可能性があります) --->[B] これは私が立ち往生している部分です[/B] 3) Store1 を更新し、データビューに反映される変更をコミットします。これが私の心にあるものです。

クライアント側でこれを行うことは可能ですか、それともサーバー側で行う必要がありますか? 私はクライアント側を好みます。gridpanel 、コンボボックスなどを紹介するサンプルページを開発しました。

私は過去 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 に答える