1. #1
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    375
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default XCheckbox - A nicer checkbox always submitting configurable values

    XCheckbox - A nicer checkbox always submitting configurable values


    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.ph...810#post194810

    You can find latest code for Ext 2.2 here: http://extjs.com/forum/showthread.ph...041#post211041

    PHP Code:
    // 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(thisarguments);

            
    // 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.nameid: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:thisfn:this.onClickdelegate:'a'}});
            
    this.wrap.on({keyup:{scope:thisfn:this.onClickdelegate:'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.offClsthis.onCls]);
                
    this.cbEl.addClass(this.checked this.onCls this.offCls);
            }
            
    this.fireEvent('check'thisthis.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 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  2. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    no php in site here... any online demos bro?

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    375
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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,
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    France
    Posts
    223
    Vote Rating
    0
    tof is on a distinguished road

      0  

    Thumbs up


    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2007
    Posts
    11
    Vote Rating
    0
    bcsd is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    375
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Wink


    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:

    PHP Code:
        ,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.offClsthis.onCls]);
                
    this.cbEl.addClass(this.checked this.onCls this.offCls);
            }

            
    this.fireEvent('check'thisthis.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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2007
    Posts
    11
    Vote Rating
    0
    bcsd is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    375
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  9. #9
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Red face


    oh my bad, I just read 'PHP code' and assumed 'PHP code'... it's javascript...
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  10. #10
    Sencha User jcwatson11's Avatar
    Join Date
    Jul 2007
    Posts
    75
    Vote Rating
    0
    jcwatson11 is on a distinguished road

      0  

    Default Simpler option

    Simpler option


    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:

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

    Code:
    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:

    Code:
    // 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!
    Last edited by jcwatson11; 4 Mar 2008 at 11:25 PM. Reason: Added further discussion link
    -- JCW
    Ext is kewl.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi