How to make template conditioning in Ext JS with the current value?

Question

I have this object ( which is a combobox with an array store ):

        Ext.create('Ext.data.Store', {
            storeId: 'votationStore',
            fields:[ 'id', 'eligible_for_voting'],
            data: [
                { id: 1, eligible_for_voting: true },
                { id: 2, eligible_for_voting: false },
                { id: 3, eligible_for_voting: false },
                { id: 4, eligible_for_voting: false }
            ]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Grid',
            store: Ext.data.StoreManager.lookup('votationStore'),
            columns: [
                { text: 'Number', dataIndex: 'id' },
                {
                    text: 'Can be voted?',
                    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                return value?'Yes':'No';
                    },
                    dataIndex: 'eligible_for_voting',
                    flex: 1,
                    editor: {
                        xtype: 'combobox',
                        displayField: 'id',
                        displayTpl: [
                            '<tpl for=".">',
                            '    <tpl if="values">',
                            '        Yes',
                            '        <tpl else>',
                            '            No',
                            '        </tpl>',
                            '    </tpl>'
                        ],
                        store: [
                            true,
                            false
                        ],
                        valueField: 'id'
                    }
                }
            ],
            plugins: [
                        {
                            ptype: 'cellediting',
                            clicksToEdit: 1
                        }
            ],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });

As you can see from above, i am trying to access directly the value selected from the store, despite the key ref.

The template code:

   <tpl for=".">
        <tpl if="values">
           Yes
        <tpl else>
           No
        </tpl>
    </tpl>

Usually i am aware if you've a structured object you might use if={name_object}

But what if you want to access the object directly and the store as a plain array without keys?

Extra info: also i am using sencha architect with 6.60 version.

https://fiddle.sencha.com/#view/editor&fiddle/2vk1

Integration: What I am trying to achieve is to change the displayed text accordingly to what I chose in the combobox, using the displayTpl template.

From what I read into the documentation, using <tpl for="."> allows me to access the context value direct and make a pointer in template. With <tpl if="values"> I am trying to take that value made available through for="." and access it, just to verify if it's true or false.

I wanted to make this without defining fields or access them by bind, but directly without any reference like {votation.id} or something like that, in case i defined the upper object.

Is that possible?

Answer 1

I don't know if I understood you correctly. You want to display Yes when value is true, and No when value is false ?

Check the fiddle https://fiddle.sencha.com/#view/editor&fiddle/2vnl