[CLOSED] Setting Custom style for Combobx Item in Ext 4.5 version

Printable View

Jun 26, 2018, 10:44 AM
MOHAMMEDRAFI

[CLOSED] Setting Custom style for Combobx Item in Ext 4.5 version

Hi ,
We have a requirement to set the combo box item style as per customer address in MVC 4 Ext 4.5 version.
E.g Address: "United states,United states1, Alturas,Florida, 22222-2222,United States" this is single Item Bind in combobox(there are several item corresponds to customer order).
Once user click on combo box it should display as below:
"United states
United states1
Alturas
Florida
22222-2222
United States"
Note: In short Combobox styles depends on "," in address whenever there is comma then the item should be split to next line. But it has to display as one single item in selection.
Jun 26, 2018, 6:20 PM
fabricio.murta

Hello @MOHAMMEDRAFI!

I believe you want to customize your combo box like this: Example - Combo Box with Custom Dropdown List.

I hope I'm right, but if not, please let us know, and maybe add more details. Maybe with the example above you could draw something closer to what you need and let us know what's left and we could help with that.

Hope this helps!
Jul 13, 2018, 12:23 PM
MOHAMMEDRAFI

Thanks for info. But still our requirement is not full filled. We need to customize the address in combobox items list.
We have added the <br/> tag in source of combobox model. Now result is coming as expected.
Once user click first time then select event is fired. hence we are removing </Br> tag as below:

Code:

var onSelect = function (combo, record, index) { var valData = this.getRawValue(); var returndata = ''; for (var i = 0; i <= valData.split('<br />').length; i++) { returndata = valData + valData.split('<br />'); break; } this.setRawValue(returndata); }

If user reselect the same item from combobox then there is no event fired. Hence user able to see the <br/>.
can we re generate the select event on every click on user?. Is there any combobox event which fires every time when user click on combobox item.
Jul 13, 2018, 6:29 PM
fabricio.murta

Hello @MOHAMMEDRAFI!

I understand you are changing the record to contain what you want in the "pretty-printed" combo box dropdown list and want to trim out HTML when the entry is selected.

But if you're following that path, instead of replacing/splitting the record, why don't you have another model field with the "pretty-printed" for the combo? Then in the ItemTpl you add just the record field with the <br/>, and use the DisplayField in the combo box as the version without the HTML code.

In other words, have data like this:

Code:

- column1: S. Ashland Ave, 49 - Chicago - IL - column2: S. Ashland Ave<br/>49<br/>Chicago<br/>IL

Then use DisplayField="column1" and some ItemTpl like

Code:

<ListConfig> <ItemTpl runat="server"> <Html> <div class="list-item"> {column2} </div> </Html> </ItemTpl> </ListConfig>

If you had one column per field you could go further, e.g.:

Code:

- column1: S. Ashland Ave, 49 - Chicago - IL - street: S. Ashland Ave - stnum: 49 - city: Chicago - state: IL

Then you could split within the template like:

Code:

<ListConfig> <ItemTpl runat="server"> <Html> <div class="list-item"> {street}<br /> {stnum}<br /> {city}<br /> {state} </div> </Html> </ItemTpl> </ListConfig>

And add extra/css formatting to your heart's content. This ItemTpl contains text in the Ext.XTemplate format, which comes with a handful of features that may be just what you need.

I hope this helps!
Jul 28, 2018, 4:30 AM
fabricio.murta

Hello again, @MOHAMMEDRAFI!

It's been a while since we last replied your inquiry here and still no feedback from you. Do you still need help with this issue, or may we mark this as closed? We're looking forward to your feedback!

We may mark the thread as closed if you do not post a follow-up in 7+ days from now, but we won't lock it up, so you'll still be able to post afterwards.
Aug 01, 2018, 11:59 AM
MOHAMMEDRAFI

Issue has been resolved. You may close this thread.
Aug 01, 2018, 12:05 PM
fabricio.murta

Thanks for the feedback! Hope our responses helped with that.