PDA

View Full Version : XCheckbox - A nicer checkbox always submitting configurable values



jsakalos
10 Feb 2008, 1:42 PM
Hi all,

I've always had troubles with checkboxes as the default behavior of HTML is to submit the checkbox value if checked and do not submit anything if not checked. Although this behavior might be useful in early ages of internet now, that web pages are used as database frontends, I'd like to know that value is false. Also, the default browser checkbox look, especially in Firefox, has aged.


So here it is.

Enjoy!

For update on latest SVN and upcoming Ext 2.2 see: http://extjs.com/forum/showthread.php?p=194810#post194810

You can find latest code for Ext 2.2 here: http://extjs.com/forum/showthread.php?p=211041#post211041



// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* Ext.ux.form.XCheckbox - nice checkbox with configurable submit values
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.XCheckbox.js 81 2008-03-20 11:13:36Z jozo $
* @date 10. February 2008
*
*
* @license Ext.ux.form.XCheckbox is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/**
* Default css:
* .xcheckbox-wrap {
* line-height: 18px;
* padding-top:2px;
* }
* .xcheckbox-wrap a {
* display:block;
* width:16px;
* height:16px;
* float:left;
* }
* .x-toolbar .xcheckbox-wrap {
* padding: 0 0 2px 0;
* }
* .xcheckbox-on {
* background:transparent url(./ext/resources/images/default/menu/checked.gif) no-repeat 0 0;
* }
* .xcheckbox-off {
* background:transparent url(./ext/resources/images/default/menu/unchecked.gif) no-repeat 0 0;
* }
* .xcheckbox-disabled {
* opacity: 0.5;
* -moz-opacity: 0.5;
* filter: alpha(opacity=50);
* cursor:default;
* }
*
* @class Ext.ux.XCheckbox
* @extends Ext.form.Checkbox
*/
Ext.ns('Ext.ux.form');
Ext.ux.form.XCheckbox = Ext.extend(Ext.form.Checkbox, {
offCls:'xcheckbox-off'
,onCls:'xcheckbox-on'
,disabledClass:'xcheckbox-disabled'
,submitOffValue:'false'
,submitOnValue:'true'
,checked:false

,onRender:function(ct) {
// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// save tabIndex remove & re-create this.el
var tabIndex = this.el.dom.tabIndex;
var id = this.el.dom.id;
this.el.remove();
this.el = ct.createChild({tag:'input', type:'hidden', name:this.name, id:id});

// update value of hidden field
this.updateHidden();

// adjust wrap class and create link with bg image to click on
this.wrap.replaceClass('x-form-check-wrap', 'xcheckbox-wrap');
this.cbEl = this.wrap.createChild({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls});

// reposition boxLabel if any
var boxLabel = this.wrap.down('label');
if(boxLabel) {
this.wrap.appendChild(boxLabel);
}

// support tooltip
if(this.tooltip) {
this.cbEl.set({qtip:this.tooltip});
}

// install event handlers
this.wrap.on({click:{scope:this, fn:this.onClick, delegate:'a'}});
this.wrap.on({keyup:{scope:this, fn:this.onClick, delegate:'a'}});

// restore tabIndex
this.cbEl.dom.tabIndex = tabIndex;
} // eo function onRender

,onClick:function(e) {
if(this.disabled || this.readOnly) {
return;
}
if(!e.isNavKeyPress()) {
this.setValue(!this.checked);
}
} // eo function onClick

,onDisable:function() {
this.cbEl.addClass(this.disabledClass);
this.el.dom.disabled = true;
} // eo function onDisable

,onEnable:function() {
this.cbEl.removeClass(this.disabledClass);
this.el.dom.disabled = false;
} // eo function onEnable

,setValue:function(val) {
if('string' == typeof val) {
this.checked = val === this.submitOnValue;
}
else {
this.checked = !(!val);
}

if(this.rendered && this.cbEl) {
this.updateHidden();
this.cbEl.removeClass([this.offCls, this.onCls]);
this.cbEl.addClass(this.checked ? this.onCls : this.offCls);
}
this.fireEvent('check', this, this.checked);

} // eo function setValue

,updateHidden:function() {
this.el.dom.value = this.checked ? this.submitOnValue : this.submitOffValue;
} // eo function updateHidden

,getValue:function() {
return this.checked;
} // eo function getValue

}); // eo extend

// register xtype
Ext.reg('xcheckbox', Ext.ux.form.XCheckbox);

// eo file

dawesi
10 Feb 2008, 9:49 PM
no php in site here... any online demos bro?

jsakalos
10 Feb 2008, 10:42 PM
Well, I just supposed that this is such easy to test that I haven't created any demo. If you want to test it just include the file above in any Ext app that uses checkbox(es) copy css form comment and adjust link to your ext installation in the css.

Then replace xtype:'chexbox' in your app with xtype:'xcheckbox'. It looks like menu or Checkbox selection model checkboxes - the only difference is that it submit user configurable values to server.

It is not bound to PHP in any way. If you see PHP tags around the code I use them only because with PHP tags the code is color syntax highlighted. It is JavaScript code.

Cheers,

tof
11 Feb 2008, 2:48 AM
Saki,

Please continue - you are removing, little by little, all the problems of extjs' form items :)

Anyway, thanks a lot for sharing your work, really.

bcsd
11 Feb 2008, 6:36 AM
Thank you Saki! This is just what I've been looking for. Unfortunately, I'm having some trouble making it to work for me. I followed your instructions, but I receive the following error in FireBug in the setValue function:

this.cbEl has no properties:
this.cbEl.removeClass([this.offCls, this.onCls]);

It looks like the line
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);
is calling setValue before this.cbEl gets set.

I deleted the following line from the onRender function:
this.cbEl = this.wrap.createChild({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls});

Then I inserted the following code in the setValue function after the this.updateHidden(); call:
if(!this.cbEl){
this.cbEl = this.wrap.createChild({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls});
}

This worked for me, and I tested it in Firefox and IE6. Does this make sense to you? Let me know if you think there is a better way to resolve this.

Thanks again,

Peter

jsakalos
11 Feb 2008, 10:08 AM
Just one question to make everything clear: Do you call explicitly function render? If you can, post please a sample of code that is causing troubles.

The logical seems to be to enclose manipulating css classes in setValue in if block:



,setValue:function(val) {
if('string' == typeof val) {
this.checked = val === this.submitOnValue;
}
else {
this.checked = !(!val);
}

if(this.rendered) {
this.updateHidden();
this.cbEl.removeClass([this.offCls, this.onCls]);
this.cbEl.addClass(this.checked ? this.onCls : this.offCls);
}

this.fireEvent('check', this, this.checked);
} // eo function setValue




I wouldn't say that removing wrap in onRender is desirable. Anyway, gimme a code causing troubles and I'll fix it.

bcsd
11 Feb 2008, 11:04 AM
Thanks again for your help. I started putting together a demo of the problem, but I quickly realized that I can't reproduce it. I just put your original code back in and it works flawlessly.

I'm not sure what the problem was, but I spent about an hour this morning debugging it with firebug and came up with the solution that I posted. I guess you can disregard my original post. As I said, I tested my workaround with IE6 and FF, but I only tested the "problem" code in FireFox. I suspect that my problem may have been an issue with FF caching some of my code, because I've been running into little issues with caching all day.

Anyway, thanks again for your excellent extension!

-Peter

jsakalos
11 Feb 2008, 11:08 AM
Peter,

I've taken you advice and I've put the if block in the above code. If you want to use XCheckbox in your app take the code from the first post again. It's, thanks go to you, more bullet proof as it was before.

dawesi
11 Feb 2008, 3:54 PM
oh my bad, I just read 'PHP code' and assumed 'PHP code'... it's javascript... :">

jcwatson11
4 Mar 2008, 9:54 PM
Hi Saki and everyone else interested in this issue.

I thought I would post my solution to this discussion for anyone who wants the simplest possible option that will fix the checkbox submission problem. Note that in ext-base.js for Ext 2.0 there is a function of Ext.lib.Ajax called serializeForm. This is where Ext puts together the URI string for Ajax submission.

And it just so happens that inside this function the simplest solution presents itself.

Simply change the following code:



case"checkbox":
if(G.checked){
K+=encodeURIComponent(E)+"="+encodeURIComponent(H)+"&"
}
break;


to:



case"checkbox":
if(G.checked){
K+=encodeURIComponent(E)+"="+encodeURIComponent(H)+"&"
} else {
K+=encodeURIComponent(E)+"="+encodeURIComponent('0')+"&"
}
break;


Note that I used the string literal '0' because my serverside framework always expects a zero when a checkbox is unchecked.

Also note that it is not recommended that you change ext-base directly, and therefore you should probably redefine the entire function elsewhere in your code, like this:



// redefining Ext.lib.Ajax.serializeForm to handle checkboxes more ideally

Ext.lib.Ajax.serializeForm = function(F){
if(typeof F=="string"){
F=(document.getElementById(F)||document.forms[F])
}
var G,E,H,J,K="",M=false;
for(var L=0;L<F.elements.length;L++){
G=F.elements[L];
J=F.elements[L].disabled;
E=F.elements[L].name;
H=F.elements[L].value;
if(!J&&E){
switch(G.type){
case"select-one":
case"select-multiple":
for(var I=0;I<G.options.length;I++){
if(G.options[I].selected){
if(Ext.isIE){
K+=encodeURIComponent(E)+"="+encodeURIComponent(G.options[I].attributes["value"].specified?G.options[I].value:G.options[I].text)+"&"
}else{
K+=encodeURIComponent(E)+"="+encodeURIComponent(G.options[I].hasAttribute("value")?G.options[I].value:G.options[I].text)+"&"
}
}
}
break;
case"radio":
case"checkbox":
if(G.checked){
K+=encodeURIComponent(E)+"="+encodeURIComponent(H)+"&"
} else {
K+=encodeURIComponent(E)+"="+encodeURIComponent('0')+"&"
}
break;
case"file":
case undefined:
case"reset":
case"button":
break;
case"submit":
if(M==false){
K+=encodeURIComponent(E)+"="+encodeURIComponent(H)+"&";M=true
}
break;
default:
K+=encodeURIComponent(E)+"="+encodeURIComponent(H)+"&";
break
}
}
}
K=K.substr(0,K.length-1);
return K
}


A further discussion on a permanent solution for Ext is discussed in the following thread:

http://extjs.com/forum/showthread.php?t=28449

Happy coding!

jsakalos
5 Mar 2008, 3:10 AM
Yes, this is one of the valid options to solve the checkbox submission problem. I'd say that it is best one if you want to use standard checkboxes as it resolves the issue in the lowest level possible and once implemented you don't need to care about it.

I decided for this extension to because I wanted "to kill two flies in one shot" and these were submission problem and UI of checkbox. (FF checkboxes at my Linux box look really ugly.)

Everyone can now choose the solution that better suits to his/her needs. Thanks for sharing.

kimu
7 Mar 2008, 12:24 PM
Is there a way to disable it? I've tried to pass in the config disabled: true, but it doesn't change anything. The component is still alive and responding.
The same with readOnly: true.

jsakalos
7 Mar 2008, 1:03 PM
No, not at present. Do you want to implement it or should I do so?

kimu
7 Mar 2008, 4:44 PM
this should work

Code removed by jsakalos as it has been merged to the main stream. Take updated code from the first post.

I think that is impossible to disable the a element (cbEl), so I've logically disabled it doing a check in setValue. I don't know if it could be enough.
I didn't find necessary to do a check also in getValue, but maybe isn't a bad idea.

EDIT: I've changed it putting the check in onClick. Put the check in setValue prevented data loading.
Bye

jsakalos
7 Mar 2008, 5:01 PM
kimu,

thank you for improving xcheckbox. I'll test it tomorrow and I'll let you know but at the first glance the code looks good.

Would you please supply xcheckbox-disabled class?

kimu
7 Mar 2008, 5:12 PM
Ops, sorry.
The second time I've pasted the code I forgot the header.
Here the complete code:

Code removed by jsakalos as it has been merged to the main stream. Take updated code from the first post.

jsakalos
8 Mar 2008, 3:42 AM
kimu,

I've integrated your code to the main stream (first post) and removed it from previous posts, hope you don't mind, to avoid any confusion of other users.

Thank you very much for your contribution.

kimu
8 Mar 2008, 5:57 AM
Certainly not. It's a pleasure to give a little help.

Bye

infinit
12 Mar 2008, 2:35 AM
I did the steps required, but xcheckbox can't display correctly, only showing the fieldLabel, Can you help?
Thanks

jsakalos
12 Mar 2008, 3:43 AM
Check you css classes. They are in the comment at the beginning of the XCheckbox source. You may need to adjust paths in them.

infinit
12 Mar 2008, 4:32 AM
Check you css classes. They are in the comment at the beginning of the XCheckbox source. You may need to adjust paths in them.

Thanks for your timely help and your great plugin, it works fine.

gedwin
14 Mar 2008, 10:06 AM
This is very cool. Saki thank you very much for the same. I have a question, is there function for onReadOnly? I need the value of the field when its disabled. So as a work around I changed



onDisable:function() {
this.cbEl.addClass(this.disabledClass);
//this.el.dom.disabled = true; This was Commented by Gifty Edwin to make it readonly so that the values are submited to the server
this.el.dom.readOnly = true;
} // eo function onDisable


Any suggestion is welcome

jsakalos
14 Mar 2008, 10:36 AM
Hmmm, disabled inputs are not submitted to server so if you change it to readOnly it will get submitted so it breaks consistency with another Ext fields. I'd recommend against it.

gedwin
14 Mar 2008, 11:22 AM
Hmmm, disabled inputs are not submitted to server so if you change it to readOnly it will get submitted so it breaks consistency with another Ext fields. I'd recommend against it.

Exactly. Thats what I do not want to do. I was trying to avoid the W3C standard that lets you change checkbox when readOnly mode (readOnly does not apply to checkbox and radio). So if I disabled it did not submit.

In any case this extension is very cool.

jsakalos
14 Mar 2008, 3:44 PM
I'm not quite sure if I'm fully getting what problem are you trying to solve, what behavior are you trying to achieve...

gedwin
17 Mar 2008, 11:21 AM
I'm not quite sure if I'm fully getting what problem are you trying to solve, what behavior are you trying to achieve...

ReadOnly feature. The checkbox cannot be changed and the value is submitted.

jsakalos
17 Mar 2008, 11:35 AM
OK, put this as first lines in setValue, test it and let me please know it is what you're looking for:



if(this.readOnly) {
return:
}

gedwin
17 Mar 2008, 12:37 PM
Saki,

How do I make the checkbox ReadOnly?



bcpWaivedYr1.getEl().dom.readOnly = true;


bcpWaivedYr1 is my checkbox. This does not make it readOnly. I was wondering adding a function onReadOnly that will do the following in your script.



,onReadOnly:function() {
this.cbEl.addClass(this.disabledClass);
this.el.dom.readOnly = true;
}


I am relatively new to Ext. So this might be very easy for you.

jsakalos
17 Mar 2008, 12:45 PM
bcpWaivedYr1.readOnly = true;

gedwin
17 Mar 2008, 12:54 PM
Readonly works perfectly after adding



if(this.readOnly) {
return;
}


Thank you very much Saki. I think this will be useful to others as well.

jsakalos
17 Mar 2008, 12:59 PM
OK, adding... Thanks for testing and debugging.

gedwin
17 Mar 2008, 1:06 PM
Wonderful. Thanks once again.

jsakalos
17 Mar 2008, 1:12 PM
gedwin,

I was thinking a bit and it's not good place to test for readOnly as you prevent setting of value programmatically. The better place is in onClick handler:



,onClick:function(e) {
if(this.disabled || this.readOnly) {
return;
}
if(!e.isNavKeyPress()) {
this.setValue(!this.checked);
}
} // eo function onClick





This way user cannot change the value but program can.

gedwin
18 Mar 2008, 4:08 AM
gedwin,

I was thinking a bit and it's not good place to test for readOnly as you prevent setting of value programmatically. The better place is in onClick handler:



,onClick:function(e) {
if(this.disabled || this.readOnly) {
return;
}
if(!e.isNavKeyPress()) {
this.setValue(!this.checked);
}
} // eo function onClick





This way user cannot change the value but program can.

I completely agree. =D>

xerifa
18 Mar 2008, 5:56 AM
Hi Saki,

I'm creating a Select All checkbox to select other checkbox on the same tabpanel.I'm adding a listener function to Select All checkbox..

xtype:'checkbox',
fieldLabel: 'All',
name: 'All',
listeners: {
check: function(checkbox, checked) {
if (checked) {
formTest.findField('option1').on('change', option1.checked);
return;
}}}

Here Option1 checkbox needs to be checked when All checkbox is selected but its not working for me.

Please Help

Regards

Mayank

jsakalos
18 Mar 2008, 6:07 AM
This question is not XCheckbox related. Better to ask in Help forum.

thetigger
20 Mar 2008, 12:56 AM
I found a problem with XCheckbox with boxLabel
the boxLabel is before the checkbox and the checkbox is on a new line.

I have fixed this like this:
Replace the following code:

// adjust wrap class and create link with bg image to click on
this.wrap.replaceClass('x-form-check-wrap', 'xcheckbox-wrap');
this.cbEl = this.wrap.createChild({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls});
With:

this.wrap.remove();
this.wrap = this.el.wrap({cls: "xcheckbox-wrap"});
if (!this.cbEl){
this.cbEl = this.wrap.createChild({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls});
if(this.boxLabel){
this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
}
}

And change the CSS class xcheckbox-wrap to:

.xcheckbox-wrap a {
display: block;
float: left;
width:16px;
height:16px;
}

jsakalos
20 Mar 2008, 3:12 AM
thetigger,

Thank you for pointing out; I've never tested it with boxLabel. I've chosen simpler fix (added code in bold):



// adjust wrap class and create link with bg image to click on
this.wrap.replaceClass('x-form-check-wrap', 'xcheckbox-wrap');
this.cbEl = this.wrap.createChild({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls});

// reposition boxLabel if any
var boxLabel = this.wrap.down('label');
if(boxLabel) {
this.wrap.appendChild(boxLabel);
}

// support tooltip
if(this.tooltip) {
this.cbEl.set({qtip:this.tooltip});
}
And css change (added line in bold):


.xcheckbox-wrap a {
display:block;
width:16px;
height:16px;
float:left;
}
I have updated the code in first post to contain this bugfix.

Benjamin654
29 Mar 2008, 2:47 PM
Hi,

thanks for this nice addition - i also dislike the default look of checkboxes in ff.

But i found an error when using those xcheckboxes in combination with boxLabel after


{xtype: 'tbfill'}, // or '->'Then it is rendered with a wrong size. I am new to ExtJs - so i dont know how to fix it, but i think a "margin-right" on the right element could correct it.

jsakalos
29 Mar 2008, 3:13 PM
Thanks. I've never tested combination toolbar+box label. I'll take a look.

Dumbledore
2 Apr 2008, 9:42 PM
Hi,

have you updated the code on the first page or where can i find the last version?

And: Any plans that this code works also inside a Tree with has checkboxes?

Bye, Dumbledore

jsakalos
3 Apr 2008, 3:01 AM
It is latest code in the first post. I will put all these "XControls" on my page (http://extjs.eu) soon, take the code from the first post meanwhile.

Dumbledore
4 Apr 2008, 9:06 PM
Saki,

is it possible to get this design and functionality inside a treepanel with checkboxes?

Bye, Dumbeldore

jsakalos
5 Apr 2008, 9:29 AM
Yeah, everything is possible with Ext, however, I don't think that somebody has already done it. At least, I haven't seen anything like that on forums or elsewhere.

robin30
19 Apr 2008, 10:22 AM
hi all,

first wanted to say, don't know in what forum to put this?
this this forum or the Ext.ux.grid.RecordForm.js one.

in my grid i'm also using Ext.ux.grid.RecordForm.js from Saki too (love this guy,lol).

is it possible to use xcheckbox there too?

if i do in Ext.ux.grid.RecordForm.js:

,mapping:{
'auto':'textfield'
,'boolean':'xcheckbox'
,'date':'datefield'
,'float':'numberfield'
,'int':'numberfield'
,'string':'textfield'
}

it will give a error

A[C.xtype || D] is not a constructor

revering to this i assume in Ext.ux.grid.RecordForm:

Ext.apply(o, {
fieldLabel:(c && c.header ? c.header : f.name)
,xtype:this.mapping[f.type] || 'textfield'
});
if('date' === f.type && f.dateFormat) {
o.dateFormat = f.dateFormat;
}
i'm very sorry if i put this question in the wrong forum

regards robin30

jsakalos
20 Apr 2008, 8:31 AM
I haven't tried to use xcheckbox in grid but you can try. Only you need to put it co column model and not in mapping. Anyway, easier would be to follow this example: http://extjs.com/deploy/dev/examples/grid/edit-grid.html

robin30
21 Apr 2008, 4:51 PM
thanks for your quick reply,

see if i can figure it out,lol

thanks again,

regards,

Robin30

robin30
21 Apr 2008, 4:58 PM
you can use it in mapping.


,mapping:{
'auto':'textfield'
,'boolean':'xcheckbox'
,'date':'datefield'
,'float':'numberfield'
,'int':'numberfield'
,'string':'textfield'
}

i did something wrong

i had:

<script type="text/javascript" src="source/core/Ext.us.form.XCheckbox.js"></script>

instead of:

<script type="text/javascript" src="source/core/Ext.ux.form.XCheckbox.js"></script>

jsakalos
21 Apr 2008, 5:23 PM
Oh yes, you've meant recordform mapping... sure you need to include xchecbox code...

Chemist
12 May 2008, 11:29 PM
I need to have checkbox in an editorgridpanel, but the sample here:
http://extjs.com/deploy/dev/examples/grid/edit-grid.html

Doesn't help, because I don't know how many boolean columns will be in a grid. It's created reading columns configuration from database and it's not good to create and remember all the bool fields and then set them into plugins section... Any help?

jsakalos
13 May 2008, 1:10 AM
This is bigger problem than to have a checkbox in a grid column as you are seeking auto-configurable grid. Take a look at JorisA AutoGrid extension.

jplouffe
14 May 2008, 5:50 AM
Can this be extended/duplicated to create radio buttons?

jsakalos
14 May 2008, 7:38 AM
I wouldn't go that direction. There were (are) some user extensions of radios, please search maybe you find what you need.

alexinm
15 May 2008, 11:47 PM
Cool. This xcheckbox thing is exactly what I'm looking for. I read that it's not fully working on IE6 but since the code on the first page has been edited a couple of times I wasn't really sure about that anymore. Has it been fixed in the meantime?


Then replace xtype:'chexbox' in your app with xtype:'xcheckbox'.


Does anybody know a simple and plain example for creating a form with xtype:'checkbox'? Using Google, I only found broken examples with 100+ lines of code, tons of chinese troubleshootings which I can't read and when I tried to use the IntroToExt-tutorial things went wrong because some of the examples seem to be for Ext 1.1. The API is good but not fully stuffed with examples so I have to ask here.

Thanks

jsakalos
16 May 2008, 2:31 PM
Here you are:
http://examples.extjs.eu/?ex=formloadsubmit

alexinm
18 May 2008, 10:57 PM
Wonderful. Thank you very much. And there are a lot of other examples. Sorry for wasting your time.

lobo-tuerto
27 May 2008, 10:04 AM
Hi saki,


I was having some problems loading some checkboxes that have 0 and 1 for submitting off and on values.

I had to change:

this.checked = val === this.submitOnValue;

To:

this.checked = val == this.submitOnValue;

Is this expected, or am I doing something wrong?

jsakalos
27 May 2008, 10:46 AM
Hmmm, I wouldn't do that... === compares value and type so 1 !== "1".

maximumcoder
9 Jun 2008, 2:22 AM
I have noticed that in IE.. clicking on any link with a href='#' causes IE to slow down a bit. It also gives an annoying click. Since XCheckbox uses an <A> tag for handling clicks and displaying images. Ive converted it to <img> tag and it works the same sans that annoying IE click.

Here are my changes. I just thought it would be a nice clean change...
It works the same on FF2 and IE7. Havnt tested on others.




//changes in CSS
.xcheckbox-wrap img {
display:block;
width:16px;
height:16px;
float:left;
}

//changes in JS

this.cbEl = this.wrap.createChild({tag:'img',src:Ext.BLANK_IMAGE_URL, cls:this.checked ? this.onCls : this.offCls});


this.wrap.on({click:{scope:this, fn:this.onClick, delegate:'img'}});
this.wrap.on({keyup:{scope:this, fn:this.onClick, delegate:'img'}});



This is my first hand at customising ANY ExtJS code or third party plugins.. so.. feel free to through it out the window.

Thanks
Hiren

jsakalos
9 Jun 2008, 2:33 AM
I'll test it soon and I'll let you know then.

Thank you.

efreitasrj
12 Jun 2008, 9:55 AM
Hi Saki,

Great extension.

I just had one small minor problem using it: I'm specifying a boxLabel and that label was being shown one line below the checkbox image. I then made a small addition to your CSS that I think solved the issue. I'm not quite sure if there are any colateral effects though:



.xcheckbox-wrap a {
display: block;
float: left;
width: 16px;
height: 16px;
}

mystix
17 Jun 2008, 7:42 AM
just fyi, Ext 2.1svn2301+ breaks the xcheckbox control.

i'm just not sure if it's a css / code change that caused this breakage.

[edit]
it was the code -- breaking changes in 2.1 svn to be exact.

with the new Checkbox class in SVN (rev 2301+), the XCheckbox code can be simplified to the following:


Ext.ux.form.XCheckbox = Ext.extend(Ext.form.Checkbox, {
// public configs
submitOffValue: false,
submitOnValue: true,

// private
onRender: function(ct, position) {
Ext.ux.form.XCheckbox.superclass.onRender.call(this, ct, position);

this.el.remove();
this.el = ct.createChild({tag: 'input', type: 'hidden', name: this.name, id: this.id});

this.updateHidden();
},

setValue : function(v) {
this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');

// update hidden input field
this.updateHidden();

this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
//this.innerWrap[this.disabled ? 'addClass' : 'removeClass'](this.disabledClass);
this.fireEvent("check", this, this.checked);

if (this.handler) {
this.handler.call(this.scope || this, this, this.checked);
}
},

// private
updateHidden: function() {
this.el.dom.value = this.checked ? this.submitOnValue : this.submitOffValue;
}
});
Ext.reg('xcheckbox', Ext.ux.form.XCheckbox);

note: the existing CSS for the XCheckbox is likewise no longer required.

rtconner
23 Jun 2008, 3:13 PM
Probably the wrong place to ask.. but is svn version stable? Can I use it in production systems? Aside from the checkbox enhancements, I think I want the item-selector abilities. Depending on if those abilites are what I'm hoping they are (something along the lines of this: http://www.soubeyrand.info/ext-2.0/examples/ux.multiple/)

Juvs
23 Jun 2008, 5:52 PM
For Ext 2.1 just change this line:


// install event handlers
this.wrap.on({click:{scope:this, fn:this.onClick, delegate:'a', stopEvent:true}});

stopEvent:true is the key...

Also, just in case you want to load a form and set automatically their values I did this change on onRender function:


// update value of hidden field
this.updateHidden();
this.checked = this.value ? this.submitOnValue : this.submitOffValue; //<--- To handle initial value

bobg
25 Jun 2008, 1:23 PM
We had a problem with form getValues and the id for the field not being returned. Giving the field a name fixed the problem.



{
xtype: 'xcheckbox',
id: 'myfield',
name: 'myfield'
}


Perhaps two objects with the same id are being created.

jsakalos
14 Jul 2008, 1:18 AM
With the latest changes in Ext SVN, the XCheckbox can be considerably simplified. Here is the new code (works with current SVN and is also should with upcoming Ext 2.2). Test it please and let me know any issues.



// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* Ext.ux.form.XCheckbox - checkbox with configurable submit values
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.XCheckbox.js 82 2008-03-21 00:17:40Z jozo $
* @date 10. February 2008
*
*
* @license Ext.ux.form.XCheckbox is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

/**
* @class Ext.ux.XCheckbox
* @extends Ext.form.Checkbox
*/
Ext.ns('Ext.ux.form');
Ext.ux.form.XCheckbox = Ext.extend(Ext.form.Checkbox, {
submitOffValue:'false'
,submitOnValue:'true'

,onRender:function(ct) {

this.inputValue = this.submitOnValue;

// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// create hidden field that is submitted if checkbox is not checked
this.hiddenField = this.wrap.insertFirst({tag:'input', type:'hidden'});

// update value of hidden field
this.updateHidden();

} // eo function onRender

/**
* Calls parent and updates hiddenField
* @private
*/
,setValue:function(val) {
Ext.ux.form.XCheckbox.superclass.setValue.apply(this, arguments);
this.updateHidden();
} // eo function setValue

/**
* Updates hiddenField
* @private
*/
,updateHidden:function() {
if(this.hiddenField) {
this.hiddenField.dom.value = this.checked ? this.submitOnValue : this.submitOffValue;
this.hiddenField.dom.name = this.checked ? '' : this.el.dom.name;
}
} // eo function updateHidden

}); // eo extend

// register xtype
Ext.reg('xcheckbox', Ext.ux.form.XCheckbox);

// eo file

mystix
14 Jul 2008, 1:55 AM
i guess you missed post #62:
http://extjs.com/forum/showthread.php?p=182983#post182983

but your new code is definitely more elegant ;)

jsakalos
14 Jul 2008, 2:10 AM
Yeah, I've read it before but had no time to test it. I've needed today the new version so I wrote it. Big thanks to you for pointing out that changes in SVN broke the original code.

Dumbledore
14 Jul 2008, 9:38 PM
Hi Saki,

the latest code won

jsakalos
14 Jul 2008, 11:15 PM
Dumbledore, try the code now, should work.

hAmpzter
16 Jul 2008, 1:35 PM
I stumbled on a small "unknown feature" with the XCheckbox on Ext Js 2.1.. It shows an scroller to the right in it's wrapper (look at attached picture)..

Though adding the row:

overflow:hidden;

to the ".xcheckbox-wrap" in stylesheet fixed the glitch! :)

The problem occured on Firefox 3, Mac OS X.. Looked good in Safari with fix too, have not tried in any other browser though!

Thanks for a load of good plugins to Ext Js, Saki! :)

Regards,
</Jonas> (aka hAmpzter)

Dumbledore
18 Jul 2008, 4:38 AM
Dumbledore, try the code now, should work.

it worked! Thanks a lot!!!

Bye, Dumbledore

Dumbledore
25 Jul 2008, 12:35 AM
Hi...

when i use the updated version for the last svn-code it will be a 'normal' checkbox not the nicer one...Is this right? Or do i miss something?

Bye, Dumbledore

mystix
25 Jul 2008, 1:09 AM
you're definitely missing something. when you checked out the latest copy of ext-base/ext-all from SVN, did you also update your images + css?

Dumbledore
25 Jul 2008, 2:44 AM
hmm. i made a checkout and build it via builder-0.11. Must i do more?

Bye,
Dumbledore

jsakalos
25 Jul 2008, 11:41 PM
Looks like that's all there is to it. However, I don't use builder but linux python version. Anyway, I guess you could be using old cached version, or something...

Dumbledore
26 Jul 2008, 1:37 AM
ok, when i use the builder not all files are in the output. I must manually copy the localisation and images an css.

There must be something wrong with the builder_0.11...

:-?

KRavEN
6 Aug 2008, 3:35 AM
Why not just override Ext.lib.Ajax.serializeForm? The following will return tue or false from Ext2.2 checkboxes.


Ext.lib.Ajax.serializeForm = function(F){
if(typeof F=="string"){
F=(document.getElementById(F)||document.forms[F])
}
var G,E,H,J,K="",M=false;
for(var L=0;L<F.elements.length;L++){
G=F.elements[L];
J=F.elements[L].disabled;
E=F.elements[L].name;
H=F.elements[L].value;
if(!J&&E){
switch(G.type){
case"select-one":
case"select-multiple":
for(var I=0;I<G.options.length;I++){
if(G.options[i].selected){
if(Ext.isIE){
K+=encodeURIComponent(E)+"="+encodeURIComponent(G.options[i].attributes["value"].specified?G.options[i].value:G.options[i].text)+"&"
}else{
K+=encodeURIComponent(E)+"="+encodeURIComponent(G.options[i].hasAttribute("value")?G.options[i].value:G.options[i].text)+"&"
}
}
}
break;
case"radio":
case"checkbox":
if(G.checked){
K+=encodeURIComponent(E)+"="+encodeURIComponent(true)+"&"
} else {
K+=encodeURIComponent(E)+"="+encodeURIComponent(false)+"&"
}
break;
case"file":
case undefined:
case"reset":
case"button":
break;
case"submit":
if(M==false){
K+=encodeURIComponent(E)+"="+encodeURIComponent(H)+"&";M=true
}
break;
default:
K+=encodeURIComponent(E)+"="+encodeURIComponent(H)+"&";
break
}
}
}
K=K.substr(0,K.length-1);
return K
}

jsakalos
6 Aug 2008, 11:55 AM
Yes, overriding serializeForm is one of the solutions. It globally changes the behavior of all checkboxes.

bobg
6 Aug 2008, 3:34 PM
Trying the latest XCheckbox code from here:

http://extjs.com/forum/showthread.php?p=194810#post194810

With ExtJS 2.2. And Firefox 3.0.

And I got some visual oddness, looks like the image is being selected. See the dashed lines around the checkbox in the attached screenshot clip.

Hope this helps.

mystix
6 Aug 2008, 5:55 PM
Trying the latest XCheckbox code from here:

http://extjs.com/forum/showthread.php?p=194810#post194810

With ExtJS 2.2. And Firefox 3.0.

And I got some visual oddness, looks like the image is being selected. See the dashed lines around the checkbox in the attached screenshot clip.

Hope this helps.

http://extjs.com/forum/showthread.php?t=43169

jsakalos
6 Aug 2008, 11:38 PM
Well, I prefer to have the selection box around checkbox - I use keyboard (tab) very often to navigate through fields so I see where I am.

bobg
7 Aug 2008, 9:05 AM
mystix, Thank you for the link to the css.

jsakalos, I agree that there should ba a visual aid to indicate field focus.

However, the Mozilla selection/outline box does not match the Ext-style of highlighting the fields.

So I really have two issues:

1) Disabling the the Firefox-style selection/outline box. Done.

2) Enabling the Ext-style focus visual aid. On a textfield the default theme changes the border color of the field on focus. It would be nice if the checkbox had the same functionality.

In ./ext/resources/css/ext-all.css, line 182, there is this entry for textarea highlighting:

.x-form-focus,textarea.x-form-focus{border:1px solid #7eadd9;}

Can this be done for the xcheckbox?

jsakalos
7 Aug 2008, 10:28 AM
I don't know but I'm also interested. Post your result please when you're done.

alaska
11 Aug 2008, 4:37 AM
Hi, im having some throuble with Ext 2.2 + this version
http://extjs.com/forum/showthread.php?p=194810#post194810
using form.load, that xcheckbox doesnt get checked.

Thanks

jsakalos
11 Aug 2008, 7:58 AM
Take a look here: http://examples.extjs.eu/?ex=formloadsubmit That example uses both Ext 2.2 and xcheckbox.

alaska
11 Aug 2008, 10:07 AM
Sorry, my mistake, form.load is perfert,
but when i use with my defined submit values it post ok,
but doesnt load back with form.load




fieldLabel: 'Desloc',
name: 'DESLOCAMENTO',
submitOffValue:'N',
submitOnValue:'S',
xtype: 'xcheckbox'



Thanks

jsakalos
11 Aug 2008, 12:43 PM
Well, now I don't know if you have resolved it, if you still have a problem and if so what's the nature of the problem...

alaska
11 Aug 2008, 2:03 PM
Sorry!
there was no problem loading xcheckbox, except in this special case when i set
my personal's submit values, it posts my value correct, but doesnt load.

Json is correct, my object xcheckbox was working ok before update ext + xcheckbox

Thanks!
Sorry for my poor english!

pbuyle
13 Aug 2008, 2:13 AM
I had add issues when registering a 'check' handler submitting a form on a 2.2 XCheckbox. The check event is fired in Ext.form.Checkbox's setValue which is called before updateHidden. So, when the form is submited in a 'check' handler the hidden field is not yet updated.

I quickly modified the code to make it works, here is the result:

// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* Ext.ux.form.XCheckbox - checkbox with configurable submit values
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.XCheckbox.js 82 2008-03-21 00:17:40Z jozo $
* @date 10. February 2008
*
*
* @license Ext.ux.form.XCheckbox is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

/**
* @class Ext.ux.XCheckbox
* @extends Ext.form.Checkbox
*/
Ext.ns('Ext.ux.form');
Ext.ux.form.XCheckbox = Ext.extend(Ext.form.Checkbox, {
submitOffValue:'false'
,submitOnValue:'true'

,onRender:function(ct) {

this.inputValue = this.submitOnValue;

// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// create hidden field that is submitted if checkbox is not checked
this.hiddenField = this.wrap.insertFirst({tag:'input', type:'hidden'});

// update value of hidden field
this.updateHidden();

} // eo function onRender

/**
* Calls parent and updates hiddenField
* @private
*/
,setValue:function(v) {
var checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
this.updateHidden(checked);
Ext.ux.form.XCheckbox.superclass.setValue.apply(this, arguments);
} // eo function setValue

/**
* Updates hiddenField
* @private
*/
,updateHidden:function(checked) {
checked = checked !== undefined ? checked : this.checked;
if(this.hiddenField) {
this.hiddenField.dom.value = checked ? this.submitOnValue : this.submitOffValue;
this.hiddenField.dom.name = checked ? '' : this.el.dom.name;
}
} // eo function updateHidden

}); // eo extend

// register xtype
Ext.reg('xcheckbox', Ext.ux.form.XCheckbox);

// eo file

jsakalos
13 Aug 2008, 2:41 AM
Would you please check this? It's basically your logic - I just want to have it all in one place...


// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* Ext.ux.form.XCheckbox - checkbox with configurable submit values
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.XCheckbox.js 309 2008-08-13 10:38:55Z jozo $
* @date 10. February 2008
*
*
* @license Ext.ux.form.XCheckbox is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

/**
* @class Ext.ux.XCheckbox
* @extends Ext.form.Checkbox
*/
Ext.ns('Ext.ux.form');
Ext.ux.form.XCheckbox = Ext.extend(Ext.form.Checkbox, {
submitOffValue:'false'
,submitOnValue:'true'

,onRender:function() {

this.inputValue = this.submitOnValue;

// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// create hidden field that is submitted if checkbox is not checked
this.hiddenField = this.wrap.insertFirst({tag:'input', type:'hidden'});

// support tooltip
if(this.tooltip) {
this.imageEl.set({qtip:this.tooltip});
}

// update value of hidden field
this.updateHidden();

} // eo function onRender

/**
* Calls parent and updates hiddenField
* @private
*/
,setValue:function(v) {
this.updateHidden(v);
Ext.ux.form.XCheckbox.superclass.setValue.apply(this, arguments);
} // eo function setValue

/**
* Updates hiddenField
* @private
*/
,updateHidden:function(v) {
v = undefined !== v ? v : this.checked;
v = (v === true || v === 'true' || v === '1' || String(v).toLowerCase() == 'on');
if(this.hiddenField) {
this.hiddenField.dom.value = v ? this.submitOnValue : this.submitOffValue;
this.hiddenField.dom.name = v ? '' : this.el.dom.name;
}
} // eo function updateHidden

}); // eo extend

// register xtype
Ext.reg('xcheckbox', Ext.ux.form.XCheckbox);

// eo file

pbuyle
13 Aug 2008, 3:08 AM
Works for me.

Thanks

jsakalos
14 Aug 2008, 9:16 AM
Thank you for checking - I'm updating the first post.

alaska
18 Aug 2008, 9:21 AM
sorry for bugging you guys!

i still have a problem when i set my submitOffValue/submitOnValue...
submit OK, but i cant load it with form.load

Object:


fieldLabel: 'Desloc',
name: 'DESLOCAMENTO',
submitOffValue:'N',
submitOnValue:'S',
xtype: 'xcheckbox'


JSON (DESLOCAMENTO = "1" Load perfect):


{"success":true,"data":{"RECOMENDACOES":"","FUNCIONARIO":"10","URGENCIA":"5","SITUACAO":"0","CLIENTEID"
:"1426","DATATERMINO":"0000-00-00 00:00:00","TECNICO":"","DESLOCAMENTO":"1","PRAZO":"2008-08-18 16:09
:41","SOLUCOES":"","IDGRUPO":"4458","DATAENTRADA":"2008-08-18 11:09:41","DATACC":"","DESCPROB":"teste","NOS":"4693","NOMECL":"MBC Materais para construcao","DATASAIDA":"0000-00-00 00:00:00"}}


JSON (DESLOCAMENTO = "S" didnt Load):


{"success":true,"data":{"RECOMENDACOES":"","FUNCIONARIO":"10","URGENCIA":"5","SITUACAO":"0","CLIENTEID"
:"1426","DATATERMINO":"0000-00-00 00:00:00","TECNICO":"","DESLOCAMENTO":"S","PRAZO":"2008-08-18 16:09
:41","SOLUCOES":"","IDGRUPO":"4458","DATAENTRADA":"2008-08-18 11:09:41","DATACC":"","DESCPROB":"teste","NOS":"4693","NOMECL":"MBC Materais para construcao","DATASAIDA":"0000-00-00 00:00:00"}}


So the form is submiting "S" when checked, but doesnt load checked with "S", just when "1"...

Help!
Thanks

Ext 2.2
Ext.ux.form.XCheckbox.js 82 2008-03-21 00:17:40Z jozo $

jsakalos
18 Aug 2008, 10:02 AM
Try this code and let me please know if it works:


// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* Ext.ux.form.XCheckbox - checkbox with configurable submit values
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.XCheckbox.js 441 2009-01-12 11:10:10Z jozo $
* @date 10. February 2008
*
*
* @license Ext.ux.form.XCheckbox is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

/**
* @class Ext.ux.XCheckbox
* @extends Ext.form.Checkbox
*/
Ext.ns('Ext.ux.form');
Ext.ux.form.XCheckbox = Ext.extend(Ext.form.Checkbox, {
submitOffValue:'false'
,submitOnValue:'true'

,onRender:function() {

this.inputValue = this.submitOnValue;

// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// create hidden field that is submitted if checkbox is not checked
this.hiddenField = this.wrap.insertFirst({tag:'input', type:'hidden'});

// support tooltip
if(this.tooltip) {
this.imageEl.set({qtip:this.tooltip});
}

// update value of hidden field
this.updateHidden();

} // eo function onRender

/**
* Calls parent and updates hiddenField
* @private
*/
,setValue:function(v) {
v = this.convertValue(v);
this.updateHidden(v);
Ext.ux.form.XCheckbox.superclass.setValue.apply(this, arguments);
} // eo function setValue

/**
* Updates hiddenField
* @private
*/
,updateHidden:function(v) {
v = undefined !== v ? v : this.checked;
v = this.convertValue(v);
if(this.hiddenField) {
this.hiddenField.dom.value = v ? this.submitOnValue : this.submitOffValue;
this.hiddenField.dom.name = v ? '' : this.el.dom.name;
}
} // eo function updateHidden

/**
* Converts value to boolean
* @private
*/
,convertValue:function(v) {
return (v === true || v === 'true' || v == 1 || v === this.submitOnValue || String(v).toLowerCase() === 'on');
} // eo function convertValue

}); // eo extend

// register xtype
Ext.reg('xcheckbox', Ext.ux.form.XCheckbox);

// eof

alaska
18 Aug 2008, 10:08 AM
Thanks! it Works!

evanc
22 Aug 2008, 9:48 AM
This extension is great, I was about to write basically the same thing and I'm glad I thought to search first. Thanks for sharing it!

radustefan
28 Aug 2008, 1:53 PM
Thank you Saki for this extension. I wonder why this code (and other) is not included as the standard checkbox control in the extjs distribution.

alos
4 Sep 2008, 10:56 AM
{
xtype: 'panel',
title: 'Evaluacion del Fasciculo',
collapsible: true,
autoHeight: true,
autoWith: true,
iconCls: 'evaluacion',
id:'evaluacionFasciculo',
defaults: {
width: 500
},
items: [
new Ext.ux.form.XCheckbox({
boxLabel: '&iquest;El art&iacute;culo se identifica con membrete bibliogr&aacute;fico en la p&aacute;gina inicial?',
id: 'inicialCheckBox'
}),
new Ext.ux.form.XCheckbox({
boxLabel: '&iquest;El art&iacute;culo se identifica con membrete bibliogr&aacute;fico en las p&aacute;ginas interiores?',
id: 'interiorCheckBox'
})
] /*del items del xtype*/
}


See image.

radustefan
4 Sep 2008, 11:02 AM
Have you included the css styles for xcheckbox?

alos
4 Sep 2008, 11:56 AM
Have you included the css styles for xcheckbox?

Riiight....No :"> where are they?

jsakalos
4 Sep 2008, 12:03 PM
RTFM in comments of the source code please.

alos
4 Sep 2008, 1:21 PM
RTFM in comments of the source code please.

Gladly, the problem is that there was no "manual" in the sourceode where I got it (About the last page of this thread).

Finaly I included these in the CSS:



.xcheckbox-wrap {
line-height: 18px;
padding-top:2px;
}
.xcheckbox-wrap a {
display:block;
width:16px;
height:16px;
float:left;
}
.x-toolbar .xcheckbox-wrap {
padding: 0 0 2px 0;
}
.xcheckbox-on {
background:transparent url(../ext/resources/images/default/menu/checked.gif) no-repeat 0 0;
}
.xcheckbox-off {
background:transparent url(../ext/resources/images/default/menu/unchecked.gif) no-repeat 0 0;
}
.xcheckbox-disabled {
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
cursor:default;
}


I also modified the path of the images to the right place. Still no go. I have a bank screen now. :-?

jsakalos
4 Sep 2008, 1:34 PM
BTW, which version of Ext? If 2.2 then you don't need any css. http://extjs.com/forum/showthread.php?p=211041#post211041

alos
4 Sep 2008, 1:38 PM
BTW, which version of Ext? If 2.2 then you don't need any css. http://extjs.com/forum/showthread.php?p=211041#post211041

Yes 2.2... I removed the CSS. And i still get nothing. I feel really silly now :-(

Is this fine?:



{
xtype: 'panel',
title: 'Evaluacion del Fasciculo',
collapsible: true,
autoHeight: true,
autoWith: true,
iconCls: 'evaluacion',
id:'evaluacionFasciculo',
defaults: {
width: 500
},
items: [

{
xtype: 'xcheckbox',
fieldLabel:'&iquest;El art&iacute;culo se identifica con membrete bibliogr&aacute;fico en la p&aacute;gina inicial?',
id:'ch1'
},
{
xtype: 'xcheckbox',
fieldLabel:'&iquest;El art&iacute;culo se identifica con membrete bibliogr&aacute;fico en las p&aacute;ginas interiores?',
id: 'ch2'
}
] /*del items del xtype*/
}

hAmpzter
4 Sep 2008, 10:18 PM
Yes 2.2... I removed the CSS. And i still get nothing. I feel really silly now :-(


lol.. I think we all have been down that road with Ext Js sometime or another...
You are sure you include ext-js in the right order ( http://extjs.com/learn/Ext_FAQ#What_is_the_proper_include_order_for_my_JavaScript_files.3F (http://extjs.com/forum/../learn/Ext_FAQ#What_is_the_proper_include_order_for_my_JavaScript_files.3F) ) and you have set the Ext.BLANK_IMAGE_URL in your application?

Regards,
</hAmpzter>

alos
5 Sep 2008, 12:46 PM
lol.. I think we all have been down that road with Ext Js sometime or another...
You are sure you include ext-js in the right order ( http://extjs.com/learn/Ext_FAQ#What_is_the_proper_include_order_for_my_JavaScript_files.3F (http://extjs.com/forum/../learn/Ext_FAQ#What_is_the_proper_include_order_for_my_JavaScript_files.3F) ) and you have set the Ext.BLANK_IMAGE_URL in your application?

Regards,
</hAmpzter>

Thanks for replaying. I had no idea about the Blank IMG. I added it to the top of my stuff changed de URL to point to the s.gif file. The checkboxes still dont show. Can the checkboxes live inside a panel? :S

jsakalos
5 Sep 2008, 2:22 PM
This example uses XCheckbox. See how is it done. http://examples.extjs.eu/?ex=formerrors

pokerking400
11 Sep 2008, 2:04 AM
No issues. :P

hAmpzter
11 Sep 2008, 4:33 AM
It is sending both values if the checkbox is not checked. Why?.

Your website example sends only one value when it is unchecked.

Why i have this problem?. Any ideas?
Could you please paste the code on how you define your XCheckbox field!

pokerking400
11 Sep 2008, 6:13 AM
That was my bug , not xcheckbox.

:))

There was item.inputType pointing it as TEXT as i was doing file uploading stuff...it was overlapped.

So submit went to default instead of checkbox condition in serialize...method.

denkoo
11 Sep 2008, 8:21 PM
Thank for this functionnality... and sharing :)

When I watch your code into render function :



,onRender:function(ct) {
// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// save tabIndex remove & re-create this.el
var tabIndex = this.el.dom.tabIndex;
var id = this.el.dom.id;
this.el.remove();
this.el = ct.createChild({tag:'input', type:'hidden', name:this.name, id:id});


I suggest :



,onRender:function(ct) {
this.defaultAutoCreate: {tag:'input', type:'hidden', name:this.name},
// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

jsakalos
11 Sep 2008, 10:43 PM
Have you tested it?

denkoo
12 Sep 2008, 11:23 PM
I test and I have the same result of your extension

So your onRender :



,onRender:function(ct) {
// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// save tabIndex remove & re-create this.el
var tabIndex = this.el.dom.tabIndex;
var id = this.el.dom.id;
this.el.remove();
this.el = ct.createChild({tag:'input', type:'hidden', name:this.name, id:id});

// update value of hidden field
this.updateHidden();

// adjust wrap class and create link with bg image to click on
this.wrap.replaceClass('x-form-check-wrap', 'xcheckbox-wrap');
this.cbEl = this.wrap.createChild({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls});

// reposition boxLabel if any
var boxLabel = this.wrap.down('label');
if(boxLabel) {
this.wrap.appendChild(boxLabel);
}

// support tooltip
if(this.tooltip) {
this.cbEl.set({qtip:this.tooltip});
}

// install event handlers
this.wrap.on({click:{scope:this, fn:this.onClick, delegate:'a'}});
this.wrap.on({keyup:{scope:this, fn:this.onClick, delegate:'a'}});

// restore tabIndex
this.cbEl.dom.tabIndex = tabIndex;
} // eo function onRender


I suggest after Testing :)



,onRender:function(ct) {
this.defaultAutoCreate = {tag:'input', type:'hidden', name:this.name};
// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// update value of hidden field
this.updateHidden();

// adjust wrap class and create link with bg image to click on
this.wrap.replaceClass('x-form-check-wrap', 'xcheckbox-wrap');
this.cbEl = this.wrap.createChild({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls});

// support tooltip
if(this.tooltip) {
this.cbEl.set({qtip:this.tooltip});
}

// install event handlers
this.wrap.on({click:{scope:this, fn:this.onClick, delegate:'a'}});
this.wrap.on({keyup:{scope:this, fn:this.onClick, delegate:'a'}});

} // eo function onRender

jsakalos
13 Sep 2008, 1:22 AM
Looks good! What about boxLabel? Does it still work?

denkoo
13 Sep 2008, 2:41 AM
The boxlabel is render by Ext.form.Checkbox when calling superclass

You can see an example online (my test):

http://213.251.166.160/~extjs/ext2.1/examples/form/xcheckbox.html (http://213.251.166.160/%7Eextjs/ext2.1/examples/form/xcheckbox.html)

jsakalos
14 Sep 2008, 12:12 AM
Well, fieldLabel and boxLabel (http://extjs.com/deploy/dev/docs/?class=Ext.form.Checkbox&member=boxLabel) are two different things. You have stripped boxLabel part from the original code and in your example you do not use it. It is well possible that it is rendered by superclass but the example you posted doesn't show it.

Could you please test it? If it's fine I'll incorporate your code to the XCheckbox - I like it as it simplifies whole thing. :)

denkoo
14 Sep 2008, 1:06 PM
Well, fieldLabel and boxLabel (http://extjs.com/deploy/dev/docs/?class=Ext.form.Checkbox&member=boxLabel) are two different things. You have stripped boxLabel part from the original code and in your example you do not use it. It is well possible that it is rendered by superclass but the example you posted doesn't show it.

Could you please test it? If it's fine I'll incorporate your code to the XCheckbox - I like it as it simplifies whole thing. :)


ok... Replace createChild by insertFirst and it's ok :)

I modify my example and adding boxlabel...

http://213.251.166.160/~extjs/ext2.1/examples/form/xcheckbox.html (http://213.251.166.160/%7Eextjs/ext2.1/examples/form/xcheckbox.html)



// adjust wrap class and create link with bg image to click on
this.wrap.replaceClass('x-form-check-wrap', 'xcheckbox-wrap');
this.cbEl = this.wrap.insertFirst({tag:'a', href:'#', cls:this.checked ? this.onCls : this.offCls}); // insertFirst <=> createChild

jsakalos
14 Sep 2008, 1:44 PM
Thanks, I have no time to test it myself until Tuesday - then I'll do it.

jsakalos
19 Sep 2008, 12:54 PM
@denkoo,

I'm looking at my current code and I have a feeling that you've patched some older version. This is the current code compatible with Ext 2.2:


// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* Ext.ux.form.XCheckbox - checkbox with configurable submit values
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.XCheckbox.js 313 2008-08-18 18:00:16Z jozo $
* @date 10. February 2008
*
*
* @license Ext.ux.form.XCheckbox is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

/**
* @class Ext.ux.XCheckbox
* @extends Ext.form.Checkbox
*/
Ext.ns('Ext.ux.form');
Ext.ux.form.XCheckbox = Ext.extend(Ext.form.Checkbox, {
submitOffValue:'false'
,submitOnValue:'true'

,onRender:function() {

this.inputValue = this.submitOnValue;

// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// create hidden field that is submitted if checkbox is not checked
this.hiddenField = this.wrap.insertFirst({tag:'input', type:'hidden'});

// support tooltip
if(this.tooltip) {
this.imageEl.set({qtip:this.tooltip});
}

// update value of hidden field
this.updateHidden();

} // eo function onRender

/**
* Calls parent and updates hiddenField
* @private
*/
,setValue:function(v) {
v = this.convertValue(v);
this.updateHidden(v);
Ext.ux.form.XCheckbox.superclass.setValue.apply(this, arguments);
} // eo function setValue

/**
* Updates hiddenField
* @private
*/
,updateHidden:function(v) {
v = undefined !== v ? v : this.checked;
v = this.convertValue(v);
if(this.hiddenField) {
this.hiddenField.dom.value = v ? this.submitOnValue : this.submitOffValue;
this.hiddenField.dom.name = v ? '' : this.el.dom.name;
}
} // eo function updateHidden

/**
* Converts value to boolean
* @private
*/
,convertValue:function(v) {
return (v === true || v === 'true' || v === this.submitOnValue || String(v).toLowerCase() === 'on');
} // eo function convertValue

}); // eo extend

// register xtype
Ext.reg('xcheckbox', Ext.ux.form.XCheckbox);

// eo file

LordOfThePigs
1 Dec 2008, 6:08 PM
Hello,

a feature that I find useful, is to be able to use markInvalid() and clearInvalid() on checkboxes (for licence agreement/privacy policy acceptance). Unfortunately, this doesn't work in 2.2. Do you think it would be a good feature to support in your XCheckbox?

jsakalos
2 Dec 2008, 1:17 AM
Well, not really. Checkbox is UI for boolean so both values are valid, true and false. I'd disable "Next" or "OK" button for license agreements/policies until an acceptance checkbox is checked.

pkngan
11 Jan 2009, 7:00 PM
Your convertValue function is missing v == '1' compared to standard Checkbox. My data provider return 1 as true :).

jsakalos
12 Jan 2009, 3:02 AM
Your convertValue function is missing v == '1' compared to standard Checkbox. My data provider return 1 as true :).
OK, added.

moegal
12 Jan 2009, 7:32 AM
so which one is the current version? Great work btw.

Thanks, Marty

jsakalos
12 Jan 2009, 7:55 AM
See first post. If you use Ext 2.2 click the link therein.

moegal
12 Jan 2009, 8:12 AM
Great, thank you.

Mjollnir26
3 Feb 2009, 2:19 AM
Just wanted to thank you for this great Time-Saver :)

Dumbledore
11 Feb 2009, 10:31 PM
Hi there,

i use this great extension in the gray-extend theme. i know that the images in the css definition contains grayed versions, but when i focus the checkbox the hover image is blue?

I use the latest ext.js code and include nothing x-checkbox releated css. What do i missing?

Bye, Dumbledore

jsakalos
11 Feb 2009, 10:45 PM
XCheckbox doesn't do anything with visuals anymore. What you can do is to try to replace it with default checkbox to see if the problem disappears.

Dumbledore
11 Feb 2009, 10:53 PM
Wow... what a fast answer...

You´re right. The default checkbox has the same behaviour :-| Now i am searching for the reason...

Thanks...

s4brown
1 Apr 2009, 1:09 PM
When I place my xcheckboxes in a checkboxgroup the checkboxes no longer show checked after my form load. If I remove the checkboxgroup they work fine. Is there any reason why this component cannot be used in a checkboxgroup?

jsakalos
1 Apr 2009, 1:15 PM
Checkboxgroup doesn't have setValue method.

Olivier Smeesters
23 Apr 2009, 6:21 AM
Hi Saki,

First of all, thank you for all the energy and devotion you put in supporting ExtJS and providing your extensions to this marvelous framework.

I'm facing a question with standard checkboxes and thought your extension would maybe solve it but it seems not. Standard checkboxes do not fire the focus and blur events. Click on a check box, it's value is changed, the previously focused control loses focus but the checkbox does not fire focus event although pressing the space bar toggles its state.

(I'm using ExtJS 2.2.1 and the corresponding version of xcheckbox.)

Is there any fix for this in the works ? any suggestion on how to proceed ?

Thanks in advance,

Olivier

jsakalos
23 Apr 2009, 10:06 AM
Hmm, I've never tried if standard html checkbox fires focus event. If not, Ext also cannot, if yes, then we have a chance. Test it please and post back results.

Olivier Smeesters
28 Apr 2009, 12:58 AM
Saki,
I made a quick test app. It seems the checkboxes get focus/blur/click and change event.
Here is the log I got:
(cb1 and cb2 were two checkboxes, before and after are text inputs that are... before and after the checkboxes)
Tue Apr 28 2009 10:54:33 GMT+0200 (CEST): focus before
Tue Apr 28 2009 10:54:33 GMT+0200 (CEST): click before
Tue Apr 28 2009 10:54:35 GMT+0200 (CEST): blur before
Tue Apr 28 2009 10:54:35 GMT+0200 (CEST): focus cb1
Tue Apr 28 2009 10:54:36 GMT+0200 (CEST): click cb1
Tue Apr 28 2009 10:54:36 GMT+0200 (CEST): change cb1
Tue Apr 28 2009 10:54:41 GMT+0200 (CEST): click cb1
Tue Apr 28 2009 10:54:41 GMT+0200 (CEST): change cb1
Tue Apr 28 2009 10:54:45 GMT+0200 (CEST): blur cb1
Tue Apr 28 2009 10:54:45 GMT+0200 (CEST): focus cb2
Tue Apr 28 2009 10:54:45 GMT+0200 (CEST): click cb2
Tue Apr 28 2009 10:54:45 GMT+0200 (CEST): change cb2
Tue Apr 28 2009 10:54:50 GMT+0200 (CEST): blur cb2
Tue Apr 28 2009 10:54:50 GMT+0200 (CEST): focus cb1
Tue Apr 28 2009 10:54:50 GMT+0200 (CEST): click cb1
Tue Apr 28 2009 10:54:50 GMT+0200 (CEST): change cb1
Tue Apr 28 2009 10:54:51 GMT+0200 (CEST): blur cb1
Tue Apr 28 2009 10:54:51 GMT+0200 (CEST): focus after
Tue Apr 28 2009 10:54:51 GMT+0200 (CEST): click after
Tue Apr 28 2009 10:54:53 GMT+0200 (CEST): blur after

Hope this helps,

Olivier

jsakalos
28 Apr 2009, 6:10 AM
Hmmm, I've just made the brief test of adding


onfucus="alert('focus');"

to <input type="text"> and <input type="checkbox">. In FF-3.0.9@Linux alert appears only for text input.

Olivier Smeesters
29 Apr 2009, 7:31 AM
Saki,

I tried on the different browsers. Strangely, Firefox 3.0.9 on Ubuntu was firing the focus/blur on the checkbox. Only Webkit based browsers (Safari/Mac and Google Chrome) were not firing it. (My lightweight test is attached.)

Can't we simulate the focus event by catching the click event and the blur by catching the click event at the top level ?

What else can we do ?

Thanks,

Olivier

jsakalos
29 Apr 2009, 8:05 AM
Yes, it would be possible to simulate focus on click, however there is no way to simulate blur and focus also won't fire if you navigate to checkbox by keyboard if browsers itself doesn't fire the events. I start to doubt if it is worth trying.

Olivier Smeesters
30 Apr 2009, 4:52 AM
Saki,

I'm wondering why the onFocus and onBlur methods are defined in the Checkbox widget as they are never called. Fact is: Field binds them to the focus and blur event on "this.el". But in Checkbox, this.el is hidden so they never get the focus. Only the innerWrap gets the focus (hence the tabIndex). So I tried subclassing Checkbox and setting event handlers on the innerWrap for focus and blur.

Worked on Firefox. Not on Safari. Seems that on Safari, the innerWrap (div) does not get the focus even if it has a tabIndex. So I'm stuck there :(

The reason I insist on having the focus/blur event is that I don't want to update my backend (in fact, an embedded device) until focus has moved away from the input field...

So to conclude:
- the checkbox input is reacting differently in the different browsers (not focusable in Safari & Chrome)
- the ExtJS Checkbox is not a correct emulation of the native checkboxes as some events are not passed through (click, focus, blur).

Until someone has a better alternative, I've to update the device based on the check event even if the interaction is slightly different than other input fields. :'(

jsakalos
30 Apr 2009, 10:25 AM
Can that checkbox focus/blur related methods be inherited from Field?

Olivier Smeesters
3 May 2009, 11:46 PM
They exist in Field where they are bound to this.el (the input element). They are redefined in Checkbox but the fact that the input is hidden in the Checkbox makes them useless as the focus will never reach the input element. I tried subclassing Checkbox and amend initCheckEvents so that onFocus and onBlur are bound to the innerWrap (which also has the tabIndex). It works when the browser allows focusing the div. But Safari does not focus the div so it's not a complete solution...

I've made a subclass of Checkbox which renders as a native checkbox. With that one, I get the events at the cost of the uniformity across browsers.

jsakalos
4 May 2009, 7:06 AM
BTW, Ext 3.x reverts back to native browser's checkboxes so the 2nd solution looks like the right way.

choykawairicky
19 Jun 2009, 8:15 PM
Hi Saki, do you think your extension can suppot an option for us to put our desired value to be submitted to server. That is, I want my checkbox to submit 1 or 0 or sometimes 1 or -1 instead of the default true or false??

jsakalos
20 Jun 2009, 12:32 AM
http://extjs.eu/docs/?class=Ext.ux.form.XCheckbox&member=submitOnValue

mohaaron
26 Jun 2009, 4:27 PM
I'm having a problem here http://extjs.com/forum/showthread.php?t=72621 that I think might be related to my use of xcheckbox.

Has anyone else had a problem with it always returning isDirty true?

jsakalos
27 Jun 2009, 12:21 AM
Go to http://examples.extjs.eu/formloadsubmit.html and then type in Firebug Console:

Ext.getCmp('formloadsubmit-form').getForm().findField('friend').isDirty()

Check the xcheckbox and type it again.

abraxxa
30 Jun 2009, 4:22 AM
I've set submitOffValue: 1 and submitOnValue: 2 and my edit forms have the problem, that the checkbox isn't checked although the inputValue and value are both correctly set to the submitOnValue (2).
Are I'm doing something wrong?

jsakalos
30 Jun 2009, 7:34 AM
1 is already reserved for on or checked, you cannot use it for off or unchecked.

abraxxa
30 Jun 2009, 7:38 AM
I found that in your code and changed, do I also need to change it in extjs's checkbox code directly?
My bool_vals table has the first row with pk 1 for false and second row with pk 2 for true because there is no boolean datatype in whoracle.
I can't change that.

jsakalos
30 Jun 2009, 7:39 AM
I would strongly recommend against using 1 for off. If it is not otherwise possible, use 1 for on and 2 for off, however, 0 and 1 are most logical choices.

abraxxa
30 Jun 2009, 7:46 AM
As already said it's not possible to change it, yes i hate that too. :(

jsakalos
30 Jun 2009, 8:54 AM
You will need to change XCheckbox::convertValue method then, possibly also Ext Checkbox.

lvgunst
23 Jul 2009, 12:21 AM
First I have to say this is a great plugin.

I've some problems with the plugin on IE 7. There is some space before the checkbox in IE 7 whitch pushes the checkbox away.

Part of the code:


{
columnWidth: .5,
layout: 'form',
style: 'margin-left: 5px;',
border: false,
labelWidth: 170,
defaults: { border: false, anchor: '-20' },
items: [
{
xtype: 'combo',
fieldLabel: 'Type website',
hiddenName: 'WebsiteType',
store: Ext.StoreMgr.get('WebsiteType'),
valueField: 'Id',
displayField: 'Type',
mode: 'remote',
triggerAction: 'all',
forceSelection: true,
editable: false,
allowBlank: false
},
{
fieldLabel: 'Actief',
name: 'Active',
xtype: 'xcheckbox',
checked: true
},
{
fieldLabel: 'Nederlands',
name: 'Dutch',
xtype: 'xcheckbox',
checked: true
},
{
fieldLabel: 'Engels',
name: 'English',
xtype: 'xcheckbox',
checked: false
},
{
fieldLabel: 'Gebruik standaard linkpages',
name: 'UseDefaultLinkPages',
xtype: 'xcheckbox',
checked: false,
disabled: true
}
]
}
I added two screenshots. The first is mine example, the second is from Saki's example page.

Im using the latest code from http://extjs.com/forum/showthread.php?p=211041#post211041

BTW: In IE7 it's not possible to toggle the checkbox by clicking the label in front of the checkbox.

jsakalos
23 Jul 2009, 1:05 AM
I've played with it a bit and I found that there is a padding applied to checkbox parent div in IE.

lvgunst
23 Jul 2009, 1:53 AM
You are right. On the div element next to the LABEL there is a left-padding of 175px (I use 170 as labelWidth) See attachment

Because I use a labelWidth of 170 it pushes the parent more to the right and finally to a 'new line'

In Firefox the same left padding is applied but rendered OK.

In IE there should also be an style "left: -170px". That should fix it. But how?

lvgunst
23 Jul 2009, 3:29 AM
Disabling the left padding in IE

Changes in red:


// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* Ext.ux.form.XCheckbox - nice checkbox with configurable submit values
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.XCheckbox.js 81 2008-03-20 11:13:36Z jozo $
* @date 10. February 2008
*
*
* @license Ext.ux.form.XCheckbox is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/**
* Ext.ux.form.XCheckbox - checkbox with configurable submit values
*
* @author Ing. Jozef Sakalos
* @version $Id: Ext.ux.form.XCheckbox.js 313 2008-08-18 18:00:16Z jozo $
* @date 10. February 2008
*
*
* @license Ext.ux.form.XCheckbox is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

/**
* @class Ext.ux.XCheckbox
* @extends Ext.form.Checkbox
*/
Ext.ns('Ext.ux.form');
Ext.ux.form.XCheckbox = Ext.extend(Ext.form.Checkbox, {
submitOffValue: 'false'
, submitOnValue: 'true'

, onRender: function() {
this.inputValue = this.submitOnValue;

// call parent
Ext.ux.form.XCheckbox.superclass.onRender.apply(this, arguments);

// create hidden field that is submitted if checkbox is not checked
this.hiddenField = this.wrap.insertFirst({ tag: 'input', type: 'hidden' });

if (Ext.isIE) {
var parentEl = this.el.up('.x-form-element', 5);
if (parentEl) {
parentEl.setStyle('padding-left', '5px');
}
}

// support tooltip
if (this.tooltip) {
this.imageEl.set({ qtip: this.tooltip });
}

// update value of hidden field
this.updateHidden();

} // eo function onRender

/**
* Calls parent and updates hiddenField
* @private
*/
, setValue: function(v) {
v = this.convertValue(v);
this.updateHidden(v);
Ext.ux.form.XCheckbox.superclass.setValue.apply(this, arguments);
} // eo function setValue

/**
* Updates hiddenField
* @private
*/
, updateHidden: function(v) {
v = undefined !== v ? v : this.checked;
v = this.convertValue(v);
if (this.hiddenField) {
this.hiddenField.dom.value = v ? this.submitOnValue : this.submitOffValue;
this.hiddenField.dom.name = v ? '' : this.el.dom.name;
}
} // eo function updateHidden

/**
* Converts value to boolean
* @private
*/
, convertValue: function(v) {
return (v === true || v === 'true' || v === this.submitOnValue || String(v).toLowerCase() === 'on');
} // eo function convertValue

}); // eo extend

// register xtype
Ext.reg('xcheckbox', Ext.ux.form.XCheckbox);

shiv
20 Aug 2009, 9:27 AM
Does this extension work with Ext JS 3.0?

I can't get it to work, at least not in a RowEditor.



myRecordDef = new Ext.data.Record.create([
{name: idField, type: 'int' },
{name: 'eventTitle', type: 'string'},
{name: 'recvd', type: 'bool' }
]);

var myColumnModel = new Ext.grid.ColumnModel({
columns: [
{header: 'Title', dataIndex: 'eventTitle', editor: {xtype: 'textfield', allowBlank: false, maxLength: 255}},
{header: 'Received?', dataIndex: 'recvd', xtype: 'booleancolumn', trueText: 'Yes', falseText: '', editor: {xtype: 'xcheckbox', submitOffValue: 0, submitOnValue: 1}}
]
});

var editor = new Ext.ux.grid.RowEditor({saveText: 'Update', listeners: {afteredit: saveTheRow}});

function saveTheRow(rowObject) {
var edits = rowObject.record.data;
edits['task'] = 'UPDATE';
Ext.Ajax.request({
url: 'actions.php', waitMsg: 'Please wait...',
params: edits,
success: successHandler, failure: failureHandler
});
}
The console shows that the checkbox submits as "true" when checked. What am I doing wrong?

jsakalos
21 Aug 2009, 1:06 AM
Yes, that is the expected behavior unless you change submitOnValue (http://extjs.eu/docs/?class=Ext.ux.form.XCheckbox&member=submitOnValue).

shiv
21 Aug 2009, 5:04 AM
Saki, are you replying to me? I do have submitOnValue set, in the column editor:


{header: 'Received?', dataIndex: 'recvd', xtype: 'booleancolumn', trueText: 'Yes', falseText: '', editor: {xtype: 'xcheckbox', submitOffValue: 0, submitOnValue: 1}}


But the checkbox submits as "true", not 1.

shiv
21 Aug 2009, 5:48 AM
I figured it out Saki. Your extension updates the hidden field with the submitOnValue or submitOffValue, but getValue() simply returns whether the box is checked or not, so that's why my form submits true or false, not 1 or 0.



,updateHidden:function() {
this.el.dom.value = this.checked ? this.submitOnValue : this.submitOffValue;
} // eo function updateHidden

,getValue:function() {
return this.checked;
} // eo function getValue
Since all of the checkboxes in my application correspond to tinyInt fields in my DB, instead of using your extension I'm just overriding Ext.form.Checkbox like this:



Ext.override(Ext.form.Checkbox, {
submitOffValue: 0, submitOnValue: 1,
getValue : function() { return this.checked ? this.submitOnValue : this.submitOffValue; }
});

jsakalos
21 Aug 2009, 12:08 PM
The problem is that Ext doesn't use getValue to submit the form but serializeForm that collects values from underlying html fields. Therefore, submitOn/OffValue just update that hidden field used by serializeForm.

If you have your own submit routing relying on getValue then you need the above.

shiv
21 Aug 2009, 12:33 PM
hmm, makes sense. Could that be why your extension wasn't working in my rowEditor? It's not a form.

Anyway, thanks for the help.

mjoksa
9 Oct 2009, 2:40 AM
Hello Saki,
I just love your XCheckbox but I have problem with it. When I return error message from server (after form is submitted) check box is not visually marked as invalid (any other invalid field on form has red exclamation !).
Is there any way to solve this problem?

--
I just found solution for this in this thread
http://www.extjs.com/forum/showthread.php?p=238498#post238498
but to make this fully functional for XCheckbox I had to add this line


this.markEl = this.cbEl;

at the end of XCheckbox onRender method

Feel free to use this
Cheers

isit.gd
20 Oct 2009, 4:49 AM
works like a charm - you legend!!

NoahK17
28 Oct 2009, 10:15 AM
Once again, this mod is just perfect Saki. Thanks!

Confirmed to work out of box with 3.0.0, and I modified it to work with MetaForm as well.

abraxxa
16 Nov 2009, 1:31 PM
@saki: I've found a way that 1 for false and 2 for true are possible:

change line 78 from

Ext.ux.form.XCheckbox.superclass.setValue.apply(this, arguments);
to

Ext.ux.form.XCheckbox.superclass.setValue.apply(this, [v]);

This is to pass the converted value rather than the raw one.

change line 100 from

return (v === true || v === 'true' || v === 1 || v === this.submitOnValue || String(v).toLowerCase() === 'on');
to

return (v === true || v === 'true' || v == this.submitOnValue || String(v).toLowerCase() === 'on');

And this is needed so that 1 doesn't automatically count as true and the second change that the data type doesn't have to be the same.

If you can suggest changes that some of them aren't needed you're welcome. ;)

tobiu
9 Feb 2010, 2:23 PM
hi saki,

my checkbox-bugreport under http://www.extjs.com/forum/showthread.php?t=91696 affects your ux as well (used with ext 3.1.1).

when you reset a not rendered form, setValue(undefined) gets called.


v = this.convertValue(v);

gets called and so your call to



Ext.ux.form.XCheckbox.superclass.setValue.apply(this, arguments);


is changed to



Ext.ux.form.XCheckbox.superclass.setValue.apply(this, false);


long story short: here is the hotfix:



setValue:function(v) {
if(v === undefined)return;
v = this.convertValue(v);
this.updateHidden(v);
Ext.ux.form.XCheckbox.superclass.setValue.apply(this, arguments);
}


kind regards,
tobiu

jsakalos
10 Feb 2010, 2:35 AM
Thank you for the fix. The fix is simple and seem to be harmless.

Vepe
7 Jun 2010, 6:48 AM
There are many times I have a problem with extjs... but after a while I find out that saki has already done something that solves it :) :)

Thanks very much! Just what I needed!

santo
1 Jul 2010, 5:03 AM
When I use the XCheckbox checkboxes in a CheckboxGroup in a form, they are not set when the form is loaded.
Is there something like a XCheckboxGroup or should it just work with CheckboxGroup ?

This is the code I'm trying to use:


var myCheckbox1 = new Ext.ux.form.XCheckbox({
id: 'chkbox1',
boxLabel: 'check1',
name: 'check1'
});

var myCheckbox2 = new Ext.ux.form.XCheckbox({
id: 'chkbox2',
boxLabel: 'check2',
name: 'check2'
});

var myCheckboxGroup = new Ext.form.CheckboxGroup({
items: myCheckbox1, myCheckbox2
});

var myFieldset = new Ext.form.FieldSet({
title: 'My Checkboxes',
autoHeight: true,
collapsible: true,
collapsed: false,
items: myCheckboxGroup
});

var logFormPanel = new Ext.FormPanel({
labelAlign: 'left',
id: 'myformpanel',
title: 'My FormPanel',
labelWidth: 100,
width: 680,
waitMsgTarget: true,
items: myFieldset,
monitorValid: false,
reader: myReader
});


Any suggestions how to fix this ?

jsakalos
1 Jul 2010, 8:55 AM
It was never tested inside CheckboxGroup, however, the problem doesn't seem to be related to XCheckbox. Try to replace it with the default checkbox to verify it.

santo
1 Jul 2010, 9:50 AM
It seems you are right.
I replaced the XCheckboxes with normal Checkboxes and they are correctly populated.
However, when I put them in a checkboxGroup, there are also not populated.

I should have tested this before posting here. My apologies. :">

Still wondering why a CheckboxGroup doesn't get populated though :-?

jsakalos
1 Jul 2010, 12:30 PM
Check Ext version, I recall that I've seen some bugs fixed/feature implemented regarding this.

santo
1 Jul 2010, 10:42 PM
Thanks for the advice, but I'm using Ext v3.2.1 and I couldn't find anything related to CheckboxGroups in either the 3.2.1 or 3.2.2 changelog.

jsakalos
2 Jul 2010, 2:44 AM
Search Bugs forum and/or Premium Help Forum

santo
2 Jul 2010, 6:10 AM
ok, I'll do

alexinm
7 Aug 2010, 2:21 AM
Do you also have something like an xradio? :)

jsakalos
8 Aug 2010, 10:00 PM
No, I've never needed it.

alexinm
16 Sep 2010, 9:21 AM
I'm having performance problems on IE7 (probably around the .addClass-functionalities). Anybody else? Any ideas?

I'm using Ext-3.2.1 but I'm not sure if it's related to the version.

jsakalos
18 Sep 2010, 4:34 AM
If it's a core library problem (addClass) prepare please a showcase and post it to Bugs.

alexinm
20 Sep 2010, 3:49 AM
Does this one work well for you? My IE7 needs almost a second until the image changes:

(I tried 3.2.1 and 3.0.0 - doesn't make a difference...)


Ext.onReady(function() {
var top = new Ext.FormPanel({
renderTo: 'example',
items: [{
items: [{
layout: 'form',
defaults: { width: 150 },
items: [
{
xtype: 'xcheckbox',
cls: 'styled',
fieldLabel: 'Checkbox 1',
checked: true
},
{
xtype: 'xcheckbox',
fieldLabel: 'Checkbox 2'
}]
}
]
}]
});
});

jsakalos
20 Sep 2010, 6:47 AM
Sorry, I cannot test it as I use only the real browsers: Safari@Mac or Firefox@Mac. ;)

alexinm
20 Sep 2010, 9:20 PM
Glad to hear that, but I fear my customers don't :)

So... No chance to motivate you to have a short look at it? :)

jsakalos
21 Sep 2010, 2:53 AM
Points to check:

1. Is path to Ext.BLANK_IMAGE_URL pointing to your server?
2. Do you use a doctype? Remove it if yes or add it if no.
3. Are all clicks that slow or only the first one?

alexinm
21 Sep 2010, 4:29 AM
1. Yes
2. I used "strict", removed it, still slow...
3. All clicks are slow :(

I tried to get more information with the dynaTrace-Debugger but this one only showed me something uses CPU for almost a second, but not where and what for...

Any more ideas?

jsakalos
21 Sep 2010, 12:24 PM
Nothing else, this calls for an IE expert - I broke free from M$ 10 years ago. BTW, if you're writing a proprietary app you can say that minimum system requirements are Firefox or Safari - you cannot use this strategy for public apps, though.

Cloetn
8 Mar 2011, 2:19 AM
Thanks for this solution,

Is there actually any update on the checkbox problem in 3.x or 4.x?
I still have the problem in 3.x and your extension still saves the day.