ExtJs4 cách tắt tất cả các trường và tất cả các nút trên bảng điều khiển đệ quy

Question

Tôi đang cố vô hiệu hóa tất cả các thành phần có thể nhấp, có thể chỉnh sửa trên bảng điều khiển của mình.

Gọi panel.disable() tô màu nó ra, nhưng các nút vẫn có thể nhấp. Kết quả tương tự cho panel.cascade với chức năng vô hiệu hóa từng thành phần.

Cách phù hợp để thực hiện việc này là gì?

Answer 1

Nếu bạn đang sử dụng ExtJs 4.x, đây là những gì bạn đang tìm kiếm -

myFormPanel.query('.field, .button').forEach(function(c){c.setDisabled(false);}); 

(Modify chọn của bạn dựa trên sự phức tạp của hình thức của bạn Bạn chỉ có thể sử dụng .component và nó. sẽ vô hiệu hóa tất cả các thành phần trong mẫu của bạn)

Xem thêm - Ext.ComponentQuery

Nếu bạn đang sử dụng 3.x, bạn có thể đạt được hiệu quả tương tự trong hai các bước như thế này -

myFormPanel.buttons.forEach(function(btn){btn.setDisabled(true);}); //disable all buttons 
myFormPanel.getForm().items.each(function(itm){itm.setDisabled(true)}); //disable all fields 

Answer 2

Giả sử rằng bạn sử dụng một FormPanel bạn có thể sử dụng phương pháp này để có được hình thức:

getForm() // see http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel-method-getForm 

này sẽ trả lại đối tượng Ext.form.Basic. Từ đây, bạn có quyền truy cập vào tất cả các trường trên biểu mẫu này bằng phương thức:

getFields() // see http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-getFields 

Hiện tại, cou có thể lặp qua trường và tắt chúng. Cũng lưu ý phương thức applyToFields() nơi bạn có thể truyền đối tượng của mình. Xem thông tin API: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-applyToFields

Chúc may mắn!

Answer 3

Để thêm các thành phần và trường vào bảng biểu mẫu theo cách thủ công, trước tiên hãy thực hiện getForm() trước. Đó là chủ yếu cho sự tiện lợi, và cho phép chức năng tiêu chuẩn để hoạt động đúng. Vì vậy, bất cứ thành phần nào bạn đã làm 'thêm' từ, lặp lại từ thành phần đó.

Ví dụ 1:

Thông thường bạn không nên sử dụng 'id' để có được một thành phần kể từ khi nó được đặt tự động. Nhưng điều này cho thấy cách bạn có thể có được bảng điều khiển biểu mẫu bằng cách sử dụng getCmp.

  var formPanel = Ext.getCmp('id-of-component'); 
      var fieldSet = Ext.create('Ext.form.FieldSet', { 
       title: 'field set'      
      }); 
      formPanel.add(fieldSet); 

Khi lặp lại, bạn sẽ làm điều này:

formPanel.each(function(item) { 
    alert(item.title); 
}); 

Ví dụ 2:

Trong ví dụ này, chúng ta thêm vào hình thức thực tế bản thân, do đó lặp đi lặp lại trông hơi khác nhau.

  var formPanel = Ext.getCmp('id-of-component'); 
      var fieldSet = Ext.create('Ext.form.FieldSet', { 
       title: 'field set'      
      }); 
      formPanel.getForm().add(fieldSet); 

Khi iterating, bạn sẽ làm điều này:

formPanel.getForm().each(function(item) { 
    alert(item.title); 
}); 

Answer 4

Đây là một giải pháp tốt hơn để vô hiệu hóa tất cả các lĩnh vực hình thức bên trong một bảng mẫu.

var formPanelName = Ext.ComponentQuery.query('#formPanelId field'); 
for(var i= 0; i < formPanelName.length; i++) { 
    formPanelName[i].setDisabled(true); 
} 

Chỉ cần tham chiếu đến các trường của bảng biểu mẫu. Lặp lại trên mỗi trường và sử dụng hàm setDisabled để thiết lập thuộc tính readOnly của nó thành true.

Bạn cũng có thể lấy thêm bộ và lấy toàn bộ Bảng điều khiển biểu mẫu. Giải pháp này ở trên chỉ lấy các phần riêng lẻ của bảng biểu mẫu theo ID của nó. extjs 4