Results 1 to 8 of 8

Thread: Blank Text Item in Combo Box

  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    73

    Default Blank Text Item in Combo Box

    Following on from http://extjs.com/forum/showthread.php?p=196077 (apologies for the new thread, I don't have access to the premium forums), all seem to be in agreement that a workaround in the core for displaying a blank item in a combobox is worthwhile, but in the meantime what's the workaround? I've tried various combinations of the tpl config option for the ComboBox and I can't get my blank item to display correctly. Could one of the gurus add a simple example to the feature suggestion thread showing how to get around this problem until it makes it into the core?

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    Use '&nbsp'. Someone posted this in the bug forums I think.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    73

    Default

    evant,

    Thanks, but as mentioned in this thread: http://extjs.com/forum/showthread.php?p=195882, if you use   the blank line is displayed correctly in the ComboBox dropdown list, but when you select it, instead of displaying the ComboBox's emptyText config, it displays " " as literal text - not exactly what you want.

    Essentially, I need a ComboBox with a blank line at the top which clears the selection and returns the ComboBox's display to emptyText, and so far have found no way of doing it.

    -William

  4. #4

    Default

    PHP Code:
    var store = new Ext.data.SimpleStore({
            
    fields: ['value''name'],
            
    data : [
              [-
    1,""],//the blank item
              
    [0,"aaa"],
              [
    1,"bbb"]
            ]
        });
        var 
    combo = new Ext.form.ComboBox({
            
    storestore,
            
    //code from this post: https://extjs.com/forum/showthread.php?p=249314#post249314
            
    tpl'<tpl for="."><div class="x-combo-list-item">{name:defaultValue("&nbsp;")}</div></tpl>',
            
    displayField:'name',
            
    typeAheadtrue,
            
    mode'local',
            
    forceSelectiontrue,
            
    triggerAction'all',
            
    emptyText:'Select a state...',
            
    selectOnFocus:true,
            
    renderTodocument.body
        
    }); 

  5. #5
    Sencha User GraemeBryce's Avatar
    Join Date
    Sep 2007
    Location
    Scotland
    Posts
    89

    Default

    This post still lacks an adequate solution. As I understand it the requirement is to have the combo, subject to config, to render one more row than the rows in the data and so allow the user to set a blank value. It is not really a solution to have the data store pass an additional blank row.

    I see a number of posts on the subject but none appear to offer a simple and elegant solution.

    Perhaps a "nullvalue" plugin?

    I would think there is sufficient demand for this to have a config option added to the combo in the core.

  6. #6
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243

    Default Add a top level entry with no value but a display value

    I had to modify the Combo to work correctly in this case. I call it correctly because the Combo implementation was all wrong and I had to change quite a bit for it to work as I would expect. This is one area where I think the out of box ExtJS should be improved. That said - now the backwards implementation of combo has to stay that way to be "backward compatible". [end rant .. now for my solution]

    Summary of what works for me:
    - All my combo boxes use a multi-value array. Even if set with a single, my code creates the multi-value array.
    - I update the combo to return the value, not the display value. (see override below)
    - I add a new entry to the top of the existing combo dropdown with a blank value and a non-blank display value as shown below. Also updated is the emptyText text to match.

    The Code

    Add this to the top of the store values.
    Code:
    ['', '-select one-'];
    ... then also set emptyText to the same value ...

    Code:
    yourcombo.emptyText = '-select one-'
    I also have a fix where the combo returns the actual value. I have no reason to use the display value .. if the value is blank - I want a blank value - not the words ('select one'). Also, I need the actual data for all my activities - not the display value.

    My Override for that ..

    Code:
    /*
    * Fix issue with combo box not returning the display value but instead of the value
    */
    Ext.form.ComboBox.override({
        processValue: function(v) {
            var v = Ext.form.ComboBox.superclass.processValue.call(this, v);
            if (this.valueField == 'value') {
    
                var r = this.findRecord(this.displayField, v);
                var text = v;
                if (r) {
                    text = r.data[this.valueField];
                };
                return text;
            };
            return v;
        }
    });
    With that override for combo and taking those actions for setting up your combo store and emptyText should provide you the combo box that works as you may expect. If you are using the "return display value (feature)" then the override will break your code.

    If this is not clear and a demo is needed, I'll post one when I have the time, just reply here.
    Joseph Francis,
    CoreLan / Meeting Consultants

  7. #7
    Sencha User GraemeBryce's Avatar
    Join Date
    Sep 2007
    Location
    Scotland
    Posts
    89

    Default

    Joseph

    Thanks for the reply and I hope this help others understand the small but irritating issues in the existing implementation with regard to a "blank" row in the data.

    I am still investigating other possibl solutions as I beleive I am not unique in not wishing to solve the problem by having the back-end return an additional row in the data.

    The desire is to have the combo render the ability to clear the value from the control where the returned data does not actually contain a blank row. This is particularly important where the user has in some way filtered the rows returned and where as such a blank row could easily have been filtered out.

    I also want a solution that is in effect independant of the back end.

    I have tried a number of approaches including having the render method on the control conditionally include an additional element
    Code:
    this.nullRow = this.list.createChild({cls:cls+'-item',html:'&nbsp'});
    this.assetHeight += this.nullRow.getHeight();
    Which works visually but there are then some interesting challenges on managing key presses for users moving up and down the list (including into the empty item) and the value of index being upset.

    One much simpler approach, which I am inclined to think is the way to go, it to use a twin trigger and thus have an additional "clear" button rendered to the right of the combo.

    I am however also looking at a code approach that would modify the store supporting the combo by inserting a blank record in the local store cache and leaving everything else to work as normal.

    However you look at it though if the average develper (and I am very average) can't find a simple solution to this and despite obvious demand none of the more advanced developers have delivered an add-on solution then this is not trivial and the core would benefit from a serious implementation but the core EXT team.

  8. #8
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243

    Default The solution provide above fixes the blank line issue ..

    The solution provided above fixes the blank line issue you are talking about. Because the emptyText and the display value of the blank data row entry match, it morphs together and there is no more annoying blank entry and hence to styling issues or key strokes to deal with.

    Also, you don't have to send an extra row in your actual data. I prepend the entry blank to my data after I pull it from any of the various sources we pull from. Also this is integrated part of a greater overall forms mechanism that is beyond the scope of this issue - making it hard for me to post a coded solution (sorry about that).

    If you need a working example to see why / how it works, let me know and I'll see if I can find the time to do it in sandbox mode. It may help understand the solution better and help you and others implement it.

    Hope these comments help understand the differences of the provided solution.

    ... all that said ..

    I agree there should be an option for this and hence my initial gripe .. but hope the solution helps for now
    Joseph Francis,
    CoreLan / Meeting Consultants

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •