Extjs is used to implement a clumsy confirm dialog box.

Source: Internet
Author: User

In order to adapt the developed project to multiple browsers and achieve good performance, we have been using JS provided by extjs to optimize and adjust the project during this time.

Under implementationAnimateAfter a series of adjustments, such as modal window simulation and alert messagebox. the effect of the confirm function has encountered a little trouble. Today, we finally implemented the window in a clumsy way. confirm.

First, I searched for the MessageBox object provided by extjs and found that the confirm function was provided. Therefore, I decided to use this function to replace window. Confirm. The confirm function provided by extjs outputs a MessageBox object through show, which returns an object instead of the true/false values of window. Confirm;

Second, the MessageBox button event is implemented through the function parameter, and the operation result of the button will not be returned to the confirm function object.

Because of the above two points, I have made some effort to implement the delete confirmation of a gridview object.

Previously, when window. Confirm was used for confirmation, I only set if (! Deleteconfirm (this) {return false;}. In this way, when the client selects OK in the confirm dialog box, it enters the server event to delete data.

The deleteconfirm function before modification is

Function deleteconfirm (item ){

If (confirm (Message) = false)

Return false;

Else

Return true;

}

After extjs MessageBox is used, I first changed the deleteconfirm function

Function deleteconfirm (item ){

Ext. MessageBox. Confirm (confirmtitle, message, function (BTN ){

If (BTN = 'yes '){

Return true;

}

Else {

Return false;

}

});

}

The result dialog box automatically disappears when it appears.L

I checked some extjs content about confirm MessageBox on the Internet. Many users provided the content all using extjs. The grid was used to delete and confirm that extjs gridpanel was used, NO content found related to my current situation. I had to solve it myself.

Since the confirm of extjs implements button control in function (BTN), I want to change the onclientclick event of Delete buttonfield of gridview to deleteconfirm (this); Return false; directly return the event that is not executed on the server. Now the MessageBox is displayed and disappears without a flash. After you click the MessageBox button, there is no response. It seems that you have to execute the delete buttonfield onclientclick event again to execute server-side operations.

I wonder if I can modify the onclick OF THE Delete buttonfield object and then execute the click () event in Js. If I change the above function

Function deleteconfirm (item ){

Ext. MessageBox. Confirm (confirmtitle, message, function (BTN ){

If (BTN = 'yes '){

VaR attclick = item. getattribute ('onclick ');

Attclick = attclick. Replace ("deleteconfirm (this); Return false ;","");

Item. setattribute ('onclick', attclick );

Item. Click ();

});

}

The above modification passed the test in Firefox, but it failed in IE7, which is a bit dizzy.L

After repeated tracking tests and modifications, I finally changed the onclientclick event of the delete buttonfield OF THE gridview to deleteconfirm (this, '"+ E. row. rowindex + "'); Return false; change the above function

// Delete confirm dialog Function

FunctionDeleteconfirm (Item, Index ){

Ext. MessageBox. Confirm (confirmtitle, message,Function(BTN ){

If(BTN ='Yes')

{

_ Dopostback ('Ctl00 $ contentplaceholder1 $ gridview1','Delete $'+ Index );

}

});

}

Both IE and Firefox can pass the test. Confirm is implemented using the MessageBox of extjs. Looking at the above function_ DopostbackEventtarget and eventargument are all written to death. This is really a stupid method.

The above is my application to extjs's confirm function. I can view extjs instances and online materials. I also know that I can use other methods to achieve interaction with the server, so stupid now. We look forward to a better way of sharing.J

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.