What's New?

[CLOSED] Question - GridPanel Render And IE9

Page 1 of 3 123 LastLast
  1. #1
    Mar 17, 2012, 4:55 PM

    [CLOSED] Question - GridPanel Render And IE9

    HI,
    when load a gridPanel with page of 500 record the IE9 is slow to show the record in the GridPanel, with V1.3 it's faster.
    V2.0 and other browsers such as Chrome o Firefox are faster than explorer.
    It 's my explorer with problem or 2.0 is slower than the 1.3 to view the records in the gridpanel ?

    It 's just a question to know if you also have the same problem.

    Thanks
    Aurelio
    Last edited by Daniil; May 01, 2012 at 2:13 PM. Reason: [CLOSED]
  2. #2
    Mar 19, 2012, 5:29 AM
    Hi,

    Actually, IE has a much slower JavaScript engine, so, it's a common issue when something runs slower in IE than in FireFox or Chrome.

    Regarding to v1.3 VS v2.0.

    The first releases of ExtJS 4 were very slow in IE. Lately, the things became much better. Though we and ExtJS team are still looking into this problem.

    Recently, we have update to the new ExtJS release (RC1). So, the things might go better.

    Please update from SVN and re-test the problem page.
  3. #3
    Mar 19, 2012, 2:39 PM
    Hi, Daniil thanks for the answer, i have update the dll, but the problem has improved slightly,

    IE9 the gridpanel with filtering header,for show 500 record time = 8 second from the moment in which performs the procedure
    Chrome = 4 second,
    This is not a problem for me, the customer will install chrome or firefox, it was just to see if the problem actually exists or was it just my problem.

    Thanks for your response and the time dedicated

    Aurelio
  4. #4
    Mar 19, 2012, 3:03 PM
    Quote Originally Posted by Aurelio View Post
    IE9 the gridpanel with filtering header,for show 500 record time = 8 second from the moment in which performs the procedure
    Chrome = 4 second,
    Please clarify what time does it take in a respective page with Ext.NET v1?
  5. #5
    Mar 19, 2012, 3:26 PM
    Hi, Daniil, with the versione 1.2 it's is many many faster, the same sample:

    IE9 = 2 second
    Chrome = 4 second
    FireFox = 2 second

    Thanks

    Aurelio
  6. #6
    Mar 19, 2012, 4:55 PM
    I suggest to use buffered grid
    Please test the following sample (please ensure that you updated from svn today)
    <%@ Page Language="C#" %>


<%@ 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 = this.Data;
            this.Store1.DataBind();
        }
    }


    private object[] Data
    {
        get
        {
            var count = 5000;
            var data = new object[count];
            for (int i = 0; i < count; i++)
            {
                var row = new object[20];
                for (int g = 0; g < row.Length; g++)
                {
                    row[g] = "Column " + g;
                }


                data[i] = row;
            }


            return data;
        }
    }
</script>


<!DOCTYPE html>


<html>
<head runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>
</head>
<body>
    <ext:ResourceManager runat="server">        
    </ext:ResourceManager>
    
    <h1>Simple Array Grid</h1>
    
    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        Title="Bufffered Grid of 5,000 records"
        Width="600" 
        Height="350">
        <Store>
            <ext:Store ID="Store1" runat="server" Buffered="true" PageSize="5000">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="C0" />
                            <ext:ModelField Name="C1" />
                            <ext:ModelField Name="C2" />
                            <ext:ModelField Name="C3" />
                            <ext:ModelField Name="C4" />
                            <ext:ModelField Name="C5" />
                            <ext:ModelField Name="C6" />
                            <ext:ModelField Name="C7" />
                            <ext:ModelField Name="C8" />
                            <ext:ModelField Name="C9" />
                            <ext:ModelField Name="C10" />
                            <ext:ModelField Name="C11" />
                            <ext:ModelField Name="C12" />
                            <ext:ModelField Name="C13" />
                            <ext:ModelField Name="C14" />
                            <ext:ModelField Name="C15" />
                            <ext:ModelField Name="C16" />
                            <ext:ModelField Name="C17" />
                            <ext:ModelField Name="C18" />
                            <ext:ModelField Name="C19" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column runat="server" DataIndex="C0" />
                <ext:Column runat="server" DataIndex="C1" />
                <ext:Column runat="server" DataIndex="C2" />
                <ext:Column runat="server" DataIndex="C3" />
                <ext:Column runat="server" DataIndex="C4" />
                <ext:Column runat="server" DataIndex="C5" />
                <ext:Column runat="server" DataIndex="C6" />
                <ext:Column runat="server" DataIndex="C7" />
                <ext:Column runat="server" DataIndex="C8" />
                <ext:Column runat="server" DataIndex="C9" />
                <ext:Column runat="server" DataIndex="C10" />
                <ext:Column runat="server" DataIndex="C11" />
                <ext:Column runat="server" DataIndex="C12" />
                <ext:Column runat="server" DataIndex="C13" />
                <ext:Column runat="server" DataIndex="C14" />
                <ext:Column runat="server" DataIndex="C15" />
                <ext:Column runat="server" DataIndex="C16" />
                <ext:Column runat="server" DataIndex="C17" />
                <ext:Column runat="server" DataIndex="C18" />
                <ext:Column runat="server" DataIndex="C19" />
            </Columns>            
        </ColumnModel>        
    </ext:GridPanel>
</body>
</html>
  7. #7
    Mar 19, 2012, 5:28 PM
    Hi, Vladimir, your example work very fast, but i have a gridpanel as this sample with header filter:

    https://examples2.ext.net/#/GridPane...Header/Filter/

    and if use buffered = true the filter not work exactly.

    Thanks
    Aurelio
  8. #8
    Mar 19, 2012, 5:41 PM
    Yes, buffered grid doesn't support filtering. In this case I can suggest to perform remote filtering (filter a data on the server side and bind filtered data to the store)
  9. #9
    Mar 19, 2012, 6:12 PM
    I found one possible workaround for local data filterinf
    MemoryProxy supports filters functions
    Please see the following sample
    <%@ Page Language="C#" %>


<%@ 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 = this.Data;
            this.Store1.DataBind();
        }
    }


    private object[] Data
    {
        get
        {
            var count = 5000;
            var data = new object[count];
            for (int i = 0; i < count; i++)
            {
                var row = new object[20];
                for (int g = 0; g < row.Length; g++)
                {
                    if (g == 0)
                    {
                        row[g] = i;
                    }
                    else
                    {
                        row[g] = "Column " + g;
                    }
                }


                data[i] = row;
            }


            return data;
        }
    }
</script>


<!DOCTYPE html>


<html>
<head runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>
</head>
<body>
    <ext:ResourceManager runat="server">        
    </ext:ResourceManager>
    
    <ext:Button runat="server" Text="Filter: index > 4500">
        <Listeners>
            <Click Handler="#{Store1}.load({filters: [{filterFn:function(r){return r.data.C0>4500;}}]});" />
        </Listeners>
    </ext:Button>


    <ext:Button runat="server" Text="Filter: index < 2500">
        <Listeners>
            <Click Handler="#{Store1}.load({filters: [{filterFn:function(r){return r.data.C0<2500;}}]});" />
        </Listeners>
    </ext:Button>
    
    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        Title="Array Grid"
        Width="600" 
        Height="350">
        <Store>
            <ext:Store ID="Store1" runat="server" Buffered="true" PageSize="5000">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="C0" Type="Int" />
                            <ext:ModelField Name="C1" />
                            <ext:ModelField Name="C2" />
                            <ext:ModelField Name="C3" />
                            <ext:ModelField Name="C4" />
                            <ext:ModelField Name="C5" />
                            <ext:ModelField Name="C6" />
                            <ext:ModelField Name="C7" />
                            <ext:ModelField Name="C8" />
                            <ext:ModelField Name="C9" />
                            <ext:ModelField Name="C10" />
                            <ext:ModelField Name="C11" />
                            <ext:ModelField Name="C12" />
                            <ext:ModelField Name="C13" />
                            <ext:ModelField Name="C14" />
                            <ext:ModelField Name="C15" />
                            <ext:ModelField Name="C16" />
                            <ext:ModelField Name="C17" />
                            <ext:ModelField Name="C18" />
                            <ext:ModelField Name="C19" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column runat="server" DataIndex="C0" />
                <ext:Column runat="server" DataIndex="C1" />
                <ext:Column runat="server" DataIndex="C2" />
                <ext:Column runat="server" DataIndex="C3" />
                <ext:Column runat="server" DataIndex="C4" />
                <ext:Column runat="server" DataIndex="C5" />
                <ext:Column runat="server" DataIndex="C6" />
                <ext:Column runat="server" DataIndex="C7" />
                <ext:Column runat="server" DataIndex="C8" />
                <ext:Column runat="server" DataIndex="C9" />
                <ext:Column runat="server" DataIndex="C10" />
                <ext:Column runat="server" DataIndex="C11" />
                <ext:Column runat="server" DataIndex="C12" />
                <ext:Column runat="server" DataIndex="C13" />
                <ext:Column runat="server" DataIndex="C14" />
                <ext:Column runat="server" DataIndex="C15" />
                <ext:Column runat="server" DataIndex="C16" />
                <ext:Column runat="server" DataIndex="C17" />
                <ext:Column runat="server" DataIndex="C18" />
                <ext:Column runat="server" DataIndex="C19" />
            </Columns>            
        </ColumnModel>        
    </ext:GridPanel>
</body>
</html>
  10. #10
    Mar 19, 2012, 8:23 PM
    Hi, Vladimir this Filter work ok with you code

     var applyFilter = function (field) {
                       var store = App.GridPanelCapComuni.getStore();
                       store.load({ filters: [{ filterFn: getRecordFilter()}]});
                       
                   };

                   var clearFilter = function () {
                       App.ProSigFilter.reset();
                       App.CapComCodFilter.reset();
                       App.CapComComFilter.reset();
                       App.StoreCapComuni.load();
                   };

                   var filterString = function (value, dataIndex, record) {
                       var val = record.get(dataIndex);

                       if (typeof val != "string") {
                           return value.length == 0;
                       }

                       return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
                   };


                   var getRecordFilter = function () {
                       var f = [];
                       

                       f.push({
                           filter: function (record) {
                               return filterString(App.CapComComFilter.getValue(), "CapComCom", record);
                           }
                       });


                       var len = f.length;

                       return function (record) {
                           for (var i = 0; i < len; i++) {
                               if (!f[i].filter(record)) {
                                   return false;
                               }
                           }
                           return true;
                       };
                   };
    WIth your example, it works ok , loading and showing in 2 second,
    but I found the problem of slow loading with IE9, is very slow when this gridpanel is loaded into an open window in a desktop module.
    As soon as I can I create an example to see if the cause is the window on a desktop module.
    For now use chome and the problem does not occur.

    Thanks
    Aurelio
Page 1 of 3 123 LastLast

Similar Threads

  1. [CLOSED] Question about chart render speed
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 29
    Last Post: Jun 11, 2012, 2:51 PM
  2. [CLOSED] GridPanel Dynamic Cell Render
    By VALUELAB in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 17, 2011, 10:39 AM
  3. [CLOSED] Render color div in gridpanel
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 26, 2010, 8:15 AM
  4. [CLOSED] Gridpanel Render help
    By JonG in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 09, 2010, 4:32 AM
  5. [CLOSED] Simple date render question
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 05, 2008, 1:31 PM

Tags for this Thread

Posting Permissions