Jquery & Ext.NET

[threewonders]

Hello.

I'm using a jQuery plugin (JCrop) to Crop a picture.

jQuery(function ($) {
 $('#image').Jcrop();
});

The thing is if I use ext:Image does not work

      <ext:Image ID="image"  runat="server" />

But if I use img, if it works.

       <img id="image" />

There are some special way to access the ext components from jquery?

Given that I do not mind using <img, I have a problem not solved

            jQuery(document).ready(function() {
                jQuery('#image').Jcrop({
                    onSelect: updateCoords
                });
            });

            function updateCoords(c) {
                jQuery('#X').val(c.x);
                jQuery('#Y').val(c.y);
                jQuery('#W').val(c.w);
                jQuery('#H').val(c.h);
            };

And are defined in:

                                      
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />

Use asp:HiddenField because it is not as updating the value of a ext:Hidden from jQuery. Could be done?

As I can access the value of X (for example) from ext.Net, I just want to get those values ​​to pass as an event paramentros ext.Net

                                                            <ext:Button runat="server" Text="CROP">
                                                                <DirectEvents>
                                                                    <Click OnEvent="Crop_Click">
                                                                        <ExtraParams>
                                                                           <%-- <ext:Parameter Name="X" Value="#X" Mode="Raw"></ext:Parameter>--%>
                                                                           <%-- <ext:Parameter Name="Y" Value="#Y" Mode="Raw"></ext:Parameter>--%>
                                                                           <%-- <ext:Parameter Name="W" Value="#W" Mode="Raw"></ext:Parameter>--%>
                                                                           <%-- <ext:Parameter Name="H" Value="#H" Mode="Raw"></ext:Parameter>--%>
                                                                        </ExtraParams>
                                                                    </Click>
                                                                </DirectEvents>
                                                            </ext:Button>

Is that #X is not the way to do it, but it was to give an example ...

Thank you very much and best regards

[Vladimir]

Hi,

1. At which moment you apply jQuery plugin, you have to do it after Image rendering (use AfterRender event of Image)
2. In the updateCoords function you use ExtJS Api finctions (if you use Ext.Net hidden fields)

function updateCoords(c) {
    X.setValue(c.x);
    ...
};

3. - Ext.Net hidden field

<ext:Parameter Name="X" Value="#{X}.getValue()" Mode="Raw"></ext:Parameter>

- ASP hidden field

<ext:Parameter Name="X" Value="Ext.fly('X').dom.value" Mode="Raw"></ext:Parameter>

But what a sense to pass fields as parameters? Fields will be submitted automatically

[threewonders]

Thank you very much, I will do tests and as I commented as I do at the end.
Currently Ext.fly('X'). Dom.value works like a charm :D

Is there any place where things like this documented Ext.fly ... etc

Regards

[Daniil]

Is there any place where things like this documented Ext.fly ... etc

It's ExtJS method. Here is the ExtJS 3 API docs.
http://dev.sencha.com/deploy/ext-3.3.1/docs/