Tôi đang tìm điều khiển hộp tổ hợp EXTJS4 cho phép chọn nhiều mục qua hộp kiểm bên trong.Hộp tổ hợp ExtJs 4 có hộp kiểm
Thực ra tôi cần điều khiển này http://lovcombo.extjs.eu/ nhưng nó được triển khai cho ExtJs3. Tôi đã cố gắng chuyển đổi nó sang ExtJs4 nhưng nhiệm vụ không thực sự tầm thường.
Bạn có thể đề xuất thành phần tương tự cho ExtJs4 không. Hoặc có lẽ bạn có thể chỉ cho tôi một số hướng dẫn hoặc ví dụ - làm thế nào để làm những việc như vậy?
- lưới sử dụng với checkboxselectmodel trong combox
Kết hợp nhiều lựa chọn với bộ kiểm tra x trong ExtJS4.0 có thể đạt được với thêm vài dòng mã.
Về cơ bản, bạn cần sử dụng lớp css hiện có được áp dụng trong quá trình lựa chọn và bỏ chọn một mục và đẩy hình ảnh (hình ảnh hộp kiểm) tại thời điểm đó cho phù hợp.
"x-boundlist mục" và "x-boundlist chọn" là những lớp học lấy từ ext-all.css.
<style>
.x-boundlist-item img.chkCombo {
background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/unchecked.gif);
}
.x-boundlist-selected img.chkCombo{
background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/checked.gif);
}
</style>
<head>
Ext.create('Ext.form.ComboBox', {
id: 'BCCAddress',
name: 'BCCAddress',
maxHeight: 150,
width: 210,
multiSelect: true,
emptyText : "Select Bcc email addresses",
renderTo: 'extBCCAddress',
store: myArrayStore,
displayField: 'fieldName',
valueField: 'fieldName',
forceSelection: true,
editable: false,
mode: 'local',
triggerAction: 'all',
listConfig : {
getInnerTpl : function() {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
}
}
});
[dưới đây là hình ảnh của thành phần tùy chỉnh này]
Tôi đang sử dụng v4.2.1.883 (không chắc chắn nếu nó quan trọng) nhưng đoạn mã trên không hoạt động cho đến khi tôi thêm chiều cao và chiều rộng 16px cho mỗi kiểu trên. Tôi cũng đã chuyển hình ảnh vào thư mục/Hình ảnh của tôi (không chắc chắn rằng điều đó có quan trọng không). Tôi thực sự tự hỏi những gì sẽ là một cách tốt hơn để làm điều này để bạn không cần phải tham khảo mã cứng để đường dẫn tài nguyên extjs? –
Trong ExtJS 4.2.1 (và các phiên bản khác có thể), bạn không cần phải mã cứng đường dẫn tài nguyên. Thay vào đó, hãy đặt kiểu cho tệp SCSS (ví dụ: sass/etc/all.scss) và sử dụng "background: transparent url (images/menu/checked.gif);". Có vẻ như trong 4.2.1, chúng ta phải đưa ra một chiều rộng và chiều cao 16px như Peter đã đề cập. –
@PeterKellner nói, Bạn phải thêm chiều cao và chiều rộng 16px vào phong cách của mình. Nó được làm việc với tôi trên extjs 4.2.2. –
tôi thấy thành phần này, và tôi nghĩ rằng đó là tuyệt vời. Nhưng tôi cần chính xác combobox với hộp kiểm. Đó là một yêu cầu. Dù sao cũng cảm ơn bạn. –
thử cách thứ hai. hoặc chờ một lúc, sẽ có người chuyển lovcombo lên 4.x :) – atian25