ExtJS4: Cách hiển thị thông báo lỗi xác thực bên cạnh hộp văn bản, hộp tổ hợp, v.v.

Question

Tôi cần triển khai thông báo xác thực xuất hiện ngay bên cạnh trường không hợp lệ. Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

msgTarget: 'side' sẽ Thêm biểu tượng lỗi ở bên phải của trường, hiển thị thông báo trong cửa sổ bật lên khi di chuột.

nếu bạn đọc tài liệu một cách cẩn thận, thêm một lựa chọn là có cho msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget

[yếu tố id] Thêm thông báo lỗi trực tiếp đến innerHTML của phần tử cụ thể. bạn phải thêm "td" vào bên phải của điều khiển động với id. sau đó nếu bạn chỉ định msgTarget: 'element id' nó sẽ hoạt động.

Answer 2

Xem cấu hình của điều khiển msgTarget. msgTarget: 'side' sẽ đặt thông báo xác thực ở bên phải của điều khiển.

Answer 3

msgTarget: 'elementId' có thể hoạt động, nhưng dường như rất hạn chế, đặc biệt khi bạn muốn nhiều phiên bản của một thành phần ExtJs có thể tái sử dụng (và cho nhiều phiên bản của cùng một phần tử msgTarget). Ví dụ: tôi có trình chỉnh sửa kiểu MDI, nơi bạn có thể mở nhiều trình chỉnh sửa của một loại trong giao diện tab. Nó cũng có vẻ không hoạt động với itemId hoặc nhận ra phân cấp DOM/vùng chứa.

Tôi muốn tắt xử lý mặc định nếu tôi không muốn chính xác một trong các tùy chọn hiển thị thông báo được cài đặt bằng cách đặt msgTarget: none và sau đó thực hiện hiển thị thông báo của riêng mình bằng cách xử lý sự kiện fielderrorchange. . Trong trường hợp này, bây giờ tôi có thể tôn trọng hệ thống phân cấp của biểu mẫu của tôi ngay cả với nhiều phiên bản của cùng một biểu mẫu trình chỉnh sửa vì tôi có thể chọn phần tử hiển thị lỗi liên quan đến trình chỉnh sửa.

Đây là cách tôi làm điều đó:

{ 
    xtype: 'fieldcontainer', 
    fieldLabel: 'My Field Label', 
    layout: 'hbox', // this will be container with 2 elements: the editor & the error 
    items: [{ 
     xtype: 'numberfield', 
     itemId: 'myDataFieldName', 
     name: 'myDataFieldName', 
     width: 150, 
     msgTarget: 'none', // don't use the default built in error message display 
     validator: function (value) { 
      return 'This is my custom validation message. All real validation logic removed for example clarity.'; 
     } 
    }, { 
     xtype: 'label', 
     itemId: 'errorBox', // This ID lets me find the display element relative to the editor above 
     cls: 'errorBox'  // This class lets me customize the appearance of the error element in CSS 
    }], 
    listeners: { 
     'fielderrorchange': function (container, field, error, eOpts) { 
      var errUI = container.down('#errorBox'); 
      if (error) { 
       // show error element, don't esape any HTML formatting provided 
       errUI.setText(error, false); 
       errUI.show(); 
      } else { 
       // hide error element 
       errUI.hide(); 
      } 
     } 
    } 
} 

Answer 4

Sử dụng msgTarget 'bên' để xác nhận ở phía bên phải và msgTarget 'dưới' cho đáy

 items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       allowBlank: false, 
       name: 'name', 
       msgTarget: 'side', 
       blankText: 'This should not be blank!' 
      }] 

Answer 5

Bạn có thể sử dụng 'msgTarget: [yếu tố id ] '. Bạn phải viết html để sử dụng id phần tử thay vì itemId. Hàm xác nhận bổ sung thêm một phần tử danh sách trong một phần tử mà bạn đã đặt làm 'msgTarget'. Trong trường hợp bạn muốn hiển thị các phần tử mà bạn muốn xác thực, bạn có thể chuyển html thay vì chỉ một văn bản.

{ 
    xtype: 'container', 
    items: [ 
     { 
      xtype: 'textfield', 
      allowBlank: false, 
      msgTarget: 'hoge' 
      blankText: '<div style="color:red;">validation message</div>', // optional 
     }, 
     { 
      xtype: 'box', 
      html: '<div id="hoge"></div>' // this id has to be same as msgTarget 
     } 
    ] 
} 

Answer 6

Để hiển thị thông báo lỗi dưới/bên đầu vào hộp văn bản, msgTarget bất động sản sẽ làm việc chỉ trong trường hợp bạn đang sử dụng cách bố trí hình thức.

Để giải quyết vấn đề này ngoài bố cục biểu mẫu, chúng ta cần bọc phần tử trong lớp "x-form-field-wrap".

bạn có thể tìm thêm về chủ đề: https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem