[SOLVED] - Grid Renderer doesn't seem to fire in IE - in ff it's fine.

[matevans]

Hi,

I have a strange problem with a renderer in a grid. The point of the renderer is to show the display value in a combo box after edit.

This is the code for the renderer..

Ext.ns("Ext.ux.renderer");
	
	Ext.ux.renderer.ComboRenderer = function(options) {
	    var value = options.value;
	    var combo = options.combo;
		var record = options.record;
		var gridstore = options.gridstore;
	    var returnValue = value;
	    var valueField = combo.valueField;
	        
		
	   
		var comboreturn = gridstore.findBy( function(record) {
	       
			if(record.get(valueField) == value) {
	            alert(record.get(combo.displayField));
				returnValue = record.get(combo.displayField);
	            
				return true;
	        }
	    });
		

	    return returnValue;
	};

	Ext.ux.renderer.Combo = function(combo) {
	
	var combostore = combo.store;
		
	return function(value, meta, record) {
		
        return Ext.ux.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo, gridstore: comboStore1});
    };
	};

In ff it works perfectly, showing the text display value instead of a numeric value that is the value of the combo box. In IE, it doesn't seem to fire at all.

I place an alert (shown in red) in the code, and in firefox it fires with the renderer after edit, in IE it seems to fire once at the beginning of the grid load and then doesn't do anything.

Have I missed the point of something here?

Any help much appreciated.

Mat

[Condor]

Strange way of writing code.

How does this work:

Ext.ns("Ext.ux.renderer");
Ext.ux.renderer.Combo = function(combo) {
	return function(value) {
		var valueField = combo.valueField || combo.displayField;
		var index = combo.store.findBy(function(record){
			if (record.get(valueField) == value) {
				return true;
			}
		});
		if (index < 0) {
			return '';
		}
		return combo.store.getAt(index).get(combo.displayField);
	}
};

[matevans]

Sorry about the code, it's a mix'n'match of various things i've tried.

Your code doesn't seem to work, in FF it shows just an empty column, and in the the grid renders but is held on the loading screen permanently.

Maybe it's the way i've set up the grid?

The error I get in IE is 'combo.store is null or not an object' and it's on the line starting 'var = index..'

This is what I have been getting a lot, and can't seem to work out why.

Why would the combo store be visible in FF and not in IE?

cheers,
Mat

[Condor]

How do you assign a renderer to the column?

[matevans]

This is the column model and a bit of code previous to it, including the renderer.
It is dynamically produced from a DB - hence the strange look.

Thanks for your help so far, much appreciated, this has been driving me crazy for a while.

status = new Ext.form.ComboBox({
               typeAhead: true,
               triggerAction: 'all',
               store: comboStore1,
			   displayField: 'STATUS',
			   valueField: 'STATUSID',
               forceSelect:true,
               listClass: 'x-combo-list-small',
			   shadow: 'drop',
			   mode: 'remote',
			   lazyinit: false
            });
	
	
	
	
		
	

Ext.ns("Ext.ux.renderer");
Ext.ux.renderer.Combo = function(combo) {
	return function(value) {
		var valueField = combo.valueField || combo.displayField;
		var index = combo.store.findBy(function(record){
			if (record.get(valueField) == value) {
				return true;
			}
		});
		if (index < 0) {
			return '';
		}
		return combo.store.getAt(index).get(combo.displayField);
	}
};
	
    
	
    
	
	
    
    // shorthand alias
    var fm = Ext.form;
	var textfieldeditor = new fm.TextField({allowBlank:false});
	var dateeditor = new fm.DateField({allowBlank:false});
  	
	var cm = new Ext.grid.ColumnModel([
	
		{
           header: "personid",
		   dataIndex: 'PERSONID',
           width: 200,
		   sortable:true,
		   
		   hidden: true	
		   
        }, 
		{
           header: "Title",
		   dataIndex: 'TITLE',
           width: 200,
		   sortable:true,
		   
			editor: new Ext.form.TextField(),
			
		   hidden: false
		   
        }, 
		{
           header: "First Name",
		   dataIndex: 'FIRSTNAME',
           width: 200,
		   sortable:true,
		   
			editor: new Ext.form.TextField(),
			
		   hidden: false
		   
        }, 
		{
           header: "Last Name",
		   dataIndex: 'LASTNAME',
           width: 200,
		   sortable:true,
		   
			editor: new Ext.form.TextField(),
			
		   hidden: false
		   
        }, 
		{
           header: "Email",
		   dataIndex: 'EMAIL',
           width: 200,
		   sortable:true,
		   
		   renderer: checkEmail,	
		   
			editor: new Ext.form.TextField(),
			
		   hidden: false
		   
        }, 
		{
           header: "Company Name",
		   dataIndex: 'COMPANYNAME',
           width: 200,
		   sortable:true,
		   
			editor: new Ext.form.TextField(),
			
		   hidden: false
		   
        }, 
		{
           header: "Address 1",
		   dataIndex: 'ADDRESS1',
           width: 200,
		   sortable:true,
		   
			editor: new Ext.form.TextField(),
			
		   hidden: false
		   
        }, 
		{
           header: "Address 2",
		   dataIndex: 'ADDRESS2',
           width: 200,
		   sortable:true,
		   
			editor: new Ext.form.TextField(),
			
		   hidden: false
		   
        }, 
		{
           header: "Post Code",
		   dataIndex: 'POSTCODE',
           width: 200,
		   sortable:true,
		   
			editor: new Ext.form.TextField(),
			
		   hidden: false
		   
        }, 
		{
           header: "Created Date",
		   dataIndex: 'CREATEDDATED',
           width: 200,
		   sortable:true,
		   
		   renderer: formatDate,	
		   
		   hidden: false
		   
        }, 
		{
           header: "Last Updated",
		   dataIndex: 'LASTUPDATEDDATE',
           width: 200,
		   sortable:true,
		   
		   renderer: formatDate,	
		   
		   hidden: false
		   
        }, 
		{
           header: "Status",
		   dataIndex: 'STATUS',
           width: 200,
		   sortable:true,
		   
		   renderer: Ext.ux.renderer.Combo(status),	
		   
		   editor: new Ext.form.ComboBox(status),
			
		   hidden: false
		   
        } 
	]);

	

return cm;
}

[Condor]

The editor is wrong.

{
	header: "Status",
	dataIndex: 'STATUS',
	width: 200,
	sortable:true,
	renderer: Ext.ux.renderer.Combo(status),	
	editor: status,
	hidden: false
}

[matevans]

Hi

I tried changing the editor to 'status', but it still gives the same error.
'combo.store' not found.. and also in ff the status column is still not showing and values, until you edit one at which point it does show a value..

Might there be something wrong in the order of the code?

Thanks,
Mat

[matevans]

I tried putting the actual store variable into the renderer code, and it seems to stay the same if FF, but in IE the grid actually renders although the status column is empty and when you click in it, it creates a lot of white space to the right of it.

[matevans]

Just to complete this thread so if anyone else comes across it looking for help, this is how i got it working.

The renderer function I used was this..

	Ext.namespace("Ext.ux");
	Ext.ux.comboBoxRenderer = function(combo) {
	  return function(value) {
	    var idx = combo.store.find(combo.valueField, value);
	    var rec = combo.store.getAt(idx);
		//alert(rec.get(combo.displayField));
	    return (rec == null ? value : rec.get(combo.displayField) );
		//return value;
	  };
	}

It came from here with some little tweaks - mainly it didn't seem to find the store when the grid was first rendered, so if rec is null then it just returns the value, which if display and value fields are set up then it shows the correct values.

The column model section ended up looking like this

        {
           header: "Status",
           dataIndex: 'STATUS',
           width: 200,
	   sortable:true,	   
	   renderer: Ext.ux.comboBoxRenderer(Ext.ux.edit.status),		   
           editor: Ext.ux.edit.status,		
           hidden: false	   
        }

This was the only way that seemed to work in the end.

And just to complete is, this is the combo setup function..

                Ext.ns("Ext.ux.edit");
	
		Ext.ux.edit.status = new Ext.form.ComboBox({
                typeAhead: true,
                triggerAction: 'all',
                store: comboStore1,
		displayField: 'STATUS',
		valueField: 'STATUSID',
                forceSelect:true,
                listClass: 'x-combo-list-small',
		shadow: 'drop',
		mode: 'remote',
		lazyInit: false
            });

Condor, thanks for your help, gave me a better insight into Ext as a whole.

Mat