Meanwhile, until it is realeased,
I have done my own implementation
For those who are interested, this is how you could do it.
Step 1.Create 2 icons, One for open-eye and other for the closed eye and place them in the icons folder
(I have attaced the icon images)
Step 2.Go to the icons.css and add the icon class and point to the relevant icon images
.icon-eye-open{
background:url('icons/eye_open.png') no-repeat center center;
}
.icon-eye-closed{
background:url('icons/eye_closed.png') no-repeat center center;
}
Step 3.my new password input looks like this (note the data-options) :
<input name="oldPassword"
id="oldPassword"
class="easyui-textbox"
type="password"
maxlength="50"
required="true"
missingMessage="Please enter Existing Password"
data-options="
icons:[{
iconCls:'icon-eye-open',
handler: function(e){
handleShowHidePassword(e);
}
}]
"
>
Step 4.the javascript function handleShowHidePassword
function handleShowHidePassword(e){
var currentInputType = $(e.data.target).textbox('textbox').attr('type');
var newInputType = '';
var theIcon = $(e.data.target).textbox('getIcon', 0);
var currentIconClassName = theIcon[0].className;
var newIconClassName = "";
if(currentInputType == 'password'){
newInputType = 'text';
newIconClassName = "textbox-icon icon-eye-closed";
}else if(currentInputType == 'text'){
newInputType = 'password';
newIconClassName = "textbox-icon icon-eye-open";
}
if(newInputType=='text' || newInputType=='password'){
$(e.data.target).textbox('textbox').attr('type', newInputType);
theIcon[0].className = newIconClassName;
}
}
Hope this helps