Help with formpanel item.

[profunctional]

I have a form panel, which currently has an item called "Choose Customer". The way it is implemented now is it is a textfield like this:



xtype: 'textfield',
disabled: true,
cls: 'arrow',
value: 'Choose Customer',
placeholder: 'Choose Customer',
listeners: {
afterrender: function(c){
c.fieldEl.on('click', function(){
mainPanel.setCard(customerSearchForm, 'slide');
});
}
}


However, I can't get the event to fire. This is because I have the texfield "disabled", so that the user can't actually type anything into the field. I need it to slide to another panel where the user will choose an item. Once the user chooses an item, the textfield will be set to that value.

I've attached a screenshot of what it is supposed to look like. I would like it to function much like a native iPhone form, where a user can click on a list element to slide to another panel. But in my case, I need to work inside the form panel. Is there a better way to do this? Or how can I get an event to fire, when the item is disabled?

[evant]

Disabled items don't fire events. Why not just use a button?

[profunctional]

I actually have it working with a button, but I would much prefer it to look like the screenshot n the buttons rounded edges don't look as nice as a simple list item with an arrow. N


Is it possible to make a button look like the screenshot?

[profunctional]

Figured out that I can override a button with baseCls. This gets rid of the button's style. Does anyone know where I can get the default style for the textfield? I just need the left padding, height etc. So far my guess is:

background-color:#FFFFFF;
height:2.5em;
line-height:2.5em;
padding-left:0.7em;