Đánh dấu nút mặc định trong ExtJS (3.x) MessageBox

Question

có cách nào bị xử phạt để làm nổi bật nút mặc định (nút được kích hoạt bằng cách nhấn Enter) trong Ext.MessageBox không? Vui lòng lưu ý rằng tôi không muốn làm điều đó bằng cách tập trung vào nút khi MessageBox được hiển thị (trong trường hợp hộp thoại "nhắc nhở" tôi muốn phần tử đầu vào có tiêu điểm).

Tôi biết tôi có thể làm điều đó bằng cách thêm một lớp tùy chỉnh vào phần tử nút nhưng ... có thể có cách tốt hơn và giống như cách thực hiện điều này?

Cảm ơn.

Answer 1

Tóm lại ... không. Ext hiện không cung cấp phương pháp làm nổi bật nút nào trong bất kỳ thành phần Ext.MessageBox nào, không phải qua tùy chọn cấu hình.

Tuy nhiên, có nhiều cách, tùy thuộc vào tình huống. Ví dụ, nếu bạn đang sử dụng Ext.MessageBox.show() (mà bạn thực sự có thể sử dụng cho tất cả các hộp tin nhắn), sau đó bạn có thể làm một cái gì đó giống như ...

new Ext.Msg.show({ 
    title: 'Test', 
    msg: 'A sample message box with a button marked as default', 
    buttons: { ok: '<b>Submit</b>', cancel: 'Cancel' }, 
    fn: function(btn) { 
     if(btn == 'ok') { 
      //do something 
     } 
    }, 
    icon: Ext.Msg.WARNING 
} 

Tất cả chúng tôi đã làm là thêm <b> thẻ để một trong những nút trong cấu hình của chúng tôi, điều này sẽ hiển thị nó in đậm rõ ràng. Một cách khác mà bạn đã đề cập là thêm một lớp tùy chỉnh và đánh dấu nút bằng màu văn bản, bạn thậm chí có thể chỉ thêm lớp giống như chúng tôi đã làm với các thẻ <b> ở trên để dễ dàng hơn ..

&hl=vi

buttons: { ok: '<span class="highlighted-option">Submit</span>', cancel: 'Cancel' },

khác với phong cách này của phương pháp, hoặc không mở rộng các lớp Ext.MessageBox, không có cách nào khác để đạt được điều này.

Answer 2

Jaitsu có câu trả lời tốt nhất, nhưng trong trường hợp điều này có thể hữu ích cho người khác ... đây là cách để làm điều đó với phong cách. Có thể áp dụng cùng một mẹo cho bất kỳ nút nào khác (như: nút Cửa sổ).

Thêm phần này vào css của bạn:

.x-btn-default td.x-btn-mc { 
    outline: 1px dotted black; 
} 

Sau đó định nghĩa các nút như thế này:

... 
    ,buttons: [ 
    { 
     text: 'Ok', 
     ,handler: handleFn 
     ,cls: 'x-btn-default' 
    },{ 
     text: 'Cancel', 
     ,handler: handleFn 
    } 
    ] 
    ,... 

Answer 3

Trong ExtJs 4 bạn có thể thiết lập các nút mặc định như sau:

Ext.MessageBox.defaultButton = buttonIndex; 

đâu 'buttonIndex' là chỉ mục của nút trên hộp thoại. Bạn cần phải làm điều này trước khi bạn gọi Ext.MessageBox.Show.