Làm thế nào để hạn chế số lượng các phần tử trong multifield trong CQ5?

Question

Tôi phát triển trang web với Ngày CQ5 và đã gặp phải sự cố. Tôi đang tạo một thành phần và đối thoại cho nó. Tôi sử dụng trong hộp thoại cho phần tử thành phần "multifield", chứa một số phần tử "pathfield". Làm thế nào tôi có thể thiết lập một số lượng cụ thể của các yếu tố "pathfield" và loại bỏ các nút "+" và "-"?

Answer 1

tôi đã đi qua vấn đề này chính xác trong tuần này :)

Dường như theo mặc định bạn không thể giới hạn số lượng các hạng mục biên tập viên có thể nhập. Để giải quyết vấn đề, tôi đã tạo ra một lớp phủ của Multifield.js đặt ở

/apps/cq/ui/widgets/source/widgets/form/MultiField.js 

Tôi đã thêm một tấm séc cho một 'giới hạn' tài sản đặt trên nút fieldConfig dưới multifield. Nếu hiện tại & không bằng 0, nó sẽ sử dụng số này làm số lượng trường tối đa mà người dùng có thể thêm.

Không muốn để có được vào vấn đề bản quyền bằng cách đăng toàn bộ lớp phủ, nhưng những thay đổi tôi đã thực hiện nơi như sau:

Trong constructor (dòng # 53), thêm vào một tấm séc để có được giá trị của giới hạn từ nút fieldConfig:

if (!config.fieldConfig.limit) { 
     config.fieldConfig.limit = "0"; 
} 

Trong xử lý cho nút "+" (dòng # 71) thay đổi các chức năng như sau:

if(config.fieldConfig.limit == 0 || list.items.getCount() <= config.fieldConfig.limit) { 
    list.addItem(); 
} else { 
    CQ.Ext.Msg.show({ 
     title: 'Limit reached', 
     msg: 'You are only allowed to add ' + config.fieldConfig.limit + 
      ' items to this module', 
     icon:CQ.Ext.MessageBox.WARNING, 
     buttons: CQ.Ext.Msg.OK 
    }); 
} 

thay vì loại bỏ các nút, Tôi vừa tạo cửa sổ bật lên để thông báo cho người chỉnh sửa rằng 'N là số trường tối đa được phép'.

Thay đổi đơn giản nhưng thực hiện công việc! Hy vọng điều này là sử dụng.

Answer 2

Tôi chưa tìm thấy giải pháp chuẩn cho vấn đề này, nhưng đã đưa ra một mẹo nhỏ. Lúc đầu, tôi thêm số lượng yêu cầu của các yếu tố con thông qua một cuộc đối thoại của thành phần. Và sau đó tôi thêm thuộc tính "class" vào phần tử "multifield", ví dụ "sliderpanel-dialog-multifield". Sau đó, tôi thêm vào cấu trúc CSS kiểu thành phần như vậy:

.sliderpanel-dialog-multifield .x-btn{ 
    display: none; 
} 

".x-btn" là lớp sử dụng các nút trong CQ5. Sau đó, các nút sẽ bị ẩn và bạn không thể thêm hoặc loại bỏ các phần tử trong multifield. Tôi có một gợi ý rằng vấn đề này có thể được giải quyết với sự giúp đỡ của người nghe và kịch bản, nhưng nó sẽ khó giải quyết hơn, mà tôi đã trích dẫn ở trên. Tôi đã tập trung vào phiên bản này, nhưng nếu bạn có những ý tưởng khác, tôi sẽ rất muốn biết chúng.

Answer 3

Bạn cũng có thể thêm người nghe song song với nút đa năng. Ví dụ

sự kiện: beforeadd

Chức năng:

function(list,component,index) { 
    if(this.fieldConfig.limit!=0) { 
     if(this.fieldConfig.limit == (list.items.getCount()-1)) { 
      CQ.Ext.Msg.show(
       {title: 'Limit reached', msg: 'You are only allowed to add '+this.fieldConfig.limit+' items to this module',icon:CQ.Ext.MessageBox.WARNING,buttons: CQ.Ext.Msg.OK} 
      );;return false; 
     } 
    } 
} 

Điều kiện tiên quyết: Thêm giá trị giới hạn cho fieldConfig của multifield.

Answer 4

Dường như có sự cố với giải pháp beforeadd: biểu mẫu/hộp thoại trở thành trạng thái không hợp lệ, yêu cầu chúng tôi sửa các trường được đánh dấu ... nhưng mọi thứ đều chính xác.

Có cách nào để khởi tạo lại xác thực biểu mẫu không?

Answer 5

Tham khảo bài đăng này nơi tôi đã triển khai chức năng bằng cách xóa nút Thêm mục sau khi đạt đến giới hạn.

http://letsaem.blogspot.in/2015/12/add-limit-to-number-of-elements-in.html

Tuy nhiên quá trình thực hiện là:

1. Add hạn ** (dài) ** sở hữu đến nút fieldConfig
2. Thêm thính nút để các xtype multifield và thêm các thính giả sau đây .

removeditem:

function(list) { 
    var length = list.items.length; 
    if (length <= list.fieldConfig.limit) { 
    list.items.items[length - 1].show(); 
    } 
} 

beforeadd:

function(list, component, index) { 

    var length = list.items.length; 
    var addButton = list.items.items[length - 1]; 
    if (length == list.fieldConfig.limit) { 
     addButton.hide(); 
    } 
} 

Bây giờ nếu bạn đưa ra giới hạn: 3

Các nút Add item sẽ biến mất sau khi thêm 3 mục

Nút thêm mục biến mất: