View Full Version : How to render extjs component in Grid renderer,

30 Jun 2015, 6:49 AM
How to render extjs component in Grid ,
tried with column component creating performance issue . is there any right way render
extjs component in grid render

30 Jun 2015, 11:16 AM
Can you provide an example of what you are trying to do?

1 Jul 2015, 1:46 AM
trying to render combobox and checkbox using "componentcolumn" extension.. facing slowness in grid rendering if row count more than 50 see the example in below link http://skirtlesden.com/ux/component-column

1 Jul 2015, 6:08 AM
A much faster way would be to use domQuery. Here is the basic concept:

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

var nameRenderer = function(){
return '<div ext-xtype="textfield"></div>';


var simpsonPanel = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name', renderer:nameRenderer },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
height: 200,
width: 400,
var els = view.el.query('div[ext-xtype]');
Ext.each(els, function (domEl) {
var xtype = Ext.get(domEl).getAttribute('ext-xtype');
}, this);

name : 'Fiddle',

launch : function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'fit'

items: simpsonPanel


2 Jul 2015, 9:27 AM
Unfortunately, we do not provide support for user extensions. I would contact the author to get support if you're experiencing issues with the UX.

6 Jul 2015, 4:49 AM
how can I pass rendering record to the render component .. and viewready is not called on column on,off

example: tried data record but it could not able to decode
return '<div data:record = record ext-xtype="custom component"></div>';

6 Jul 2015, 5:22 AM
It would be better to access the record using rowIndex. Modify the renderer as follows:

var nameRenderer = function(value, metaData, rec, rowIndex, colIndex, store){
return '<div ext-xtype="textfield" recindex=' + rowIndex+ '></div>';


And then, while plugging in the Ext components, in the viewready event:

var els = view.el.query('div[ext-xtype]');

Ext.each(els, function (domEl) {
var xtype = Ext.get(domEl).getAttribute('ext-xtype');
var recIndex = Ext.get(domEl).getAttribute('recindex');
var dataRec = view.getStore().getAt(recIndex);
Ext.widget(xtype,{renderTo:domEl, dataRec:dataRec});
}, this);


6 Jul 2015, 3:40 PM
I quite like this approach but I'm not sure it'll be much faster. Rendering 50 comboboxes takes time no matter how you do it.

You also need to consider sizing and destroying the child components, my UX handles these aspects for you.

You mentioned rendering checkboxes. I definitely wouldn't use component column for that, I'd use check column. If you need some cells in the same column to contain checkboxes and some to contain comboboxes then I'd still use the mark-up approach used by check column to render the checkboxes rather than trying to force a checkbox component into the cell. You should be able to mix approaches with a component column.

Alternatively, if you're rendering both components into the same cell using a wrapper container then you should give careful attention to the configuration of the layout of the container. That can make a big difference to the performance. A bit of profiling should give you a guide as to whether that is something worth pursuing.

If you skim through the relevant forum thread for my UX you'll find several discussions about performance and you may find one of them fits your scenario. If your grid has a vertical scrollbar then it should be possible to use the buffered rendering plugin on the grid - that's often the simplest way to improve performance.

6 Jul 2015, 5:29 PM
@Skirtle.. looks like you are right. There doesn't seem to be much performance difference. I created two fiddles:

https://fiddle.sencha.com/#fiddle/pvq (with component column)

https://fiddle.sencha.com/#fiddle/pvp (without)

domQuery method seems only slightly faster. Although I am not sure OP is trying to put more config options to the components and that is creating performance issues.

7 Jul 2015, 5:46 AM
Actually I am trying to render form contains checkbox, textfield & dropdown different renderer for multiple field ... I accept it works fine for checkbox alone ... could you please give clue on it .. what could be a issue ?

7 Jul 2015, 1:16 PM
could you please give clue on it .. what could be a issue ?

I've already given several pointers and suggestions. Without any feedback on those ideas I'm struggling to add anything new.

There's only so much we can do to help you if you don't provide a Fiddle.

Attacking performance problems is always much the same: take some measurements then do some tweaking until you understand where the bottlenecks are. Until you do some profiling you aren't really going to understand what's going on.

You could also do some experiments to find the theoretical limit. Trying rendering the same number of fields outside of a grid, see how long that takes. If the time is comparable (I suspect it will be) then you're not going to be able to break through that floor.

27 Jul 2015, 5:58 AM
see the following fidde link for componentcolumn and deferred render


deffered render -

deffered render is little fast when comparing with component column..
please let me know your thoughts on it

28 Jul 2015, 6:29 AM
Hello, guys,

I faced with the same problem. I need to make a grid with multiple components is which cells (see attachment).
I've tried to use component column and write a custom grid implementation with 'hbox' and 'vbox' layouts. But it looks like that there is no solution of the performance issue in ExtJs4.

Only one approach I left untried. The thing is, that user still need to click to a cell for editing. It means, that until he clicks a cell, he could see fake controls plain html, styled as inputs. Then we can show him custom CellEditor plugin, which has exactly the same inputs and placed on top of grid.
Ext CellEditor works like that.

4 Aug 2015, 4:07 AM
deffered render is little fast when comparing with component column..
please let me know your thoughts on it

Yes, performance appears better using the deferred render. It's misleading though, if you scroll down the grid immediately after rendering you'll find that most of the injected components aren't there yet. It takes much longer for them to show up using that approach.

Perhaps having the first few rows populate quickly is more important to you than the total rendering time for all rows. In that case the deferred approach may be what you need.

You'll need to be careful though. The approach you posted doesn't consider a lot of other factors such as sizing, destruction and component query support.

I would also suggest using CSS to set the height of the grid rows to match their final height so that the height doesn't change when the components are injected. This will make scrolling less haphazard during component injection.

I suspect it is possible to adapt component column to batch the injection of the components to get a better initial rendering time but I haven't attempted it myself.

25 Sep 2015, 5:22 AM
could you guide or give example
how to Create custom editor for grid , component will get invoke on click of cell
see the attachment for custom editor

25 Sep 2015, 10:50 AM
Finally, I used dataview component to render my table. It use plain html inside.

1 Feb 2017, 3:28 AM
but if you want use not a simple html and you want use a extjs component?how to?