Question

Below I’m trying to retrieve a specific category record in my data store for a category field in my grid based on what value is stored for that field’s (column’s) value. The value of “categoryId” returns “2”. Why isn’t findRecord returning the record? It displays “-1” for “category”. When I use it as a combo box store for a dropdown in my form, the record where key=2 exists. I ultimately want to find the record where key=2 and then return the value property, so it displays the value property of that record in my grid view.

FYI: The “key” property is the id of the category record and “value” property is the name of the category record that I want to show (or render in the grid cell).

Category store:

Ext.define('DropdownOption', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'key' },
        { name: 'value' }
    ]
});

var statusDropdownStore = new Ext.data.Store({
    proxy: new Ext.ux.AspWebAjaxProxy({
        url: '/track/Controls/Shared/GeneralService.asmx/GetDropdownOptions',
        actionMethods: {                
            read: 'POST'
        },
        extraParams: {
            user_login: authUser,
            table_name: '[status]'
        },
        reader: {
            type: 'json',
            model: 'DropdownOption',
            root: 'd'
        },
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        }
    })
});   

View (Ext.grid.Panel) columns:

            columns: [

                ... snip ...

                { text: 'Status', dataIndex: 'status', sortable: true, 
                    renderer: function(value, metaData, record, row, col, store, gridView) { 

                        var categoryId = record.get('status');
                        alert("categoryId: " + categoryId);  // displays "categoryId: 2"
                        if (categoryId > 0)
                        {
                            var category = statusDropdownStore.findRecord('key', categoryId);
                            alert("category: " + category);  // displays "category: -1" which usually means not found
                            //alert(category.get('value'));
                            return '';  // return value property of category record
                        }
                        else
                        {
                            return '';
                        }
                    } 
                },

                { text: 'Date Modified', dataIndex: 'date_modified', sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y') },

                ... snip ...

            ],

====================

8/1/2012 @ 5:21pm update:

Okay, the values are blank on grid initial load (meaning it hits the “return ”;” line of code. But when I go into the record, and click “Save”, all of the rows in the grid show the category name–using the new code below. As a side note, I used to have the id column named “key”, but I renamed it to “id”.

                { text: 'Status', dataIndex: 'status', sortable: true, 
                    renderer: function(value) { //, metaData, record, row, col, store, gridView) { 

                        if (value > 0) {
                            var r = statusDropdownStore.findRecord('id', value);
                            if (r != null)
                            {
                                var catName = r.get('value');
                                return catName;
                            }
                        }
                        return '';
                    } 
                },

Answer 1

Your code looks totally fine, I do the same thing for renderers also:

renderer: function(value) {
    if (value) {
        var record = refStore.findRecord('id', value),
            name = record.get('name');
        return name;
    }
},

Strange thing is that findRecord is supposed to return null if not found, not -1.

The only thing I can think of is this from the docs:

When store is filtered, finds records only within filter.

Here is the model I use for that refStore (above):

Ext.define('MyApp.model.Reference', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',    type: 'int'},
        {name: 'name',  type: 'string'},
        {name: 'active',type: 'bool'}
    ],
});