ExtJS Grid ComboBox Default value - My Forums

ExtJS Grid ComboBox Default value

harveyev — Aug 13, 2015, 07:58 AM

I have a grid with a combobox retrieves remote data via updatfromGrid call. The data loads fine on edit but is initially blank. I have read the ExtJS docs and all the threads I could find on how to set the initial value, but none seem to work. My grid js page looks like this:

Ext.util.Format.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.valueField, value);
        return record ? record.get(combo.displayField) : combo.emptyText;
    }
}

Ebents.combo.organizer = function(config){
    config = config || {};
    Ext.applyIf(config,{
        url: Ebents.config.connectorUrl,
        baseParams: { action: 'mgr/organizers/getComboBoxList', combo: true },
        hiddenName: 'organizer',
        name: 'organizer',
        displayField: 'name',
        valueField: 'id',
        fields: ['id','name'],
        loadingText:  'Loading...',
        emptyText: 'Select...'
    });
    Ebents.combo.organizer.superclass.constructor.call(this,config);
};
Ext.extend(Ebents.combo.organizer,MODx.combo.ComboBox);
Ext.reg('ebents-combo-organizer',Ebents.combo.organizer);

And the grid config (unrelated code omitted:

Ebents.grid.Events = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        url: Ebents.config.connectorUrl
        ,baseParams: { action: 'mgr/events/getlist'} 
        ,fields: ['id','name','description','organizer','venue','start','end','status']
        ,trackMouseOver:true 
        ,disableSelection:true 
        ,loadMask: true
        ,save_action: 'mgr/events/updateFromGrid'
        ,autosave: true
        ,paging: true
        ,remoteSort: false
        ,anchor: '97%'
        ,columns: [{
                ...
            },{
                header: _('ebents.event_organizer')
                ,dataIndex: 'organizer'
                ,sortable: true
                ,width: 100
                ,editor: { xtype: 'ebents-combo-organizer'}
                ,renderer: Ext.util.Format.comboRenderer(Ebents.combo.organizer)
            },{
                ...
            }
        ]
    });
    Ebents.grid.Events.superclass.constructor.call(this,config)
};
Ext.reg('ebents-grid-events',Ebents.grid.Events);

With this setup I get

Uncaught TypeError: combo.findRecord is not a function(anonymous function) @ events.grid.js:3Ext.grid.GridView.Ext.extend.doRender @ ext-all.js:21

According to the docs, findRecord is an available function for 3.4. Not sure why it would be undefined here unlessI'm calling it wrong. I'd rather not have to rewrite the whole thing with a bunch a vars like the example. I just want to display the value back from getlist in the column. I saw some posts about setting the value in this thread http://forums.modx.com/index.php/topic,61332.msg348573.html, but that didn't work either.

Re: ExtJS Grid ComboBox Default value

Jako — Jan 07, 2018, 09:28 PM

Just change the editor in the grid config to:

,editor: { xtype: 'ebents-combo-organizer', renderer: true }

and remove the renderer line below. Then the initial value in the grid is replaced with the combo displayField value.

Re: ExtJS Grid ComboBox Default value

goldsky — Aug 14, 2015, 12:03 AM

Quote from: harveyev at Aug 13, 2015, 03:32 PM

Maybe should add this diddy to the combobox docs for remote as there is only a local example there.

No, I'm pretty sure you didn't even need this

renderer: function(value) {
    return value;
}

... if you use proper processors, which return the expected modResponse's object for MODExt.

Re: ExtJS Grid ComboBox Default value

harveyev — Aug 13, 2015, 09:22 PM

Quote from: goldsky at Aug 13, 2015, 03:54 PM

You might want to read my response on http://forums.modx.com/thread/97975/more-cmp-dev-woes---field-names-in-grid#dis-post-529989

I'm pretty sure they are related.

Yeah I read it and responded. The other issue was resolved. Before I posted this diddy. Thanks much!

Re: ExtJS Grid ComboBox Default value

goldsky — Aug 13, 2015, 10:54 AM

You might want to read my response on http://forums.modx.com/thread/97975/more-cmp-dev-woes---field-names-in-grid#dis-post-529989

I'm pretty sure they are related.

Re: ExtJS Grid ComboBox Default value

harveyev — Aug 13, 2015, 10:32 AM

Quote from: goldsky at Aug 13, 2015, 03:20 PM

try this:
 renderer: function(value) {
console.log('value', value);
	return value;
}
what do you get on your browser console?

*Cough* I get the value Works now. So simple it's scary. I guess renderer: true has some different logic underneath than just returning the value. Thanks. Maybe should add this diddy to the combobox docs for remote as there is only a local example there. Would have saved me some hours.

Thanks much!

Re: ExtJS Grid ComboBox Default value (Best Answer)

goldsky — Aug 13, 2015, 10:20 AM

try this:

 renderer: function(value) {
console.log('value', value);
	return value;
}

what do you get on your browser console?

Re: ExtJS Grid ComboBox Default value

goldsky — Aug 13, 2015, 10:14 AM

Is the processor sending the value for "organizer" key?

Re: ExtJS Grid ComboBox Default value

harveyev — Aug 13, 2015, 09:50 AM

Quote from: goldsky at Aug 13, 2015, 01:46 PM

You need to remove that ,renderer:...
It's meant to manipulate/how to render the content of that column/field.

What you need to focus is the editor: {xtype: 'ebents-combo-organizer'}

And the editor works fine. It's just the rendering of the current value when not editing that is the issue for me.

Re: ExtJS Grid ComboBox Default value

harveyev — Aug 13, 2015, 09:49 AM

I added that becauseI had the renderer: true defined on the editor but the field values were blank. According to the http://extjs.cachefly.net/ext-3.3.0/docs/?class=Ext.form.ComboBox :

If using a ComboBox in an Editor Grid a renderer will be needed to show the displayField when the editor is not active. Set up the renderer manually, or implement a reusable render, for example:
// create reusable renderer
Ext.util.Format.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.valueField, value);
        return record ? record.get(combo.displayField) : combo.valueNotFoundText;
    }
}