Donnerstag, 18. November 2010

Update on last Post: Focus row in grouped Ext.Net GridPanel ...

This Blog moved to http://webapps-in-action.com/

Update
Thanks to Vladimir from Ext.Net Team, it's working now.

http://forums.ext.net/showthread.php?11018-SOLVED-Problem-with-focusRow()-on-Store.reload()-with-Firefox

Here the working code:

Screenshot


I used to love Telerik RAD Controls or jQuery UI. But, Ext.Net beats them now by far if you want to have a proper Rich Application Look & Feel.

I hope everyone notice the browser<>server round trips >> try to do this without Ext.Net or with jQuery (of course in ASP.NET/C# context) without a lots of own helpers in 179 lines ;-)

ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Tests._Default" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <ext:XScript runat="server">
        <script type="text/javascript">
            var submitMaterial = function ()
            {
                // ADD NEW RECORD
                Test.AfterEdit("ThisIsNew",{
                    success: function(id)
                    {   
                        // SUCCESS?
                        if(id.ErrorCode == 0)
                        {
                            // PUT PKEY INTO HIDDEN FIELD (UGLY, BUT PAGE PROXY IS LAST ASYNC)
                            #{hiddenPK}.setValue(id.PrimaryKey);                                        
                            
                            // GET THE GRID
                            var grid = #{GridPanel1};                   
                            
                            // DO FOCUS NEW ROW
                            grid.getStore().on("load", function() {    
                                if(#{hiddenPK}.getValue() != '')
                                {            
                                    var index = grid.getStore().indexOfId(#{hiddenPK}.getValue());                                
                                    grid.getSelectionModel().selectRow(index);                                           
                                    // EXCEPTION FOR THE GECKO
                                    if (Ext.isGecko && grid.getView().scrollToTopTask) {                                        
                                        grid.getView().scrollToTopTask.cancel();
                                    }                                          
                                    grid.getView().focusRow(index); 
                                }  
                            }, this, {single:true});      

                            // RELOAD THE STORE                       
                            grid.getStore().reload();                                                        
                        }                                     
                    }                    
                });
            }
        </script>
    </ext:XScript>
</head>
<body>
    <form id="form1" runat="server" onsubmit="return false">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Hidden ID="hiddenPK" runat="server">
    </ext:Hidden>
    <ext:Store runat="server" ID="Store1" RemoteSort="true" OnRefreshData="Store_RefreshData">
        <Reader>
            <ext:JsonReader IDProperty="ID">
                <Fields>
                    <ext:RecordField Name="ID" />
                    <ext:RecordField Name="NAME" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <AutoLoadParams>
            <ext:Parameter Name="start" Value="0" Mode="Raw" />
            <ext:Parameter Name="limit" Value="2000" Mode="Raw" />
        </AutoLoadParams>
        <Proxy>
            <ext:PageProxy>
            </ext:PageProxy>
        </Proxy>
    </ext:Store>
    <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
        Header="false" Height="600px" Border="false" Layout="Fit">
        <LoadMask ShowMask="true" />
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="ID" Header="ID" Sortable="true" DataIndex="ID" Align="Right"
                    Width="90px">
                </ext:Column>
                <ext:Column ColumnID="NAME" Header="NAME" Sortable="true" DataIndex="NAME" Align="Right"
                    Width="90px">
                </ext:Column>
            </Columns>
        </ColumnModel>
        <Plugins>
            <ext:GridFilters runat="server" ID="GridFilters1" Local="true">
                <Filters>
                    <ext:StringFilter DataIndex="ID" />
                    <ext:StringFilter DataIndex="NAME" />
                </Filters>
            </ext:GridFilters>
        </Plugins>
        <BottomBar>
            <ext:PagingToolbar Height="1px" ID="PagingToolBar2" runat="server" StoreID="Store1"
                PageSize="5000" DisplayInfo="true" HideRefresh="true" DisplayMsg="">
            </ext:PagingToolbar>
        </BottomBar>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
            </ext:RowSelectionModel>
        </SelectionModel>
        <KeyMap>
            <ext:KeyBinding>
                <Keys>
                    <ext:Key Code="DELETE" />
                </Keys>
            </ext:KeyBinding>
        </KeyMap>
    </ext:GridPanel>
    <ext:Button runat="server" ID="btnSubmit" Text="Button">
        <Listeners>
            <Click Handler="submitMaterial();" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

namespace Tests
{
    // CALL BACK CONTROL OBJECT
    public class ResultObject
    {
        public int ErrorCode { get; set; }
        public string PrimaryKey { get; set; }
    }

    // DATA OBJECT
    public class TheObjects
    {
        public string ID { get; set; }
        public string NAME { get; set; }
    }

    // THE PAGE
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                // INIT DATA
                List<TheObjects> oList = new List<TheObjects>();
                for (int i = 0; i <= 150; i++)
                {
                    oList.Add(new TheObjects { ID = "ID" + i, NAME = "Name " + i });
                }
                Session["objs"] = oList;
            }
        }

        // BIND DATA WITH PROXY
        protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            Store1.DataSource = Session["objs"];
            Store1.DataBind();
        }

        // ADD NEW RECORD
        [DirectMethod(Namespace = "Test")]
        public ResultObject AfterEdit(string newName)
        {
            ResultObject rObject = new ResultObject { ErrorCode = 0, PrimaryKey = "" };
            List<TheObjects> oList = (List<TheObjects>)Session["objs"];
            oList.Add(new TheObjects { ID = "ID151", NAME = newName });
            Session["objs"] = oList;
            rObject.PrimaryKey = "ID151";
            return rObject;
        }
    }
}

ORIGINAL POST

With the last Example I ran into Problems with Firefox. In IE8 and Chrome, ExtJS behaves correct. In Firefox 3.6.12, when the Grid is large with scrollbars, the row is selected, but then Firefox scrolls back to the top.

I'm still investigating it. I'll post a new sample when its working. For now
you can check out this Forum Thread where I posted a VS2010 Solution to reproduce it:
Ext.Net Forum: Problem with Store reload() or Databind()

Keine Kommentare:

Kommentar veröffentlichen