View Full Version : How to display two data in each cell in grid

31 Jan 2013, 8:29 AM

We have a requirement to display two data in each cell of a grid and among these two data, one will be editable as shown in attached image. I have done lots of googling but didn't find the required solution.
Is there any solution in ExtJs. I am using ExtJs 4.1.1.

3 Feb 2013, 1:39 PM
You could provide a renderer for the cell as shown here:


3 Feb 2013, 8:31 PM
Hi Scott,

Thanks a lot for your reply. I have tried to run paging.js from the link you have provided by making each cells of last column named as "Last Post" as editable. But here, we are also getting the whole value in text box of the cell that have been provided in the renderer of the grid cell at the time of loading. E.g.
Suppose, I am sending a value like 200#20 in each cell of a column and at its renderer I splitt it and display it like 200<br>20 so that in each cell we can get 200 at top and 20 at bottom. But, when we click on the cell to edit its value, we should get 200 only in text box, but unfortunately I am getting 200#20 in textbox.
Same problem is being found in Paging.js that you have provided. Can we do something so that we can get only 200 in editable mode.

3 Feb 2013, 8:59 PM
On the issue of editing a selected value, you would most like need to create an edit dialog to separate the values.

The only other option I can think of is to have 2 rows rows each activity but only draw a line on 2nd row of each activity giving it the appearance of 2 line grid for each.

I did something like this in an recent app:

without css:

with css: