Yet another combo select problem...

[GFS]

first off yes this is similar to http://extjs.com/forum/showthread.php?t=63321, but the solution there did not help me with my problem so I am starting another thread....

When the combobox is expanded all that is shown is a blank selection. Yet if that one item is selected then the first item in the array is chosen but I have no access to the other two elements in the array
An example is shown below:
Expanded:
comboBox1..jpg
after the item is selected:
comboBox2..jpg

var purposeCombo = new Ext.form.ComboBox({
        store:new Ext.data.SimpleStore({data:[['t','Testing'],['i','Inspection'],['m','Meeting']],fields:['letter','disp']}),
        tpl:new Ext.XTemplate('<tpl for =".">','<div class="x-combo-list-item">{disp:defaultValue("&# 160;")}</div>','</tpl>'),
        //typeAhead: true,
        //forceSelection: true,
        displayField: 'disp',
        mode: 'local',
        triggerAction: 'all',
        emptyText: 'Select purpose ... ',
        selectOnFocus: true,
        fieldLabel:'Purpose',
        listClass: 'x-combo-list',
    });

.. and the &# 160; has a space for it to show up here but in my code that space is not there.

My experience with XTemplate is very limited so I think I am just missing something there even though other examples are very similar to this one.

[RobSmith]

Did you try this, regarding the Template:

http://extjs.com/forum/showthread.php?t=29965

[GFS]

Thanks rob for the link. I guess my extensive search of the postings was not that extensive after all.

I did solve the problem but not my confusion of what is happening. The solution was something I had tried many times before

var purposeCombo = new Ext.form.ComboBox({
        store:new Ext.data.SimpleStore({data:[
                    ['T', 'Testing'],
                    ['I', 'Inspection'],
                    ['M', 'Meeting']
                ],
                fields:['letter','disp']
        }),
        //tpl:new Ext.XTemplate('<tpl for ="."><div class="x-combo-list-item">{disp:defaultValue(" ")}</div></tpl>'),
        tpl: new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item">{disp}</div></tpl>'),
        //typeAhead: true,
        //forceSelection: true,
        displayField: 'disp',
        mode: 'local',
        triggerAction: 'all',
        emptyText: 'Select purpose ... ',
        selectOnFocus: true,
        fieldLabel:'Purpose',
        listClass: 'x-combo-list',
    });

Actually all I had to do was remove the defaultValue(&# 160;') and the combo Box works the way I expect it to. The confusion comes from the fact that I have to use this defaultValue in another comboBox in this application, if I remove it from that comboBox's tpl then it displays nothing as well... there really is no difference between these two elements yet the XTemplate for them has to be different. I guess there is a difference between them that I don't see. All this has done for me is make the XTemplate more of a mystery to me...