CODEWITHSUNDEEP
extjscombobox
user7569898
user7569898

Reputation:

How do I stop a clicked combo box from clearing its value?

I'm trying to edit a combobox value. But what happens is when I click a grid cell the old value disappears I want to keep a the and also avoid the user to select the values form the combo box itself and not values other than those in the drop down

How can i achieve these two things.

{
    text: 'Food Items',
    xtype: 'gridcolumn',
    dataIndex: 'food_lister',
    flex: 1,
    renderer: function (value) {
        console.log()
        if (Ext.isNumber(value)) {
            var store = this.getEditor().getStore();
            return store.findRecord('foodid', value).get('fooddescp');
        }
        return value;
    },
    editor: {
        xtype: 'combobox',
        allowBlank: true,
        displayField: "fooddescp",
        valueField: "foodid",
        queryMode: 'local',
        mapperId: 'getfooddescrip',
        lastQuery: '',
        forceSelection: true,
        listeners: {
            expand: function () {
                var call = this.up('foodgrid[itemId=fooditemgrid]').getSelectionModel().selection.record.data.foodname.trim();
                this.store.clearFilter();
                //this.store.filter('call',call);
                this.store.filter({
                    property: 'call',
                    value: call,
                    exactMatch: true
                })
            }
        }
    }
}

As soon as I click that cell I data gets reset to null.How can i retain the already present data , without getting that to null

See this pic_new

Upvotes: 2

Views: 1127

Answers (1)

Surya Prakash Tumma
Surya Prakash Tumma

Reputation: 2193

Use editable : false in combo check the updated example

click here

Edit: As per your comment if you still want to use editable true and restric the value other than the store you have to handle it in cell editing event validateedit 

 plugins: {
    ptype: 'cellediting',
    clicksToEdit: 1,
    listeners: {
        validateedit: function( editor, context, eOpts ){
            var store = context.column.getEditor().store,
                record = context.record;
           if(store.find('id',context.value) === -1){
             context.cancel = true;
           }
        }
    }
}

Above code is based on my example. Please check running example in my fiddle

Upvotes: 1

Related Questions