PDA

View Full Version : Ext Combo add a space at the beginning of item text



hieu79vn
13 Sep 2012, 6:04 AM
Hi
I create my combobox like this

{
xtype: 'container',
anchor: '100%',
layout: 'column',
items:[
{
xtype: 'datefield',
fieldLabel: 'Last update',
itemId: 'lastUpdateDateFrom',
columnWidth: 0.24,
labelWidth: 120,
format: 'j M Y'
},
{
xtype: 'datefield',
fieldLabel: ' ',
itemId: 'lastUpdateDateTo',
labelSeparator: '',
columnWidth: 0.15,
labelWidth: 20,
format: 'j M Y'
},
{
xtype : 'label',
html : ' ',
columnWidth: 0.07
},
{
xtype: 'combobox',
fieldLabel: 'Read by me?',
store: storeComboReadByMe,
itemId: 'comboReadByMe',
displayField: 'status_label',
valueField: 'status_code',
queryMode: 'local',
typeAhead: true,
labelWidth: 98,
columnWidth: 0.17,
tpl: new Ext.XTemplate('<tpl for=".">' + '<li style="height:22px;" class="x-boundlist-item" role="option">' + '{status_label}' + '</li></tpl>')

}
]
},


but Ext add a space at the beginning of item text.
38671
Do you know why?

Thank you

sword-it
13 Sep 2012, 6:15 AM
HI!

you may try to add list-style-type:none to your li.


<li style="height:22px;list-style-type:none"

hieu79vn
13 Sep 2012, 8:19 AM
Hi Sword-it,

it doesn't solve the problem

scottmartin
13 Sep 2012, 9:08 AM
See if this will help:

'<div class="x-combo-list-item">{status_label}</div>',

Scott.

hieu79vn
13 Sep 2012, 11:53 PM
Hi Scott

I changed the emplate to this

tpl: new Ext.XTemplate('<tpl for=".">' + '<div class="x-combo-list-item">{contact_name}</div></tpl>')

it remove the space at the beginning of item text but there is no longer the empty space at the top position. Furthermore, I cannot select an item

38692

scottmartin
14 Sep 2012, 5:54 AM
See if this will help:



var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"\u00a0"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
listConfig: {
itemCls : 'x-combo-list-item',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-combo-list-item">{name}</div>',
'</tpl>'
)
}
});


Scott.

hieu79vn
17 Sep 2012, 7:08 AM
Hi Scott,

It works well. But there is still only one small problem. The mouse is not changed to "hand" icon when mouse is over the item. And the font is not 'normal'.

How should I customize the x-combo-list-item

to solve the above problem?

Thank you