[FIXED] [#173] [4.4.1] Dataview animated plugin error when items have changed

  1. #1

    [FIXED] [#173] [4.4.1] Dataview animated plugin error when items have changed

    Hi,
    I am trying to implement the DataviewAnimated plugin.

    It works fine until i change the users in the Dataview through a directevent.
    After the number of users has changed it throws an error saying it cannot set the style.

    It is trying to find the old users that were in the dataview previously.

    Is there a way to reset the dataviewanimated plugin to use the new data.

    The javascript error it is throwing on in as follows.

    "Cannot call method ApplyStyles of null"

    Ext.iterate(added, function(id, item) {
                    Ext.fly(this.dataviewID + '-' + item.internalId).applyStyles({
                        top: newPositions[item.internalId].top + "px",
                        left: newPositions[item.internalId].left + "px"
                    }).setDisplayed(true);
                    
                    Ext.fly(this.dataviewID + '-' + item.internalId).animate({
                        remove: false,
                        duration: duration,
                        opacity: 1
                    });
                }, this);
                
                this.cacheStoreData(store);


    Thanks
    Fergus
    Last edited by Daniil; Mar 15, 2013 at 12:02 PM. Reason: [OPEN] [#173]
  2. #2
    I can see there is a BlockRefresh property of the dataview.

    It seems that this should be for this purpose but i have set it to true and it does not fix the problem.

    Thanks
    Fergus
  3. #3
    Can you provide runable sample reproduces the issue?
    I tried to reproduce the error with standard example but without success
  4. #4
    Hi Vladimir,
    Thanks for reply.

    I took the slider animated example and simplified it to show the error. Css not hooked up but you will see the error anyway.

    2 buttons. First one no error. Second one error as there are new ids in it.

    <%@ Page Language="VB" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            If Not Ext.Net.X.IsAjaxRequest Then
                
            Dim gl As New Generic.List(Of Integer)
            
            Dim i As Integer
            For i = 0 To 15
                gl.Add(i)
            Next
            Dim source = From s In gl Select New With {.id = s.ToString}
            
            Me.Store1.DataSource = source
            Me.Store1.DataBind()
            
            End If
        End Sub
        
        Protected Sub ChangeDataError(sender As Object, e As DirectEventArgs)
            Dim gl As New Generic.List(Of Integer)
            
            Dim i As Integer
            For i = 10 To 17
                gl.Add(i)
            Next
            Dim source = From s In gl Select New With {.id = s.ToString, .name = "Whatever"}
            
            Me.Store1.DataSource = source
            Me.Store1.DataBind()
        End Sub
        
        Protected Sub ChangeData(sender As Object, e As DirectEventArgs)
            Dim gl As New Generic.List(Of Integer)
            
            Dim i As Integer
            For i = 10 To 15
                gl.Add(i)
            Next
            Dim source = From s In gl Select New With {.id = s.ToString, .name = "Whatever"}
            
            Me.Store1.DataSource = source
            Me.Store1.DataBind()
        End Sub
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Ext.Net Examples - Animated DataView</title>
    
            
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <h1>Animated DataView Example</h1>
    
            <p>
                This example uses the Ext.ux.DataView.Animated plugin to animate the changes to
                a
                DataView.
            </p>
    
            <ext:Panel ID="Panel1"
                runat="server"
                Title="Animated DataView"
                Height="555"
                Width="1100"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button runat="server" ID="Button1" Text="Change Data without error">
                                <DirectEvents>
                                    <Click OnEvent="ChangeData">
                                        <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="Panel1"></EventMask>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                            <ext:Button runat="server" ID="btnRemove" Text="Change Data WITH error">
                                <DirectEvents>
                                    <Click OnEvent="ChangeDataError">
                                        <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="Panel1"></EventMask>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
    
                </TopBar>
                <Items>
                    <ext:DataView
                        ID="phones"
                        runat="server"
                        ItemSelector="div.phone"
                        OverItemCls="phone-hover"
                        MultiSelect="true"
                        AutoScroll="true"
                        Cls="phones-view"
                        TrackOver="true">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="id">
                                        <Fields>
                                            <ext:ModelField Name="id" Type="Int" />
                                            <ext:ModelField Name="name" />
    
                                            <ext:ModelField Name="hasEmail" Type="Boolean" />
                                            <ext:ModelField Name="hasCamera" Type="Boolean" />
                                            <ext:ModelField Name="price" Type="Int" />
                                            <ext:ModelField Name="screen" />
                                            <ext:ModelField Name="camera" />
                                            <ext:ModelField Name="color" />
                                            <ext:ModelField Name="type" />
                                            <ext:ModelField Name="reviews" Type="Int" />
                                            <ext:ModelField Name="screen-size" Type="Int" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                
                            </ext:Store>
                        </Store>
                        <Tpl ID="Tpl1" runat="server">
                            <Html>
                                <tpl for=".">
                                    <div class="phone">
                                        <tpl if="!Ext.isIE6">
                                            <img width="64" height="64" src="../../Shared/images/phones/{[values.name.replace(/ /g, "-")]}.png" />
                                        </tpl>
                                        <tpl if="Ext.isIE6">
                                            <div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Shared/images/phones/{[values.name.replace(/ /g, '-')]}.png',sizingMethod='scale');"></div>
                                        </tpl>
                                        <strong>{name} ({id})</strong>
                                        <span>{price:usMoney} ({reviews} Review{[values.reviews == 1 ? "" : "s"]})</span>
                                    </div>
                                </tpl>
                            </Html>
                        </Tpl>
                        <Plugins>
                            <ext:DataViewAnimated ID="DataViewAnimated1" runat="server" Duration="550" />
                        </Plugins>
                    </ext:DataView>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Thanks
    Fergus
  5. #5
    Hello!

    Thank you for your example. I was able to reproduce with trunk. We are investigating.
  6. #6
    The fix has been committed to SVN. Please update and retest.

    We also reported to Sencha.
    http://www.sencha.com/forum/showthread.php?258838

    And an Issue to monitor.
    https://github.com/extnet/Ext.NET/issues/173

    We will revert our change back, if Sencha fixes it.
  7. #7
    I have update and tested.

    Works A OK.

    Thread can be closed.

    Thanks for support.
    Fergus
  8. #8
    Hello!

    Sencha has opened bug ticket.
  9. #9
    Quote Originally Posted by Baidaly View Post
    Hello!

    Sencha has opened bug ticket.
    Hey guys,

    Any temporary workaround for those who cannot access SVN?

    Thanx
  10. #10
    Hello @infotex,

    A possible fix is posted in the Sencha thread.

Similar Threads

  1. Replies: 8
    Last Post: May 13, 2016, 6:35 PM
  2. Replies: 6
    Last Post: Nov 27, 2013, 6:37 AM
  3. Replies: 1
    Last Post: Apr 22, 2013, 11:47 AM
  4. [OPEN] [#97] DataView Selection Plugin breaks on Store.reload()
    By paulc in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 27, 2012, 8:42 AM
  5. How to get the changed items in the MultiCombo.
    By ascsolutions in forum 1.x Help
    Replies: 0
    Last Post: Sep 05, 2012, 3:05 PM

Tags for this Thread

Posting Permissions