Editable Grid with All ComboBoxes, and Distinct values?

[jwong]

Hey Guys,

I have searched through the forums and tried solutions piece by piece on my grid but it still doesn't work properly. Any help is highly appreciated.

The grid and all the combos share the same store.

When you make any changes in any combo box and tab out, it doesn't keep it.

When you type in the combo box, having the focus on the combo box for more than a couple of seconds, it flashes back to the first value on the list.

Grid Code:

Ext.onReady(function(){
    Ext.QuickTips.init();

    // shorthand alias
    var fm = Ext.form;
    
    store = new Ext.data.JsonStore({    
        url: 'admin/searchrules.action',
        fields: ['from', 'to', 'ruleContextCode', 'results1'],
        root: 'records', 
        totalProperty: 'record_count', 
        autoLoad:true
    });
    var comboFrom = new Ext.form.ComboBox({
        displayField:'from',
        store: store,
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select a sender',
        selectOnFocus:true,
        listeners: {
          beforequery: function(qe) {
            qe.forceAll = true;
          }
        }
    });    
    var comboTo = new Ext.form.ComboBox({
        displayField:'to',
        store: store,
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select a recipient',
        selectOnFocus:true,
        listeners: {
          beforequery: function(qe) {
            qe.forceAll = true;
          }
        }
    });    
    var comboContext = new Ext.form.ComboBox({
        displayField:'ruleContextCode',
        store: store,
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select a result',
        selectOnFocus:true,
        listeners: {
          beforequery: function(qe) {
            qe.forceAll = true;
          }
        }
    });    
    var comboResults = new Ext.form.ComboBox({
        displayField:'results1',
        store: store,
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select rule context',
        selectOnFocus:true,
        listeners: {
          beforequery: function(qe) {
            qe.forceAll = true;
          }
        }
    });
    
    var cm = new Ext.grid.ColumnModel([{
           id:'from',
           header: "From",
           dataIndex: 'from',
           editor: comboFrom
        },{
           header: "To",
           dataIndex: 'to',
           editor: comboTo
        },{
           header: "Context",
           dataIndex: 'ruleContextCode',
           editor: comboContext
        },{
           header: "Results",
           dataIndex: 'results1',
           editor: comboResults
        }
    ]);

    // by default columns are sortable
    cm.defaultSortable = true;
    
    var Rules = Ext.data.Record.create([            
            {name: 'key'},
            {name: 'from'},
            {name: 'to'},
            {name: 'results1'},
            {name: 'results2'},
            {name: 'ruleContextName'},
            {name: 'ruleContextCode'},
        ])
    
    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'rules-grid',
        width:800,
        height:400,
        title:'Rules',
        frame:true,
        clicksToEdit: 1,
        viewConfig: {
            forceFit: true
        },

        // inline buttons
        buttons: [{text:'Save'},{text:'Cancel'}],
        buttonAlign:'center',

        // inline toolbars
        tbar:[{
            text:'Add Rules',
            iconCls:'add',
            handler : function(){
                var r = new Rules({
                    from: 'ANY',
                    to: 'ASO',
                    ruleContextCode:'Use Default Templates',
                    results1: 'Yes'
                });
                grid.stopEditing();
                store.insert(0, r);
                grid.startEditing(0, 0);
            }
        }],
    });

    grid.render("rules-grid");

};

Store Code Example:

{record_count: "6","records":[{key:    "1",    from:   "ANY",    to:    "ANY",    results1:  "First",    results2:  "First",    ruleContextName:"TEMPLATE_ORDER_SELECTION",    ruleContextCode:"Template Order Selection"},

Also is it possible to return only distinct values from the store to populate the combo box? In the screenshot, you will see "ANY" repeated as an option multiple times. I would like it to display as an option only once.

[jwong]

Please take a look at this someone?

[devnull]

the only thing weird i see is the beforequery listener on the combos, and cant help but feel that it is causing a problem. have you tried without to see what it does?
there also is no way to get just unique values from a store that i know of.

[jwong]

Removing the beforequery listener on the combos causes you to be unable to type in values

[jwong]

Any other suggestions? I will be happy to try anything.

[vidya1982]

Hey can someone help me to display distinct values in combo