Tôi làm cách nào để Người dùng xác nhận sự kiện thay đổi combobox trong ExtJ?

Question

Tôi có một kết hợp trong ứng dụng extjs của mình và tôi muốn hiển thị 'Bạn có chắc chắn là ?' xác nhận cửa sổ cho người dùng và ngăn thay đổi nếu người dùng nói không.

Vì hộp xác nhận của JavaScript là đồng bộ, nó hoạt động bình thường. Nhưng sử dụng Ext JS, thông báo xác nhận được hiển thị và phần còn lại của mã của tôi sẽ được thực hiện trước khi người dùng trả lời. Đây là mã của tôi:

// JavaScript confirm box 
{ 
    xtype: 'combo', 
    ... 
    ... 
    ... 
    listeners: { 
     beforeselect: function(combo, record, index) { 
      if(confirm('Are you sure ?') == false) 
      { 
       return false; // prevent combo from changing 
      } 
      // else continue 
     } 
    } 
} 
// Ext JS message box (to confirm) 
{ 
    xtype: 'combo', 
    ... 
    ... 
    ... 
    listeners: { 
     beforeselect: function(combo, record, index) { 
      Ext.Msg.show({ 
       title: 'Warning', 
       msg: 'Are You Sure ?', 
       buttons: Ext.Msg.YESNO, 
       fn: function(btn) { 
        if (btn == 'yes') { 
         // continue and set new value on combo 
        } 
        else if (btn == 'no') { 
         // prevent combo from changing 
        } 
       } 
      }); 
     } 
    } 
} 

Vấn đề là Ext.Msg.show được một chức năng gọi lại và không chờ đợi cho người dùng trả lời và chúng tôi không thể ngăn chặn thay đổi combobox.

Tôi nên làm gì?

Answer 1

Để hủy thay đổi combobox, trình nghe beforeSelect cần trả về false. Đề nghị của tôi là:

beforeselect: function(combo, record, index) { 
    Ext.Msg.show({ 
    title: 'Warning', 
    msg: 'Are You Sure ?', 
    buttons: Ext.Msg.YESNO, 
    fn: function(btn) { 
     if (btn == 'yes') { 

     // Here we have to manually set the combo value 
     // since the original select event was cancelled 
     combo.setValue(/* whatever value was selected */); 
     } 

     else if (btn == 'no') { 

     // Don't do anything because the select event was already cancelled 
     } 
    } 
    }); 

    // Cancel the default action 
    return false; 
} 

Các ExtJS phương thức không ngừng thực hiện các kịch bản như thoại có nguồn gốc, có nghĩa là các beforeSelect nghe được trở lại trước khi hành động người dùng. Cách mã này hoạt động là sự kiện chọn được dừng ngay lập tức và hộp thoại được hiển thị. Khi người dùng chọn "có", thì giá trị trên combo được đặt theo chương trình trong hàm gọi lại.