PDA

View Full Version : Button with icon which changed when i click



pepeEL
30 Oct 2014, 1:53 AM
Hello
I am beginner. I have a TV server with button to show passwords. This button have icon named 'eye' which is savev in ext.css:
.eye {
background-image: url(../icons/eye.png) !important;
}

Code button in idnode.js is:

if (conf.hidepwd) {
buttons.push('-');
abuttons.add = new Ext.Toolbar.Button({
tooltip: 'Show or hide passwords',
iconCls: 'eye',
text: 'Show passwords',
disabled: false,
handler: function() {
conf.showpwd = !conf.showpwd ? true : false;
this.setText(conf.showpwd ? 'Hide passwords' : 'Show passwords');
roweditor_destroy();
roweditor(select.getSelected());
}
});
buttons.push(abuttons.add);
}


I wnat changed icon for this:
.showPass{
background-image: url(../icons/show_pass.png) !important;
}

.hidePass{
background-image: url(../icons/hide_pass.png) !important;
}


When button have text Show password the icon must be: show_pass.png
When button have text Hide password the icon must be: hide_pass.png

Please help me how changed the code of button to work with this double icon.

slemmon
3 Nov 2014, 4:01 PM
Hi,

You'll want to pass the classname to the button's setIconCls method:
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.button.Button-method-setIconCls

pepeEL
4 Nov 2014, 10:35 AM
Can you tell me more how i can use it because i am beginner oj ext js. I dont know how it use. Please

slemmon
4 Nov 2014, 1:22 PM
Are you wanting to change the icon on click or what will drive the iconCls change in your use case?

pepeEL
4 Nov 2014, 2:32 PM
When page was loaded the button have some icon 1.png. when i click on the button icon change to 2.png
when click again on the button icon change back on 1.png

Buuto also have text. Default text after load page is Show passwords. When click on button change on Hide Password. When click again text change to Show passwords.

slemmon
4 Nov 2014, 11:01 PM
The button's handler can be used to perform some action (on the button itself in this case) when clicked. In the example below we'll give the button a myPressed config that will track the state of whether the button is pressed by the user or in its default state. The handler will call setText (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.button.Button-method-setText)() and setIconCls (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.button.Button-method-setIconCls)() and pass a different text / iconCls depending on whether the button as previously pressed by the user.

cs6

pepeEL
4 Nov 2014, 11:42 PM
But when i replaced it of my code from firts post thic probably not working. Can you give me good code reffering to code from my current button ?

pepeEL
5 Nov 2014, 3:04 AM
This is file where is this button in line 1677

https://drive.google.com/file/d/0B9_f5y6viF8RZ0RzV0dpNDNfWjg/view?usp=sharing

pepeEL
12 Nov 2014, 8:37 AM
Please help me