Hello Jeff!
As for how this works:
.Listeners(l =>
{
l.AfterRender.Handler = "this.plugins[0].dragZone.getDragText = getDragDropText;";
l.AfterRender.Delay = 1;
})
The listener is bound to the grid's view. Right? So the AfterRender script will take place right when the grid's view is ready. It will then have
this as the grid's view itself. From the grid view, gets the first plug in attached to it, which we are assuming it is the gridDragDrop, as there's no other plug in to the grid at that moment. That's for simplicity. In a more robust approach, one might traverse every plugins in the view (with a for or forEach loop) and check if that plugin matches the drag & drop type and only then make changes to it.
You can get lots of useful info on what is what exactly by JavaScript side on the official Sencha docs. That's a comprehensive "online reference card" with all features and syntax on the JavaScript objects. The
dragZone reached by the plugin reference above then haves its original implementation of the
getDragText() method literally replaced to the one we defined above. This is equivalent to overriding an specific instance of the drag drop in view to build the string the way we want.
When we do something like:
function test() { do some test}
var testRef = test; // notice! no parens!
we can then just
testRef();
it will work like a reference to a function.
But there's a gotcha in it all. If you open the links above about the DragZone and method, you'll se they are marked as private. I'm not really sure why the example I based on giving you the solution relied on that private ExtJS methods. Probably there was not a discern between public and private at the time the example was written and it then relied in that class and method, which works fine even nowadays. The risk on that approach is that Sencha might be changing this at any time without advance notice and will not consider this being broken as a "breaking change" as it was said not to rely on it from the beginning.
Well, to this point I tried to explain most of the first code block you wanted to understand its purpose. Now I'll get to the rest of your question.
In your function:
var setClientID = function (view) {
var selection = view.panel.getSelectionModel().getSelection()[0];
selection.set("ClientID", clientID);
};
To me, what you are doing is:
1. selection is the current first selected item in the panel's selection model
2. set the 'ClientID' property in that selection item
to the value on an undefined variable -- or just "set ClientID to 'undefined'".
I didn't see there where you have clientID defined. Only argument you passed to the function is the view object. Is that clientID in global space, and reliably updated to the current ID it should have?
As for the
ClientID name, I understand this as being a mapping
from C# to get the actual ID of a component when it is rendered on the user's opened page (in JavaScript). From code behind perspective, it is useful to get the ID of a component when you don't specify it with a [b].ID("foo")[/bar] property, and allows you to statically add write the ID on output JavaScript code when the Razor view is rendered.
Perhaps you mixed a bit the concepts on what it rendered server-side and client-side on the page?..
For example...
var cid = "myClientID";
gets rendered as is and
var cid = "@(GridPanel1.ClientID())";
Renders on the client page (before JavaScript is parsed) as (assuming that GridPanel.ClientID() C# function returns "ext_3281"):
var cid = "ext_3281";
Or I just missed where you defined
clientID in your JavaScript code.
I hope something here helps!
Posting Permissions
| Frameworks and Tools for .NET Developers