PDA

View Full Version : Using Renderer in a grid



Capt.JackSparrow
4 May 2010, 9:21 PM
Hello!
Is there a way to use renderer inside a grid using Designer?

BuckBazooka
5 May 2010, 1:57 AM
Same question? If I cannot specify a renderer... I cannot use this tool to create Grids. :-(

jarrednicholls
5 May 2010, 7:40 AM
We will be adding renderer "stubs" as well as the ability to choose built-in formatting functions in a future release. With that said, you can still use this tool to create your Grid custom class and simply add your renderer functions into the exported HTML/JS as custom implementation.

BuckBazooka
5 May 2010, 7:42 AM
Can you show me a simple example of that?

aconran
5 May 2010, 7:43 AM
Also take a look at the relatively new TemplateColumn that was added in 3.0.0. If you are simply providing some formatting within your renderer it is often easier to do it with a template rather than a renderer.

jarrednicholls
5 May 2010, 7:46 AM
Have you seen our screencast (http://www.extjs.com/blog/2010/04/22/ext-designer-released-watch-the-screencast/)? It is a 4 minute video on building a simple application with the Designer, exporting the code, and adding custom behavior. This is not specifically showing implementing a Column renderer, but it's the same idea.

Also Aaron advised the most common type of formatting option, the TemplateColumn, which can take advantage of the built-in formatting functions using the Template syntax. Very complex rendering logic might be easier in a renderer function, but a Template is easier for formatting in most cases.

Capt.JackSparrow
5 May 2010, 10:14 AM
Sounds good! Will try it for sure

BuckBazooka
6 May 2010, 12:48 AM
Yes I have seen the screencast. Actually quite few times... there is actually quite a lot of material in there if you are not used to this way of using ExtJS. I actually like it a lot, and I have based some of my work using the techniques which is used in there.
Nevertheless I still don't know how to specify a renderer using this technique.

From the documentation. Ext.grid.Column does not have a ref config option, as opposed to a button.
So how can I use the autoRef to access my Ext.grid.Column to change it's renderer.
I have used successfully autoRef to specify a ref-id on a button, that works really well, but on a column it is undefined.

Can a Ext.grid.Column be accessed using autoRef? How can I specify a renderer?

BuckBazooka
7 May 2010, 3:09 AM
Could any one let me know how to setup a user defined renderer in a grid created with the designer?

jarrednicholls
7 May 2010, 9:21 AM
Sure...in your exported Grid class (not the .ui.js file, but the .js file, e.g., MyGrid.js) you can add a few lines of code to set the renderer function of the column you're interested in. See the ColumnModel documentation for more helper functions you can use to obtain the column index (e.g., getIndexById). See example below:



MyGrid = Ext.extend(MyGridUi, {
initComponent: function() {
MyGrid.superclass.initComponent.call(this);

this.getColumnModel().setRenderer(0, this.myColRenderer);
},

myColRenderer: function(v){
return v + ' -- test';
}
});


You can optionally get the actual column itself using helper methods on the ColumnModel, and set its "renderer" property:



MyGrid = Ext.extend(MyGridUi, {
initComponent: function() {
MyGrid.superclass.initComponent.call(this);

this.getColumnModel().getColumnById('name').renderer = this.myColRenderer;
},

myColRenderer: function(v){
return v + ' -- test';
}
});

enuske
12 Nov 2010, 10:26 AM
Hi, just a question related to this.

How would you specify a renderer for a ComboBox Editor Column? The ComboBox is using a remote JsonStore. I don't know how to adapt the example from the API documentation to the generated file output of the Designer:


// 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;
}
}

// create the combo instance
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [[1, 'item1'], [2, 'item2']]
}),
valueField: 'myId',
displayField: 'displayText'
});

Thanks in advance