PDA

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



barrancoguillaume
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>

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

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing-event-edit

barrancoguillaume
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 :
39638
My grid when I click on the cell :
39639
Is there a way to force the grid to show the data in my column ?

Thank you very much by advance

skirtle
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?

barrancoguillaume
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.onReady(function(){
Ext.tip.QuickTipManager.init();

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...'},
columns:[{
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: [
{
ref:'../addBtn',
disabled:false,
displayedInToolbar:true,
underSelectedLine:false,
text:'Ajouter',
iconCls:'add',
handler:function(btn, ev) {
grid.getStore().insert(0, {id: 0, name: "", description: ""});
}
}
],
renderTo: 'listeRessources'
});
store.load();
var items = [];

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

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;
e.record.commit();
rolesRessources.push(e.record.data.name);
});
});
</script>

barrancoguillaume
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 !