[CLOSED] Implementing ExtJS Grid DataDrop plugin

Page 3 of 3 FirstFirst 123
  1. #21
    Quote Originally Posted by vladimir View Post
    Singleton="true"
    Sounds like a good idea. Probably best to assume an instantiable class, most plugins will be that way.

    This particular plugin was created as a singleton because there are no configurable options, and speed was a concern.
  2. #22
    Quote Originally Posted by VinylFox View Post
    (not to mention that it has no configurable options)
    I like to keep my options open. ;)

    Actually, I converted to a constructor because I had an idea on how to extend the plugin with a plugin. Not sure if that is possible, but I ran out of time so didn't get around to coding it out.
    Geoffrey McGill
    Founder
  3. #23
    Quote Originally Posted by VinylFox View Post
    Sounds like a good idea. Probably best to assume an instantiable class, most plugins will be that way.
    Yes, agreed. This is the first singleton plugin we've come across, although I'm sure there's many more, just they haven't crossed our paths yet.

    We're adding the Singleton="true|false" property to the Plugin class. Default "false".
    Geoffrey McGill
    Founder
  4. #24
    Hi all,

    The Singleton="true" property has been added to SVN.

    Here's a full sample configuring everything wihtin the <ext:GenericPlugin> to use the unmodified original plugin source code from VinylFox.

    http://www.vinylfox.com/datadrop-dra...m-spreadsheet/

    Example

    <%@ 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)
            {
                var store = this.GridPanel1.GetStore();
      
                store.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "2010-09-01" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "2010-09-01" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "2010-09-01" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "2010-09-01" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "2010-09-01" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "2010-09-01" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "2010-09-01" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "2010-09-01" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "2010-09-01" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "2010-09-01" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "2010-09-01" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "2010-09-01" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "2010-09-01" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "2010-09-01" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "2010-09-01" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "2010-09-01" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "2010-09-01" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "2010-09-01" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "2010-09-01" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "2010-09-01" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "2010-09-01" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "2010-09-01" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "2010-09-01" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "2010-09-01" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "2010-09-01" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "2010-09-01" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "2010-09-01" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "2010-09-01" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "2010-09-01" }
                };
                 
                store.DataBind();
            }
        }
    </script>
      
    <!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 runat="server">
        <title>Ext.NET Example</title>
      
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}';
      
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
      
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
                      
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                StripeRows="true"
                Title="Array Grid"
                TrackMouseOver="true"
                Width="600"
                Height="350"
                AutoExpandColumn="company">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="yyyy-MM-dd" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                        <ext:Column Header="Price" DataIndex="price">                  
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" SingleSelect="true" />
                </SelectionModel>
                <Plugins>
                    <ext:GenericPlugin
                        runat="server"
                        InstanceName="Ext.ux.grid.DataDrop"
                        Singleton="true"
                        Path="Override.js,Ext.ux.plugins.DataDrop.js"
                        />
                </Plugins>
            </ext:GridPanel>         
        </form>
    </body>
    </html>
    Geoffrey McGill
    Founder
  5. #25
    After all was said and done, we added two modifications to the <ext:GenericPlugin> functionality:

    1. Added new Singleton="true|false" property. Default is "false"
    2. Added ability to include multiple .js files in the Path by separating each with a comma


    Revisions have been committed to SVN and will be publicly available with the upcoming v1.0 Beta release.

    Hope this helps.
    Last edited by geoffrey.mcgill; Jan 24, 2011 at 4:34 PM.
    Geoffrey McGill
    Founder
  6. #26
    Hi @VinylFox,

    Are you planning to update the plugin to ExtJS 4? Just curious.
  7. #27
    Well, you already did. The colleague showed me:
    https://github.com/VinylFox/ExtJS.ux.DataDrop

    Nice.
  8. #28
    Here is an example for Ext.NET v2 with the ExtJS 4 version of DataDrop plugin.

    Tested with trunk revision #5342. This revision will go to the v2.3 release.

    Example
    <%@ 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)
            {
                var store = this.GridPanel1.GetStore();
     
                store.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "2010-09-01" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "2010-09-01" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "2010-09-01" },
                };
            }   
        }
    </script>
        
    <!DOCTYPE html>
        
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        
        <script>
            var template = '<span style="color:{0};">{1}';
        
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
        
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
                        
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="600"
                Height="350">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" Type="String" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" DateFormat="yyyy-MM-dd" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                        <ext:Column runat="server" Text="Price" DataIndex="price">                  
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:GenericPlugin
                        runat="server"
                        InstanceName="Ext.ux.grid.DataDrop"
                        Singleton="true"
                        Path="resources/js/MouseEventForwarding.js,resources/js/DataDrop.js"
                        />
                </Plugins>
            </ext:GridPanel>         
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 26, 2013 at 12:44 PM.
Page 3 of 3 FirstFirst 123

Similar Threads

  1. Replies: 5
    Last Post: Dec 26, 2011, 5:39 AM
  2. [CLOSED] Editable Grid Plugin
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 28, 2011, 6:29 AM
  3. Replies: 3
    Last Post: Sep 22, 2011, 4:45 PM
  4. [CLOSED] RowExpander Plugin for Grid
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 16
    Last Post: Jul 14, 2011, 2:48 PM
  5. DataDrop plugin
    By threewonders in forum 1.x Help
    Replies: 1
    Last Post: Apr 04, 2011, 4:14 PM

Tags for this Thread

Posting Permissions