[CLOSED] Implementing ExtJS Grid DataDrop plugin

[VinylFox]

I can't get this to work.
...
- The mouse cursor doesn't change to "drop" state when I try to drag from Excel over my Coolite example as it does in the Ext.JS example.
- The object that should contain the drag data is empty.

There is no changing of the cursor.

Did you set a breakpoint in the dataDropped method? What was the 'el' and 'nv' var set to?

One question that I have. Is there a better way of doing this with native Coolite code? Is it possible to use the DragZone component to accept items from outside the browser?

No. Not the same thing. Way way different.

[geoffrey.mcgill]

Tested with 3.2.1 and it works just fine. Your doing something wrong.

Ya, I just tested a full sample and the plugin appears to be working perfectly.

I think there might have been some confusion re: the functionality of the plugin.

I'll post a full sample will all files in a .zip. Just need to clean a few things up.

be right back

[Vladimir]

Hi,

I confirm that the plugin works as expected (just I misunderstood how the plugin work, I tried to drag the file instead to open Excel and drag the selection)

[geoffrey.mcgill]

I cleaned up our sample and made a few revisions.

There are five (5) files attached to this post. File extensions were changed to .txt, so you'll need to change back as required before adding to your project.

1. Default.aspx
2. Ext.ux.plugins.DataDrop.combined.js - A combined version of #3 & #4 which is loaded by Default.aspx.
3. Ext.ux.plugins.DataDrop.js - revised build of original plugin
4. Override.js - reformatted as per JSLINT strict formatting
5. data.xlsx - a simple Excel spreadsheet with sample data to drag/drop into the GridPanel

Only files #1 and #2 are required if you want to test this sample. The .aspx (#1) loads the .js file (#2). Sample data is provided in the .xlsx (#5), but is not required to run the sample.

Within the DataDrop plugin I made a few quick revisions:

1. moved to Ext.ux.plugins namespace
2. reformated plugin to include constructor
3. ran through JSLINT.com and fixed any warnings
4. formatted as per JSLINT strict formatting
5. a few other minor tweaks

With the structural revisions to the plugin I ran into a few funky scoping issues, but didn't really have time to figure everything out so I just kept an instance of the plugin always available on the GridPanel.

// within init
cmp.dataDrop = this;

NOTE: I combined the two files for this sample just to simplify things for anyone wanting to quickly try the code. In your app, you might want (or need) to separate the two files. Combining the two .js files also enables using the <ext:GenericPlugin> component.

Hope this helps.

Example (.aspx)

<%@ 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}</span>';
 
        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.plugins.DataDrop" 
                    Path="Ext.ux.plugins.DataDrop.combined.js" 
                    />
            </Plugins>
        </ext:GridPanel>         
    </form>
</body>
</html>

[geoffrey.mcgill]

Here's all the files, including original plugin .js included in a .zip. See attached DataDrop.zip.

[geoffrey.mcgill]

I should also mention, I tested this sample in IE, Chrome and Firefox and it works great in all.

@VinylFox - really clever plugin. thx.

[geoffrey.mcgill]

I just added support configuring multiple .js files in the Path property of the <ext:GenericPlugin>. Just separate each file with a comma ','.

Example

<Plugins>
    <ext:GenericPlugin 
        runat="server" 
        InstanceName="Ext.ux.plugins.DataDrop" 
        Path="Override.js,Ext.ux.plugins.DataDrop.js" 
        />
</Plugins>

Now you don't really need to combine the two files as was demonstrated above.

The new feature has been committed to SVN and will be publicly available with the next release.

Hope this helps.

[Moltas]

Thanks to all of you! :)
It works great now!

//Moltas

[VinylFox]

...
Within the DataDrop plugin I made a few quick revisions:

1. reformated plugin to include constructor

With the structural revisions to the plugin I ran into a few funky scoping issues, but didn't really have time to figure everything out so I just kept an instance of the plugin always available on the GridPanel.

// within init
cmp.dataDrop = this;

I think I see what's happening here...This plugin was created in a Singleton form, so it does not need a constructor (not to mention that it has no configurable options). Can Ext.NET handle that type of a plugin, or does it assume the plugin is a class that can be instantiated?

Is there an option to use a singleton?

ie: SingletonName="Ext.ux.plugins.DataDrop"

[Vladimir]

Hi,

I guess we can add Singleton property (or may be Instantiated="true") to GenericPlugin class

Singleton="true"

If true then we omit instantiation (just using InstanceName directly without constructor statement)