extjs/c# Yes saves to the database

Question

I have a simple question.

I have a FormView, with a save button. When the button is clicked, it saves to databse.

I've added an EXT message box to confirm if user wants to save the data or not. when he click yes on the messagebox yes button, then it should save the data.

I can't find where to write the yes button logic in the ext.

Here is my code :

     <asp:FormView ID="myform" runat="server" DataSourceID="mydatasource" DefaultMode="Edit"  DataKeyNames="Id" >

      <EditItemTemplate>                                              
       <asp:TextBox ID="myText" runat="server" TextMode="MultiLine" ClientIDMode="Static"
        Text='<%#Bind("xx") %>' />                                                  
       <ext:Button ID="btn_Update" runat="server" AutoPostBack="false" CausesValidation="false"  CommandName="Update" Text="Speichern" StyleSpec="float: left; margin-left:10px;">                                                                               <DirectEvents>
<Click OnEvent="btnUpdateClick"></Click>
 </DirectEvents>
                                                              </ext:Button> 



    <script type="text/javascript">

    function showResult(btn) 
    {
            Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
        };
        function showResultText(btn, text) 
        {
            Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
        }

        var showResult = function (btn) {
            Ext.Msg.notify("Button Click", "You clicked the " + btn + " button");
        };

        var showResultText = function (btn, text) {
            Ext.Msg.notify("Button Click", "You clicked the " + btn + 'button and entered the text "' + text + '".');
        };


</script>



protected void btnUpdateClick(object sender, DirectEventArgs e)
        {
           X.Msg.Confirm("Confirm", "Are you sure you want to save?", new JFunction { Fn = "showResult" }).Show();

        }

Answer 1

I guess you are looking for this: (Can be placed in any Demo-Box of the Sencha API)

Edit 2

I have totally overseen that you are using Direct. You should mention such things. Is there any reason for using DirectEvent? I couldn't test it but how about this (the wrapping function may be unnecessary, but a normal ExtJS handler get button reference as first argument):

<form runat="server">
        <ext:ResourceManager runat="server" />

        <script runat="server">
            [DirectMethod]
            public void SetTimeStamp(string field)
            {
                // do your saving
            }
        </script>
        <ext:TextField ID="TextField" runat="server" FieldLabel="Label"/>
        <ext:Button ID="Button" runat="server" Text="Click Me" Icon="Lightning">
            <Listeners>
                <Click Handler="function() {Ext.Msg.show({title: 'Save?', msg: 'Do you want to save the data?:', buttons: Ext.Msg.YESNO,fn: function(btn){ if(btn == 'yes') {App.direct.SetTimeStamp(#{TextField}.getValue());}}})}" />
            </Listeners>
        </ext:Button>
</form>

Edit 1 Simply use Ext.Ajax.request()

Ext.Msg.show({
        title: 'Save?', 
        msg: 'Do you want to save the data?:', 
        buttons: Ext.Msg.YESNO,
        fn: function(btn, text){
              Ext.Ajax.request({
                url: 'yourUrl',
                method: 'POST',
                params: {
                    // your params
                },
                success: function() {
                    console.log('success');
                },
                failure: function() {
                    console.log('woops');
                }
            });
        }
});

Form example removed

Answer 2

Thank you all for your support, I found my way through your answers I will put it here maybe it can be useful for someone.

First, button code, need to have Isupload = "true"

ext:Button ID="btn_Update" runat="server" AutoPostBack="false" CausesValidation="false"
CommandName="Update" Text="Save" StyleSpec="float: left; margin-left: 10px;"
AutoScroll="False">
<DirectEvents>
<Click OnEvent="btnUpdateClick" IsUpload="true" AutoDataBind="true">
</Click>
</DirectEvents>
</ext:Button>

in the button event in the aspx :

protected void btnUpdateClick(object sender, DirectEventArgs e)
{
        MessageBoxButtonConfig buttonYes = new MessageBoxButtonConfig();
        buttonYes.Text = "Yes";
        buttonYes.Handler = "Ext.net.DirectMethods.ClickedYES();";

        MessageBoxButtonConfig buttonNo = new MessageBoxButtonConfig();
        buttonNo.Text = "NO";
        //  buttonNo.Handler = "Ext.net.DirectMethods.ClickedNO();";

        MessageBoxButtonsConfig yesNoButtons = new MessageBoxButtonsConfig();
        yesNoButtons.Yes = buttonYes;
        yesNoButtons.No = buttonNo;

        X.Msg.Confirm("Save Changes", "Would you like to Save?", yesNoButtons).Show();
 }

Last the Yes method that will save to database:

[DirectMethod]
public void ClickedYES()
{
      Formview.UpdateItem(false);
      Formview.DataBind();
}

Answer 3

I would suggest that instead of wiring the yes button of the dialog to perform the postback. You should wait for the message box to close and then invoke the postback functionality if the user clicked yes.

For example:

Ext.Msg.prompt('SaveChange', 'Would you like to save the changes?:', function(btn, text){
    if (btn == 'yes'){
         __doPostBack('btnSubmit','OnClick');
    }
});

Replace btnSubmit with the name of your button.

Although the above solution would be my recommended approach, you could, alternatively, use jquery by doing:

$('btnSubmit').trigger('click'); 

Source: http://dev.sencha.com/playpen/docs/output/Ext.MessageBox.html