PDA

View Full Version : How to display Combobox in grid ?



Salocin
23 May 2016, 5:31 AM
Hello,
I yet have seen this question but i don't understand or find the answer.

I have a simple grid within a combo box in the first column.
The combox box is hidden, I must click once to show it.

What's the matter ?
How can I display this combobox on load of the page?



xtype : 'grid',
name : 'criteriaGrid',
id : 'criteriaGrid',
store : 'CriteriaGridStore',
title : '{criteriaGrid}',
columnWidth : 0.5,
hideHeaders : true,
plugins :
[
Ext.create('Ext.grid.plugin.CellEditing',
{
clicksToEdit : 1
})
],
columns :
[
{
xtype : 'gridcolumn',
dataIndex : 'joining',
editor :
{
xtype : 'combobox',
id : 'joiningComboboxColumn',
store : 'CriteriaJoinStore',
displayField : 'name',
valueField : 'name',
mode : 'local',
typeAhead : false,
triggerAction : 'all',
lazyRender : true,
emptyText : '{joiningEmptyText}',
flex : 1


PS: ExtJs 4.1

Thanks in advance

EDIT :
At worst :
Can I simulate a click on ?

jdkhamba
23 May 2016, 8:51 AM
I don't think that is supported out of the box. You can use skirtle's component column instead:

http://skirtlesden.com/ux/component-column

A working example:

https://fiddle.sencha.com/#fiddle/pvq

SurenderBhyan1
24 May 2016, 6:37 AM
Other option is to render Name column with "HTML option list"

dataIndex: 'name',
renderer: function(value, metaDtaa){
//return html option list here, it will be visible at page load
}

Salocin
24 May 2016, 7:02 AM
Thanks for your answers.

I finished my task doing this:

I did not success to display the combo, so I created a label "Select ..." (like the combo)
NB : The combo and the label are in the same cell:
On click on the label, the combo appears, select the option, and do thing.

That was the fastest way I found to do this.

Else, I tried to do a renderer with html4/5 combobox, it was working, but I had not the same css I would, and there will be hard to replicate combobox component extjs

Thanks you
Best Regards.

SurenderBhyan1
24 May 2016, 7:31 AM
I believe, you are again using one click to open the combobox and then select from the combobox. also you added one extra label too.

why not to use cell editing plugin then ?

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.CellEditing

Salocin
24 May 2016, 12:08 PM
I believe, you are again using one click to open the combobox and then select from the combobox. also you added one extra label too.

why not to use cell editing plugin then ?

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.CellEditing

That what I already use.
ClickToEdit open the option when I click on the blank cell.
But in this cell, there is nothing, we can't see there is a combobox here until I click on.
That why I put a label on, to see it and click on (the combo with cell edit)