Print Page - READONLY Textbox enabling onClickIcon event [Solved]

Title: READONLY Textbox enabling onClickIcon event [Solved]
Post by: devnull on May 09, 2015, 06:45:20 PM

Hi;

Is it possible to have the icon & click event enabled when the testbox is disabled ??

I thought I saw a post resolving this but have searched and can't seem to find it.

Thanks

Title: Re: Disabled Textbox enabling onClickIcon event
Post by: stworthy on May 09, 2015, 07:20:18 PM

A disabled textbox will disable all the icon clicking handlers. To enable the icon clicking, you have to get the icon and bind events by yourself.

Code:

$('#tt').textbox({
    disabled:true,
    icons:[{
        iconCls:'icon-ok',
        handler:function(){
            //...
        }
    }]
}).textbox('getIcon',0).bind('click',function(){
    console.log('click icon')
})

Title: Re: Disabled Textbox enabling onClickIcon event
Post by: devnull on May 09, 2015, 07:28:04 PM

My apologies, I meant READONLY not enabled, can this be done ?

Title: Re: READONLY Textbox enabling onClickIcon event
Post by: stworthy on May 10, 2015, 04:14:39 AM

If you just want to prevent from editing the textbox and allow the user to click the icons, please set the 'editable' property to false.

Code:

$('#tt').textbox({
    editable:false,
    icons:[{
        iconCls:'icon-ok',
        handler:function(){
            //...
        }
    }]
})

Title: Re: READONLY Textbox enabling onClickIcon event
Post by: devnull on May 10, 2015, 04:48:45 AM

Thanks, I tried that, but I cannot get the onClickIcon() event to fire at all.

I would also have expected the icon to be greyed out and to highlight on mouseover ?!

http://jsfiddle.net/seKvb/47/

Title: Re: READONLY Textbox enabling onClickIcon event
Post by: stworthy on May 10, 2015, 04:56:30 PM

Setting the 'iconCls' property only allows the textbox displaying a background icon on the component, no events occur. Please use the 'icons' property instead. The updated example is available from http://jsfiddle.net/seKvb/48/

Title: Re: READONLY Textbox enabling onClickIcon event
Post by: devnull on May 10, 2015, 07:50:05 PM

Oops, OK thanks.

How can I get the parent textbox value from the iconhandler event as $(this).textbox() does not work:

Code:

  $('#XXX').textbox({
    icons:[{
      iconCls:'aicon-go',
      handler: function(){
        var val = $(this).textbox('getValue');
        if(val.length < 1) return false;      
      }
    }]
  })

Title: Re: READONLY Textbox enabling onClickIcon event
Post by: stworthy on May 10, 2015, 07:55:45 PM

Please try this code.

Code:

$('#XXX').textbox({
    icons:[{
        iconCls:'aicon-go',
        handler:function(e){
            var val = $(e.data.target).textbox('getValue');
            console.log(val)
        }
    }]
})

Title: Re: READONLY Textbox enabling onClickIcon event
Post by: devnull on May 10, 2015, 07:58:36 PM

Thanks so much.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on May 09, 2015, 06:45:20 PM