View Full Version : Using YUI autocoplete inside ext panel?

30 Nov 2010, 12:49 PM
Can anyone tell me if it is possible to use YUI autocomplete inside ext panel inside some ext layout using YUI adapters? I tried doing this sometime back but failed. I have the same requirement now, I lost that code, sorry, I have no code to post right now. But please let me know if you have any ideas or if you have done it before. I want to give YUI look and feel to my autocomplete textboxes - something like the tag autocomplete textbox while posting a new thread in this forum.

30 Nov 2010, 1:58 PM
It might be possible. Do you have sample code that is breaking? Alternatively, you could use an Ext and style your auto-complete drop down with CSS and Ext.XTemplate.

1 Dec 2010, 7:04 AM
I do not have the sample code now, I wrote it long back and I was unable to find it now. Using styling might be a good idea. I will try that out. Thanks.

1 Dec 2010, 7:13 AM
Why not use a ComboBox?

1 Dec 2010, 11:06 AM
Yes, I am doing that right now. I just wanted to style it a bit and wanted to make it look exactly like that of YUI autocomplete. I searched a lot but I was unable to find a way to override the itemSelector. My requirements are to
1. Remove the dotted rectangle which appears around the items within the extjs combo box when highlighting the items.
2. Change the highlight color to a different one.
3. Remove the vertical scroll bars in combo dropdown. It is always appearing regardless of the number of items.
The rest of the things are working fine except these. Can someone please tell me how I can override the CSS? I also tried searching div.search-item in extjs file but could not find any.

2 Dec 2010, 7:49 AM
Anyone please? A small hint would be enough!

2 Dec 2010, 10:25 AM
I was able to resolve some of the things. I was using a XTemplate and I was seeing vertical scroll bars everytime, even for two items in the combo. I removed the XTemplate and the scroll bars were gone. For changing the color, I edited xtheme-gray.css file and set .x-combo-list .x-combo-selected as

.x-combo-list .x-combo-selected{
border-color:#777 !important;
color: #ffffff;
Finally, I was unable to remove the dotted rectangle appearing around every selected item in the combo. But, since the highlight color I selected was dark, the rectangle is somewhat hidden.