PDA

View Full Version : combo with watermark problem?



pinidbest
17 Jul 2012, 5:29 AM
Hi,
I want to clear a textbox that is created using xtype:combo

It has a emptyText propert that I want to clear when the mouse is focused.
Its working in IE but not in chrome. Any ideas?

In addition - once an operation is completed I want to clear this watermark at all.
The setEmptyText does nothing - any ideas on that?

arthurakay
17 Jul 2012, 5:36 AM
Can you post some code? I'd like to see exactly what you're doing, rather than guessing.

pinidbest
17 Jul 2012, 5:40 AM
{
xtype: 'combo',
emptyText: 'Search Contacts',
id: 'SA_txtSearch',
itemId: 'SA_txtSearch',
flex: 8,
editable: true,
forceSelection: false,
minChars: 2,
typeAhead: false,
hideTrigger: true,
selectOnFocus: false,
enableKeyEvents: true,
padding: "5 0 5 5",
fieldCls: 'txtRoundedCornderNoLeft',
listeners: {

keyup: { scope: this, fn: this.onSearchKeyUp } // //Handleing the mouseenter to handleing the water mark // focus: { scope: this, fn: this.onFocus }, // blur: { scope: this, fn: this.onBlur } }

arthurakay
17 Jul 2012, 6:06 AM
I've modified your example to work... you had the right idea, just needed a bit of clarity I think :D

index.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="page-title">Support Tix</title>

<link rel="stylesheet" type="text/css" href="../../extjs-4.1.0/resources/css/ext-all.css">
<script type="text/javascript" src="../../extjs-4.1.0/ext-all-debug.js"></script>

<script type="text/javascript" src="app.js"></script>
</head>
<body>

<div id="combo"></div>
<div id="button"></div>

</body>
</html>



app.js


Ext.onReady(function () {

var combo = Ext.create('Ext.form.field.ComboBox', {
renderTo : 'combo',
width : 200,

store : new Ext.data.Store({
fields : [ 'one', 'two' ],
data : [
{ one : 'example a', two : '123' },
{ one : 'example b', two : '456' },
{ one : 'example c', two : '789' }
]
}),

displayField : 'one',
valueField : 'two',

emptyText : 'Search Contacts',
flex : 8,
editable : true,
forceSelection : false,
minChars : 2,
typeAhead : false,
hideTrigger : true,
selectOnFocus : false,
enableKeyEvents : true,
listeners : {
focus : function (thisCmp, eventObj, eventOptions) {
thisCmp.inputEl.dom.placeholder = ''; //force the removal of the placeholding text
},
blur : function (thisCmp, eventObj, eventOptions) {
thisCmp.applyEmptyText();
}
}
});

var button = Ext.create('Ext.button.Button', {
renderTo : 'button',
text : 'Clear Combo emptyText',
listeners : {
'click' : function () {
combo.emptyText = '';
combo.inputEl.dom.placeholder = combo.emptyText;
}
}
});
});

arthurakay
17 Jul 2012, 6:07 AM
FYI, my example is using 4.1

And setEmptyText() doesn't exist on the ComboBox class... don't know where you got that from.

pinidbest
17 Jul 2012, 6:08 AM
thaks!

pinidbest
17 Jul 2012, 6:09 AM
This is still a bug since the focus on IE automaticly clears the wateermark