View Full Version : how do i get the row id inside the grid

30 Nov 2009, 9:55 AM
Is there a function call or anything to get the row inside the grid. I am trying to pass the id of the row in the "qa" column. What i am geting is the dataIndex: 'qa_id'. What I want is the id. I know that i could pass the id in the dataIndex to make it work, but I need to display the qa_id, then pass the id. I am stuck, and help would be greatly appreciated.

Code below:

// create the Data Store
var storeDataStore = new Ext.data.Store({
id: 'storeDataStore',
proxy: new Ext.data.HttpProxy({
url: '/admin/store/ajax_get_stores_list',
method: 'POST'
reader: new Ext.data.JsonReader({ // we tell the datastore where to get his data from
root: 'stores_list',
totalProperty: '',
id: 'id'
{name: 'id', type: 'int', mapping: 'id'},
{name: 'store_name', type: 'string', mapping: 'store_name'},
{name: 'domain', type: 'string', mapping: 'domain'},
{name: 'display_date', type: 'string', mapping: 'display_date'},
{name: 'category_name', type: 'string', mapping: 'category_name'},
{name: 'merchant_flag', type: 'string', mapping: 'merchant_flag'},
{name: 'bumps'},
{name: 'coreg'},
{name: 'products'},
{name: 'design'},
{name: 'settings'},
{name: 'qa_id',type: 'int',mapping: 'qa_id'},
{name: 'edit'}

sortInfo:{field: 'id', direction: "ASC"}
});// storeDataStore = new Ext.data.Store({

//Set a base parameter for the store to load

//Load stores data store

// create the Grid
storeGrid = new Ext.grid.GridPanel({
store: storeDataStore,
id: 'strGrid',
columns: [
{id:'id', header: "ID", width: 50, sortable: true, dataIndex: 'id'},
{id: 'store_name',header: 'Name', align: 'left', sortable: true, width: 300, dataIndex: 'store_name'},
{header: 'Domain', align: 'left', sortable: true, width: 225, dataIndex: 'domain', renderer: renderDomainLink = function(domain){ return '<a href="http://'+domain+'" target="_blank">'+domain+'</a>'}},
{header: "Bumps", align: 'center',sortable: false, dataIndex: 'id',width: 55, renderer: renderBumpLink = function(id){return '<a href="/admin/store/assoc_bumps/'+id+'" onclick="showThrobber(\'Loading Bumps\');"><img src="/images/icon_bump_add.gif" border="0" title="Add Bump" alt="Add Bump"/></a>';}},
{header: "Coregs", align: 'center',sortable: false, dataIndex: 'id',width: 60, renderer: renderCoregLink = function(id){return '<a href="/admin/store/assoc_coregs/'+id+'" onclick="showThrobber(\'Loading Coregs\');"><img src="/images/icon_coreg_add.gif" border="0" title="Add Coreg" alt="Add Coreg"/></a>';}},
{header: "Products", align: 'center', sortable: false, dataIndex: 'id',width: 65, renderer: renderProductLink = function(id){return '<a href="/admin/store/assoc/'+id+'" onclick="showThrobber(\'Loading Products\');"><img src="/images/icon_product_add.gif" border="0" title="Add Products" alt="Add Products" /></a>';}},
{header: "Design", align: 'center',sortable: false, dataIndex: 'id',width: 55, renderer: renderDesingLink = function(id){return '<a href="#" onclick="showThrobber(\'Loading Designer\');gotoDesigner('+id+');"><img src="/images/icon_designer.gif" border="0" title="Add Design" alt="Add Design"/></a>';}},
{header: "Settngs", align: 'center',sortable: false, dataIndex: 'id',width: 65, renderer: renderSettingsLink = function(id){return '<a href="#" onclick="showThrobber(\'Loading Settings\');gotoSettings('+id+');"><img src="/images/icon_settings.gif" border="0" title="Settings" alt="Settingsg" /></a>';}},
// {header: "QA", align: 'center',sortable: true, dataIndex: 'qa_id',width: 65, renderer: renderQALink = function(id){return '<a href="#" onclick="showThrobber(\'Loading QA Form\');gotoQA('+id+');">'+getQAImage(id)+'</a>';}},
{header: "QA", align: 'center',sortable: true, dataIndex: 'qa_id',width: 65, renderer: renderQALink = function(id){return '<a href="#" onclick="gotoQA('+id+');">'+getQAImage(id)+'</a>';}},
{header: "Category", align: 'left', sortable: true, width: 75, dataIndex: 'category_name'},
{header: "Merchant Flag", align: 'left', sortable: true, width: 100, dataIndex: 'merchant_flag'},
{header: "Created", align: 'left', sortable: true, width: 100, dataIndex: 'display_date'},
{header: "", sortable: false,dataIndex: 'id',renderer: renderEditLink = function(id){return '<a onclick="load_stores_form('+id+');"><img src="/images/icon_store_edit.gif" border="0" title="Edit" alt="Edit"/></a>&nbsp;<a href="#" onclick="confirmDelete('+id+');"><img src="/images/icon_store_delete.gif" border="0" title="Delete" alt="Delete"/></a>';}}
autoExpandColumn: 'store_name',
height: 350,
autofill: true,
title: 'Stores List',
stripeRows: true,
// config options for stateful behavior
stateful: true,
stateId: 'grid',
buttons: [
{text: 'Add Store',handler: function(){showThrobber('Redircting to add a store');window.location="/admin/store/add";}},
{text: 'Archive', handler: function(){showThrobber('Loading Archived Stores');window.location="/admin/store/archive";}},
{text: 'Mids', handler: function(){showThrobber('Loading Merchant Stores');window.location="/admin/store/mids";}},
{text: 'Stores', handler: function(){showThrobber('Loading Stores List');window.location="/admin/store/";}}
buttonAlign: 'left'
}); // storeGrid = new Ext.grid.GridPanel({

// render the grid to the specified div in the page


30 Nov 2009, 1:07 PM
One of the values you can pass to the record (that you currently are not, based on your code snippet) is the record that the current row references. From there you can get the ID value by record_variable.get('id').

30 Nov 2009, 2:02 PM
sorry I am new to ext.js.... How do I refer to the "record_variable"?


30 Nov 2009, 2:10 PM
It's the third variable that you can pass to the renderer. You're currently only passing one (the value) when you declare function(id) in your snippet. Check the documentation for Ext.grid.Column -- the renderer config property has everything you'd need.