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

  1. #1

    [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.
    Last edited by fabricio.murta; Aug 01, 2018 at 1:06 PM.
  2. #2
    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!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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:
    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.
  4. #4
    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:

    - 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

    <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.:

    - 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:
    <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!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    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.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Issue has been resolved. You may close this thread.
  7. #7
    Thanks for the feedback! Hope our responses helped with that.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Searchable combobx
    By Geovision in forum 4.x Premium Help
    Replies: 1
    Last Post: Apr 07, 2016, 9:07 PM
  2. [CLOSED] Style changed after upgrade to latest version
    By jchau in forum 2.x Premium Help
    Replies: 7
    Last Post: Feb 18, 2013, 8:51 PM
  3. [CLOSED] Item disable style stopped working
    By supera in forum 2.x Premium Help
    Replies: 5
    Last Post: Jan 24, 2012, 7:51 AM
  4. Replies: 3
    Last Post: May 20, 2011, 9:55 PM
  5. Custom style for selected ComboBox item
    By nextSTEP in forum 1.x Help
    Replies: 1
    Last Post: Sep 20, 2010, 1:18 PM

Posting Permissions