I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated.
View the example on Fiddle
If you want to transform the input type combo into a div, follow these steps:
fieldSubTpl: [
'<div class="{hiddenDataCls}" role="presentation"></div>',
'<div id="{id}" type="{type}" style="background-color:white; font-size:1.1em; line-height: 2.1em;" ',
'<tpl if="size">size="{size}" </tpl>',
'<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
'class="{fieldCls} {typeCls}" autocomplete="off"></div>',
'<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">',
'{triggerEl}',
'<div class="{clearCls}" role="presentation"></div>',
'</div>', {
compiled: true,
disableFormats: true
}
],
To override the setRawValue method of the combo, use this code:
setRawValue: function (value) {
var me = this;
me.rawValue = value;
// Some Field subclasses may not render an inputEl
if (me.inputEl) {
// me.inputEl.dom.value = value;
// use innerHTML
me.inputEl.dom.innerHTML = value;
}
return value;
},
You can style your fake combo div as desired.
This approach is necessary because an input on HTML cannot have HTML content inside it.
Be aware that the getValue method will return the HTML inside the div. Consider overriding it if needed, but this is the only required method.
To get the selected value, use the following method:
Ext.fly(combo.getId()+'-inputEl').dom.innerHTML.replace(/<(.|\n)*?>/gm, '');
Consider creating a method like this for easier access:
combo.getMyValue();
Add this property to your combo:
getMyValue:function(){
var combo=this;
if(Ext.fly(combo.id+'-inputEl'))
return Ext.fly(combo.id+'-inputEl').dom.innerHTML.replace(/<(.|\n)*?>/gm, '');
},
Here is a working fiddle
My solution may seem like a hack, but it does work in version 6.7.0 and is simpler to implement. It has been tested on Chrome using the Material theme. Minor adjustments may be needed for other themes.
Check out the live example on Sencha Fiddle
https://i.sstatic.net/OSb0o.gif
Ext.application({
name: 'Fiddle',
launch: function () {
var store = new Ext.data.Store({
fields: [{
name: 'class',
convert: function (value, model) {
if (value && model) {
var name = value
.replace(/(-o-)|(-o$)/g, '-outlined-')
.replace(/-/g, ' ')
.slice(3)
.trim();
model.data.name = name.charAt(0).toUpperCase() + name.slice(1);
return value;
}
}
}, {
name: 'name'
}],
data: [{
class: 'fa-address-book'
}, {
class: 'fa-address-book-o'
}, {
class: 'fa-address-card'
}]
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
referenceHolder: true,
items: [{
xtype: 'combobox',
id: 'iconcombo',
queryMode: 'local',
editable: false,
width: 300,
valueField: 'class',
displayField: 'name',
store: store,
itemTpl: '<div><i class="fa {class}"></i> {name}</div>',
afterRender: () => {
var component = Ext.getCmp('iconcombo');
var element = document.createElement('div');
element.className = 'x-input-el';
element.addEventListener('click', () => component.expand());
component.inputElement.parent().dom.prepend(element);
component.inputElement.hide();
component.addListener(
'change', (me, newValue, oldValue) => {
component.updateInputValue.call(me, newValue, oldValue);
},
component
);
var method = component.updateInputValue;
component.updateInputValue = (value, oldValue) => {
method.call(component, value, oldValue);
var selection = component.getSelection();
if (selection) {
element.innerHTML =
'<div><i class="fa ' + selection.get('class') + '"></i> ' + selection.get('name') + '</div>';
}
};
}
}, {
xtype: 'button',
text: 'getValue',
margin: '30 0 0 0',
handler: function (component) {
var combo = Ext.getCmp('iconcombo');
alert(combo.getValue());
}
}]
});
form.show();
}
});
I am facing an issue with my flex items where some of them are displaying incorrectly in Chrome but fine in Firefox. The problem seems to be with the margin-right of the rectangle span within each flex item, along with the scaling of the text span due to f ...
Hey there, I'm currently working on a project using React and facing an issue with some buttons I've styled. Whenever I click on them, they show a strange blue border that I can't seem to get rid of. I've tried setting border:none !impo ...
Is there a way to increase the spacing between TableRow MaterialUI components in my code? <S.MainTable> <TableBody> {rows.map(row => { return ( <S.StyledTableRow key={row.id}> <TableCell component="th" s ...
My CSS code is currently only centering on a certain type of screen, but I want it to be centered on any screen. Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); html{ font-family: "HelveticaNeue-Light" ...
Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...
JSBIN Is it possible to center the number row without using JavaScript to calculate its position, considering its parent has a fixed attribute? I've tried using CSS properties like margin and text-align with no success. Any suggestions on achieving t ...
My goal is to create a dynamic animation effect on a string when a user hovers over it. This involves turning the string into an array and applying different animations to each letter. Although the animations are working perfectly, I'm facing one issu ...
https://jsfiddle.net/30suam6z/1/ .first { height: 100vh; background-color: red; position: relative; z-index: 2; /* Increase z-index to ensure it covers .test */ } .second { height: 100vh; background-color: yellow; position: relative; z- ...
Can someone provide guidance on how to float navbar items to the right instead of the left? I have tried using the floats and float-right classes, but it seems that pull-right is deprecated. Any help would be greatly appreciated. <header class="conta ...
How can I change the color of the hamburger menu icon's lines for medium and smaller screen sizes? I have attempted changing it through style attributes and using !important in my CSS file, but so far nothing has been successful. ...
Struggling with creating a menu containing nested lists. Attempted using a child selector (#menu-novo li:hover > ul) to display only immediate descendants, but all are still showing. Any suggestions or solutions for this issue? #menu-novo-container { ...
Check out this code snippet <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/sub-cat.css"> I am having trouble with my CSS. I tried to modify the "Caption" class in Bootstrap by adding some new styles in "sub- ...
One cool feature on my blog is the codebox where I can insert snippets of HTML, CSS, and Javascript codes. Here's an example of how my CSS code looks: .post blockquote { background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tr ...
I'm having trouble getting my dropdown menu to work properly and I can't figure out why. The JavaScript code should toggle a class that hides the language options and slides up the other tabs like "Contact". However, when I click the button, noth ...
I have been working on creating a Bootstrap grid with the following structure: .facevalue { background: #ffffff61; font-family: Dubai; font-size: 18px; font-weight: 400; line-height: 30px; padding: 0 30px; border: 1px solid #e9e9e9; ma ...
Is there a way to create a single scrolling page with a fixed element that remains visible as the user scrolls down? Imagine an image of a car on a road, where the car appears to be moving down the road as the user scrolls. The car should go under certain ...
Although I have come across similar questions to the one I am facing, none of the solutions provided seem to work for me at the moment. My CSS file loads and functions as expected when tested locally, but once I upload it to GitHub, it stops working. In my ...
The custom recaptcha theme I'm working with requires the image to be smaller in width but not in height. Is there a way to achieve this requested design? ...
I have developed a dynamic graph that continuously updates with new data points being plotted. Right now, I am utilizing requestAnimationFrame() to render the element positions 30 times per second, but performance can be sluggish with numerous SVG element ...
Is there a way to modify the style of checkboxes in filtering? For instance, if I wish to adjust the dimensions of the checkbox that appears for the Birth Place field, what steps should I take? https://i.stack.imgur.com/pZLqQ.png ...