[CLOSED] GridPanel SortChange event fires when Store is sorted on the server

  1. #1

    [CLOSED] GridPanel SortChange event fires when Store is sorted on the server

    Hi,

    I'd like to configure the SortChange event listener such that it only fires in response to the client side sort changing action. Right now, it's triggered when the GridPanel's store is sorted on the server. Is it possible to configure the way I need it?
    Last edited by Daniil; Apr 17, 2013 at 2:20 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    I don't think there is a way to configure it.

    Could you provide a test case?
  3. #3
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = this.Jobs;
            this.Store1.DataBind();
    
            var sortInfo = new Ext.Net.SortInfo { Field = "Name", Direction = Ext.Net.SortDirection.DESC };
            GridPanel1.GetStore().Sort(sortInfo.Field, sortInfo.Direction);
        }
        private List<Job> Jobs
        {
            get
            {
                List<Job> jobs = new List<Job>();
                for (int i = 1; i <= 50; i++)
                {
                    jobs.Add(new Job(
                                i,
                                "Task" + i.ToString(),
                                DateTime.Today.AddDays(i),
                                DateTime.Today.AddDays(i + i),
                                (i % 3 == 0)));
                }
                return jobs;
            }
        }
        public class Job
        {
            public Job(int id, string name, DateTime start, DateTime end, bool completed)
            {
                this.ID = id;
                this.Name = name;
                this.Start = start;
                this.End = end;
                this.Completed = completed;
            }
            public int ID { get; set; }
            public string Name { get; set; }
            public DateTime Start { get; set; }
            public DateTime End { get; set; }
            public bool Completed { get; set; }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Height="320" MinHeight="160"
                    Region="North" CollapseMode="Mini" Split="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server" AutoLoad="true" WarningOnDirty="false">
                            <Reader>
                                <ext:JsonReader IDProperty="ID">
                                    <Fields>
                                        <ext:RecordField Name="ID" />
                                        <ext:RecordField Name="Name" />
                                        <ext:RecordField Name="Start" Type="Date" />
                                        <ext:RecordField Name="End" Type="Date" />
                                        <ext:RecordField Name="Completed" Type="Boolean" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <LoadMask ShowMask="false" />
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column Header="ID" Width="40" DataIndex="ID" />
                            <ext:Column ColumnID="Name" Width="160" Header="Job Name" DataIndex="Name" />
                            <ext:DateColumn ColumnID="Start" Header="Start" Width="120" DataIndex="Start" Format="yyyy-MM-dd" />
                            <ext:DateColumn ColumnID="End" Header="End" Width="120" DataIndex="End" Format="yyyy-MM-dd" />
                            <ext:Column ColumnID="Completed" Header="Completed" Width="80" DataIndex="Completed">
                                <Renderer Handler="return (value) ? 'Yes':'No';" />
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" DisplayInfo="true"
                            DisplayMsg="Displaying Jobs {0} - {1} of {2}">
                        </ext:PagingToolbar>
                    </BottomBar>
                    <View>
                        <ext:GridView ID="GridView1" runat="server">
                        </ext:GridView>
                    </View>
                    <Listeners>
                        <ViewReady Handler="this.getStore().load();" />
                        <SortChange Handler="alert('sorted!')" />
                    </Listeners>
                    <Plugins>
                        <ext:GridFilters runat="server" ID="GridFilters1" Local="true">
                            <Filters>
                                <ext:DateFilter DataIndex="End">
                                    <DatePickerOptions runat="server" TodayText="Now" />
                                    <Listeners>
                                        <Deactivate Handler="this.menu.items.each(function (item) {
                                                                if(item instanceof Ext.menu.CheckItem)
                                                                    item.setChecked(false);
                                                             });" />
                                    </Listeners>
                                </ext:DateFilter>
                            </Filters>
                        </ext:GridFilters>
                    </Plugins>
                </ext:GridPanel>
                <ext:Panel ID="Panel1" runat="server" Region="Center" Border="false" Frame="true"
                    Layout="FitLayout" AutoScroll="false">
                    <Items>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  4. #4
    Thank you.

    I can suggest the following:

    1. Remove the SortChange listener.

    2. Set up the following ViewReady listener.
    <ViewReady Handler="var view = this.getView();
                        this.un('headerclick', view.onHeaderClick, view); 
                        this.on('headerclick', myOnHeaderClick, view); 
                        this.getStore().load();" />
    3. Here is the definition of the myOnHeaderClick function.
    var myOnHeaderClick = function(g, index) {
        if (this.headersDisabled || !this.cm.isSortable(index)) {
            return;
        }
        g.stopEditing(true);
        g.store.sort(this.cm.getDataIndex(index));
        alert("Sorting by header click");
    };
  5. #5
    Thanks Daniil! This approach seems to be working well. Please mark this thread as closed.

Similar Threads

  1. [CLOSED] GridPanel RowSelect event fires twice
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 17, 2012, 1:30 PM
  2. SortChange Direct Event doesn't fire at all
    By cicaglisa in forum 1.x Help
    Replies: 1
    Last Post: May 23, 2012, 5:31 PM
  3. Replies: 2
    Last Post: May 01, 2012, 4:57 PM
  4. Replies: 3
    Last Post: Jan 13, 2012, 1:07 PM
  5. Replies: 2
    Last Post: Sep 10, 2011, 8:01 AM

Tags for this Thread

Posting Permissions