Search the Community

// TUniCheckComboBox function afterrender(sender, eOpts) { var me = sender; if (me._customHeaderAdded) { return; } me._customHeaderAdded = true; var showCount = 1; var showTotal = 1; var _insertEditField = function() { var _id = me.getPicker().id; me._customPickerId = _id; var getSelectedCount = function() { var count = 0; var allItems = me.getPicker().el.query('.x-boundlist-item'); for (var i = 0; i < allItems.length; i++) { if (isItemSelected(allItems[i])) { count++; } } return count; }; var getTotalCount = function() { var allItems = me.getPicker().el.query('.x-boundlist-item'); return allItems.length; }; var updateSelectAllButtonText = function() { var selectAllButton = Ext.get(_id + '_selectAllButton'); if (selectAllButton && selectAllButton.dom) { if (showCount === 1) { var selectedCount = getSelectedCount(); if (showTotal === 1) { var totalCount = getTotalCount(); selectAllButton.dom.innerHTML = 'Все(' + selectedCount + '/' + totalCount + ')'; } else { selectAllButton.dom.innerHTML = 'Все(' + selectedCount + ')'; } } else { selectAllButton.dom.innerHTML = 'Все'; } } }; var selectAllFlex = (showCount === 1) ? '2' : '1'; var deselectAllFlex = '1'; var headerContainer = Ext.DomHelper.insertFirst(_id, { tag: 'div', cls: 'custom-header-container', style: 'border-bottom: 1px solid #ddd; background: white;', children: [{ tag: 'div', style: 'padding: 5px;', children: [{ tag: 'div', style: 'position: relative; margin-bottom: 5px;', children: [{ tag: 'input', type: 'text', id: _id + '_filterEdit', placeholder: 'Поиск...', style: 'width: 100%; padding: 4px; padding-right: 25px; box-sizing: border-box;' }, { tag: 'div', html: '×', id: _id + '_clearButton', style: 'position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #999; font-size: 16px; font-weight: bold; display: none;' }] }, { tag: 'div', style: 'display: flex; justify-content: space-between; gap: 4px;', children: [{ tag: 'button', type: 'button', id: _id + '_selectAllButton', html: (showCount === 1) ? ((showTotal === 1) ? 'Все(0/0)' : 'Все(0)') : 'Все', style: 'flex: ' + selectAllFlex + '; min-width: 0; padding: 4px 2px; background: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' }, { tag: 'button', type: 'button', id: _id + '_deselectAllButton', html: 'Ничего', style: 'flex: ' + deselectAllFlex + '; min-width: 0; padding: 4px 2px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' }] }] }] }); var filterField = Ext.get(_id + '_filterEdit'); var clearButton = Ext.get(_id + '_clearButton'); var selectAllButton = Ext.get(_id + '_selectAllButton'); var deselectAllButton = Ext.get(_id + '_deselectAllButton'); me._customComponents = { filterField: filterField, clearButton: clearButton, selectAllButton: selectAllButton, deselectAllButton: deselectAllButton, headerContainer: headerContainer }; var headerHeight = headerContainer.offsetHeight; var adjustPickerHeight = function() { setTimeout(function() { var picker = me.getPicker(); if (picker) { var originalHeight = 300; var listHeight = originalHeight - headerHeight; var listEl = picker.el.down('.x-boundlist-list-ct'); if (listEl) { listEl.setHeight(listHeight); } picker.setHeight(originalHeight); } }, 50); }; var clearFilter = function() { filterField.dom.value = ''; filterField.focus(); clearButton.hide(); var items = me.getPicker().el.query('.x-boundlist-item'); for (var i = 0; i < items.length; i++) { items[i].style.display = ''; } }; var isItemSelected = function(item) { var checkbox = item.querySelector('input[type="checkbox"]'); if (checkbox) { return checkbox.checked; } if (item.classList.contains('x-boundlist-selected') || item.classList.contains('x-checkbox-checked') || item.getAttribute('aria-selected') === 'true' || item.getAttribute('aria-checked') === 'true') { return true; } var styles = window.getComputedStyle(item); if (styles.backgroundColor !== 'transparent' && styles.backgroundColor !== 'rgba(0, 0, 0, 0)' && styles.backgroundColor !== '') { return true; } return false; }; var bulkSelection = function(select) { var visibleItems = me.getPicker().el.query('.x-boundlist-item:not([style*="display: none"])'); var store = me.getStore(); var values = me.getValue() || []; var newValues = select ? [] : values.slice(); if (select) { for (var i = 0; i < visibleItems.length; i++) { var item = visibleItems[i]; var recordIndex = item.getAttribute('data-recordIndex') || Array.prototype.indexOf.call(item.parentNode.children, item); var record = store.getAt(recordIndex); if (record) { var value = record.get(me.valueField || me.displayField); if (newValues.indexOf(value) === -1) { newValues.push(value); } } } } else { for (var i = 0; i < visibleItems.length; i++) { var item = visibleItems[i]; var recordIndex = item.getAttribute('data-recordIndex') || Array.prototype.indexOf.call(item.parentNode.children, item); var record = store.getAt(recordIndex); if (record) { var value = record.get(me.valueField || me.displayField); var valueIndex = newValues.indexOf(value); if (valueIndex !== -1) { newValues.splice(valueIndex, 1); } } } } me.setValue(newValues); setTimeout(function() { updateSelectAllButtonText(); if (filterField && filterField.dom) { filterField.focus(); } }, 50); }; var selectAllVisible = function() { bulkSelection(true); }; var deselectAllVisible = function() { bulkSelection(false); }; clearButton.on('click', clearFilter); selectAllButton.on('click', selectAllVisible); deselectAllButton.on('click', deselectAllVisible); filterField.on('keyup', function() { var searchText = filterField.dom.value.toLowerCase(); if (searchText.length > 0) { clearButton.show(); } else { clearButton.hide(); } var items = me.getPicker().el.query('.x-boundlist-item'); for (var i = 0; i < items.length; i++) { var text = items[i].textContent || items[i].innerText; if (text.toLowerCase().indexOf(searchText) !== -1) { items[i].style.display = ''; } else { items[i].style.display = 'none'; } } }); me.getPicker().el.on('click', function(event) { var target = event.target; var item = target.closest('.x-boundlist-item'); if (item) { setTimeout(function() { updateSelectAllButtonText(); }, 10); } }); me.on('expand', function() { setTimeout(function() { updateSelectAllButtonText(); if (filterField && filterField.dom) { filterField.focus(); } }, 100); }); me.on('collapse', function() { filterField.dom.value = ''; clearButton.hide(); var items = me.getPicker().el.query('.x-boundlist-item'); for (var i = 0; i < items.length; i++) { items[i].style.display = ''; } }); adjustPickerHeight(); me.on('expand', adjustPickerHeight); me.getPicker().un('show', _insertEditField); }; me.getPicker().on('show', _insertEditField); me.on('destroy', function() { if (me._customComponents) { try { if (me._customComponents.filterField) { me._customComponents.filterField.destroy(); } if (me._customComponents.clearButton) { me._customComponents.clearButton.destroy(); } if (me._customComponents.selectAllButton) { me._customComponents.selectAllButton.destroy(); } if (me._customComponents.deselectAllButton) { me._customComponents.deselectAllButton.destroy(); } if (me._customComponents.headerContainer) { me._customComponents.headerContainer.destroy(); } } catch (e) { console.log('Error during cleanup:', e); } me._customComponents = null; } me._customHeaderAdded = false; }); } // TUniComboBox function afterrender(sender, eOpts) { var me = sender; if (me._searchFieldAdded) { return; } me._searchFieldAdded = true; var _insertSearchField = function() { var _id = me.getPicker().id; if (Ext.get(_id + '_filterEdit')) { return; } var headerContainer = Ext.DomHelper.insertFirst(_id, { tag: 'div', cls: 'custom-header-container', style: 'border-bottom: 1px solid #ddd; background: white;', children: [{ tag: 'div', style: 'padding: 5px;', children: [{ tag: 'div', style: 'position: relative; margin-bottom: 5px;', children: [{ tag: 'input', type: 'text', id: _id + '_filterEdit', placeholder: 'Поиск...', style: 'width: 100%; padding: 4px; padding-right: 25px; box-sizing: border-box;' }, { tag: 'div', html: '×', id: _id + '_clearButton', style: 'position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #999; font-size: 16px; font-weight: bold; display: none;' }] }] }] }); var filterField = Ext.get(_id + '_filterEdit'); var clearButton = Ext.get(_id + '_clearButton'); var headerHeight = headerContainer.offsetHeight; var adjustPickerHeight = function() { setTimeout(function() { var picker = me.getPicker(); if (picker) { var originalHeight = 300; var listHeight = originalHeight - headerHeight; var listEl = picker.el.down('.x-boundlist-list-ct'); if (listEl) { listEl.setHeight(listHeight); } picker.setHeight(originalHeight); } }, 50); }; var clearFilter = function() { filterField.dom.value = ''; filterField.focus(); clearButton.hide(); var items = me.getPicker().el.query('.x-boundlist-item'); items.forEach(function(item) { item.style.display = ''; }); }; clearButton.on('click', clearFilter); filterField.on('keyup', function() { var searchText = filterField.dom.value.toLowerCase(); if (searchText.length > 0) { clearButton.show(); } else { clearButton.hide(); } var items = me.getPicker().el.query('.x-boundlist-item'); items.forEach(function(item) { var text = item.textContent || item.innerText; if (text.toLowerCase().indexOf(searchText) !== -1) { item.style.display = ''; } else { item.style.display = 'none'; } }); }); me.on('expand', function() { setTimeout(function() { if (filterField && filterField.dom) { filterField.focus(); } }, 100); }); me.on('collapse', function() { filterField.dom.value = ''; clearButton.hide(); var items = me.getPicker().el.query('.x-boundlist-item'); items.forEach(function(item) { item.style.display = ''; }); }); adjustPickerHeight(); me.on('expand', adjustPickerHeight); me.on('destroy', function() { if (filterField) { filterField.destroy(); } if (clearButton) { clearButton.destroy(); } if (headerContainer) { Ext.get(headerContainer).destroy(); } me.un('expand', adjustPickerHeight); me.un('collapse'); me.getPicker().un('show', _insertSearchField); }); me.getPicker().un('show', _insertSearchField); }; me.getPicker().on('show', _insertSearchField); }

Hello, Columns of TUniDGGrid have property AllowHtml, that by default is True. If I set it to False it won't try to convert HTML/JavaScript code of field value when DBGrid is refresh. If "BAD" user save text in field value is shown in TUniDBGrid the follow code won't load any alert dialog on screen (if column.AllowHtml=False😞 ">Desc<img src="x" onerror=alert("hello")> Is there any possibility to do the same on TUniComboBox and TUniDBComboBox as well? Because, if there is TuniComboBox.Items have any line like (">Desc<img src="x" onerror=alert("hello")>) when user open combobox list items it will popup dialog like: Could you please help me out with follow issue I have got? Is it any solution to do the same as in TUniDBGrid's Column? Thank you in advance. Kind Regards

Есть небольшой проект (пример), как использовать стандартный uniComboBox для выбора цвета с помощью готовых констант TAlphaColor. Но есть и проблема: не получается правильно установить и перерисовать цвет программно. Для воспроизведения выберите в списке какой-нибудь текст, а потом нажмите кнопку Установить (красный) цвет. Буду благодарен, если подскажите, что и где дописать/переписать, чтобы можно было и программно устанавливать цвет в TuniComboBox. UniGUI_ColorComboBox.zip

Hello everyone finally I'm using this library to a project. I ask you to have a component as TUniDBComboBox /TUniComboBox that besides having the property Items has properties by Values to display a label and set in the database a different value, Thank you <ul class="x-list-plain"> <li value="C">Coffee</li> <li value="T">Tea</li> <li value="M">Milk</li> <li value="W">Water</li> <li value="J">Juice</li> <li value="B">Beer</li> <ul>

I have a Combobox which needs to be repopulated dinamically, that is, the user type 3 characters in the ComboBox and press the return key. In this moment a query is executed and the Combobox needs to be populated with the items resulted by that query. The problem that I found is that the ComboBox.Items.Clear doesn't have the expected effect. Here is a simple example: Add a TUniComboBox On the OnKeyDown method, add the code: if Key=VK_RETURN then begin UniComboBox1.Items.Clear; UniComboBox1.Items.Add('RIO DE JANEIRO'); UniComboBox1.Items.Add('RIO GRANDE DO SUL'); UniComboBox1.Items.Add('RIO GRANDE DO NORTE'); end; Run the program Inside the ComboBox, type "RIO" and press the return key: it will appear 3 items at the ComboBox Edit the typed text to "RIOS" and press the return key again In this moment I expected that the Combobox was cleared and populated with the 3 options, but the result obtained is that the ComboBox has 6 items, as if the "UniComboBox1.Items.Clear" instruction had been ignored. Thanks in advance!

Hi , Do we have CharEOL mechanism with TUniComboBox like this in TUniEdit. Thanks

Please Farshad Mohajeri, Add the property to TUniDBLookupComboBox as exists in TUniComboBox to add button on control to search.