View Full Version : Combobox in a grid which update value in another cell

29 Oct 2012, 2:05 AM
Hi all,<br>
I have a grid with a button which add a new line. Each line has 2 columns : a name and a description.<br>
This is my grid : <br>
<img src="http://www.sencha.com/forum/attachment.php?attachmentid=39634&amp;stc=1" attachmentid="39634" alt="" id="vbattach_39634" class="previewthumb"><br>I want selecting a value in combobox to update the two columns : the name (it's the normal behaviour and it works) and the description (all datas are in the dataStore that populate the combobox).<br><br>How can I do that ?<br><br>Thank you very much by advance.<br><br>

29 Oct 2012, 2:29 AM
You should have access to everything you need in the edit event:


29 Oct 2012, 2:38 AM
Ok, thank you very much I'll take a look on it.

Now, another question on this same grid :
In this grid I could have datas from another dataStore populated by ajax.
But in rows populated by these datas, the column Name doesn't show until I click on the cell to show the combobox (the selected element is the good one) to select the one I want.
My grid just after the page to load :
My grid when I click on the cell :
Is there a way to force the grid to show the data in my column ?

Thank you very much by advance

29 Oct 2012, 3:00 AM
Really difficult to guess given the information you've provided. It might help if you could paste some of the code.

First guess, is the column's renderer trying to use data from a store that is still loading?

29 Oct 2012, 4:53 AM
Here's my code :

<script type="text/javascript">
var store;
var grid;
var t_ressources = eval('<?php echo $this->ressources; ?>');

var cmbStore = Ext.create('Ext.data.Store', {
fields: [{name: 'id', type: 'number'}, 'name', 'description'],
data: t_ressources

var comboRessources = Ext.create('Ext.form.ComboBox', {
emptyText: 'Choisir une ressource',
store: cmbStore,
queryMode: 'local',
displayField: 'name',
valueField: 'id'


Ext.define('ressources', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'number'}, 'name', 'description'

// create the Data Store
store = Ext.create('Ext.data.Store', {
pageSize: <?php echo $this->pageSize; ?>,
model: 'ressources',
remoteSort: true,
proxy: {
type: 'ajax',
url: '/gestion/acces/ajax-role-ressource/role/<?php echo $this->roleId; ?>',
reader: {
root: 'rows',
totalProperty: 'count'
sorters: [{
property: 'name',
direction: 'ASC'

grid = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup(store),
disableSelection: true,
loadMask: {showMask: true, msg: 'Chargement en cours...'},
text: "id",
xtype: 'numbercolumn',
hidden: true
text: "Nom",
dataIndex: 'name',
width: '9%',
sortable: true,
editor: comboRessources,
renderer: function(val){
index = cmbStore.findExact('id',val);
if (index != -1){
rs = cmbStore.getAt(index).data;
return rs.name;
text: "Description",
dataIndex: 'description',
width: '90%',
sortable: true,
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Affichage des ressources {0} - {1} sur {2}',
emptyMsg: "Pas de ressources afficher",
tbar: [
handler:function(btn, ev) {
grid.getStore().insert(0, {id: 0, name: "", description: ""});
renderTo: 'listeRessources'
var items = [];

//create new row
var addButton = new Ext.Button({
text: 'Add',
scope: this,
hidden: false,
handler: function() {

grid.on('edit', function(editor, e) {
var idx = cmbStore.findExact('id', e.record.data.name);
var rs = cmbStore.getAt(idx).data;
e.record.data.description = rs.description;

29 Oct 2012, 8:59 AM
I found it !
The ajax that populate the store put the name on the column Name. But the renderer of y combobox get the id to show the name. I passed the id and it works !

thank you very much !