Results 1 to 3 of 3

Thread: Dynamically adding an empty value to a filtered store

  1. #1
    Sencha User
    Join Date
    Jul 2017
    Posts
    58
    Answers
    6
    Vote Rating
    6
      0  

    Default Answered: Dynamically adding an empty value to a filtered store

    What I'm trying to accomplish is to be able to set a variable such as "showEmptyValue" for my custom ComboBox class (which isn't far off from the base 'combo' class), which when enabled will add an empty value to the first position of that store, like this:

    asdf.png

    Initially I was able to implement this on an individual ComboBox simply by adding this listener to the store:
    Code:
    listeners: {
        load: function (str) {
            str.data.insert(0, new str.model());
        }
    }
    The issues started to arise after working with a filtered store. In one situation, the values of ComboBox B are filtered by the value in ComboBox A. One way around it was changing the listener to do this

    Code:
    listeners: {
        refresh: function (str) {
            if (str.data.items.length == 0 || !str.data.items[0].data["Value"]) {
                return;
            }
    
            var a = new str.model();
            a.data["FilterVar"] = str.data.items[0].data["FilterVar"];
            str.insert(0, a);
        }
    }
    This seems like a very sloppy implementation though, and sometimes the empty value inserted cannot be selected by clicking. Can anyone suggest a better approach for this?

    Edit:
    In my custom ComboBox class, I added onto the render function to add a refresh listener to the store. Still having the issue of the added field being unable to click on after switching between a few filters, so I'm open to trying other implementations out still.
    Code:
    render: function (el) {
    	el.labelEl.on('click',
    		el.labelEl.selectable
    	);
    	if (this.showBlankValue == true) {
    		this.getStore().on('refresh', function (store, records, successful, options) {
    			if (store.data.items.length == 0 || !store.data.items[0].data[el.displayField]) {
    				return;
    			}
    
    
    			var a = new store.model();
    			a.data["Value"] = store.data.items[0].data["Value"];
    			store.insert(0, a);
    		}, this);
    	}
    },

  2. Here's the nearly final solution I'm going with should anyone come across this.

    (Please critique)

    From the (custom) ComboBox class:
    Code:
    listeners: {
        render: function (el) {
            var me = this;
            
            if (me.showBlankValue == true) {
                var store = me.store;
                if (store.isFiltered()) {
                    // Adds empty value for the initial load
                    store.on('load', me.addBlankToFilteredStore, me);
    
    
                    // Adds empty value for subsequent filter changes
                    store.on('filterchange', me.addBlankToFilteredStore, me);
                } else {
                    store.insert(0, new store.model());
                }
            }
        },
    }
    
    
    addBlankToFilteredStore: function (store, records, successful, options) {
        var me = this,
            storeItems = store.data.items,
            storeFilters = store.filters.items;
    
    
        if (!storeItems.length > 0) {
            // Still adds to an empty store, but the if statement below will error since storeItems[0] == undefined
        } else if (!storeItems[0].data[me.displayField] || !storeFilters) {
            return;
        }
    
    
        var blankValue = new store.model();
        // Add the properties of the filter
        Ext.each(storeFilters, function (filter) {
            blankValue.data[filter.config.property] = filter.config.value;
        });
    
    
        store.insert(0, blankValue);
    }

  3. #2
    Sencha User
    Join Date
    Jul 2017
    Posts
    58
    Answers
    6
    Vote Rating
    6
      0  

    Default

    Here's the nearly final solution I'm going with should anyone come across this.

    (Please critique)

    From the (custom) ComboBox class:
    Code:
    listeners: {
        render: function (el) {
            var me = this;
            
            if (me.showBlankValue == true) {
                var store = me.store;
                if (store.isFiltered()) {
                    // Adds empty value for the initial load
                    store.on('load', me.addBlankToFilteredStore, me);
    
    
                    // Adds empty value for subsequent filter changes
                    store.on('filterchange', me.addBlankToFilteredStore, me);
                } else {
                    store.insert(0, new store.model());
                }
            }
        },
    }
    
    
    addBlankToFilteredStore: function (store, records, successful, options) {
        var me = this,
            storeItems = store.data.items,
            storeFilters = store.filters.items;
    
    
        if (!storeItems.length > 0) {
            // Still adds to an empty store, but the if statement below will error since storeItems[0] == undefined
        } else if (!storeItems[0].data[me.displayField] || !storeFilters) {
            return;
        }
    
    
        var blankValue = new store.model();
        // Add the properties of the filter
        Ext.each(storeFilters, function (filter) {
            blankValue.data[filter.config.property] = filter.config.value;
        });
    
    
        store.insert(0, blankValue);
    }

  4. #3
    Sencha User
    Join Date
    Dec 2007
    Posts
    52
    Answers
    2
    Vote Rating
    1
      0  

    Default

    Another way to solve the problem of letting the user blank out a ComboBox with current selection is to add a clear trigger as:

    Selection_031.png

    I have implemented a little plugin for this:

    Code:
    Ext.define('Web.ux.plugins.ClearTrigger', {
        extend: 'Ext.plugin.Abstract',
        alias: 'plugin.cleartrigger',
    
        init: function (field) {
            field.setTriggers(Ext.merge(field.triggers, {
                clear: {
                    cls: 'x-form-clear-trigger',
                    hideOnReadOnly: true,
                    hidden: false,
                    handler: function () {
                        this.setValue(null);
                    }
                }
            }));
        }
    });
    And then I can just use a normal ComboBox:

    Code:
          
    {
            xtype: 'combo',
            itemId: 'brandId',
            editable: false,
            plugins: 'cleartrigger',
            width: 180,
            store: 'brand',
            displayField: 'brandName',
            valueField: 'id'
    },

Similar Threads

  1. Replies: 4
    Last Post: 21 Jan 2015, 3:30 AM
  2. [FNR] IndexOutOfBoundsException when adding to filtered store
    By lkuchars in forum Ext GWT: Bugs (2.x)
    Replies: 1
    Last Post: 3 Mar 2010, 5:20 AM
  3. [FIXED] [1.2] Adding/Modifying to filtered Store
    By flee in forum Ext GWT: Bugs (1.x)
    Replies: 1
    Last Post: 9 Dec 2008, 3:01 PM

Posting Permissions

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