1. #11
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    687
    Vote Rating
    22
    Dumbledore will become famous soon enough Dumbledore will become famous soon enough

      0  

    Default


    found it. For Ext 3.2. the bold lines in onRender must be added:

    Code:
    	onRender: function(ct, position){
    		Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
    		if(this.inputValue !== undefined){
    			this.el.dom.value = this.inputValue;
    		}else{
    			this.inputValue = this.el.dom.value;
    		}
    		this.innerWrap = this.el.wrap({
    			cls: this.innerCls
    		});
    		this.wrap = this.innerWrap.wrap({
    			cls: 'x-form-check-wrap'
    		});
    		if(this.boxLabel){
    			this.labelEl = this.wrap.createChild({
    				tag: 'label',
    				htmlFor: this.el.id,
    				cls: 'x-form-cb-label',
    				html: this.boxLabel
    			});
    		}else{
    			this.innerWrap.addClass('x-form-check-no-label');
    		}
    		
            // Need to repaint for IE, otherwise positioning is broken
            if(Ext.isIE){
                this.wrap.repaint();
            }
    		
            this.resizeEl = this.positionEl = this.wrap;
    	},

  2. #12
    Sencha User
    Join Date
    Feb 2008
    Posts
    156
    Vote Rating
    1
    WixSL is on a distinguished road

      0  

    Default


    Could anybody find a real solution for themeing checkboxes?
    I tried all of this and the checkboxes don't even appear (FF 3.6.3 / Opera 10.53 - Windows 2000).
    I'm useing Ext v3.2.1

  3. #13
    Ext User
    Join Date
    Oct 2009
    Location
    Banglaore / Chandigarh
    Posts
    32
    Vote Rating
    0
    arian10daddy is on a distinguished road

      0  

    Default


    Hi All,

    I am not able to get the radiogroup working after my upgrade from Ext 2.2 to Ext 3.2.1...
    Also, everything inside my viewport is coming to the top left portion of the screen. I've tried the above options but that doesn't work probably because it refers to radio and not radiogroup. Could you folks please help me in this regard?

    Varun

  4. #14
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    687
    Vote Rating
    22
    Dumbledore will become famous soon enough Dumbledore will become famous soon enough

      0  

    Default


    It seems there is a problem when using this with ext3.3. The overwrite will return value/undefined by getValue() the checkbox in ext will return true/false.
    This is realy a problem when using Ext.form.BasicForm.updateRecord()!

    A solution is not to overwrite the getValue()... or is there a better way?

  5. #15
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You could specify inputValue:true or you could make getValue return getRawValue directly.

  6. #16
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    687
    Vote Rating
    22
    Dumbledore will become famous soon enough Dumbledore will become famous soon enough

      0  

    Default


    i try inputVlaue: true, but when the checkbox is not checked the value is undefined which won´t work with Ext.form.BasicForm.updateRecord().

    Perhaps so:

    Code:
        getValue: function(){
    		return this.getRawValue() ? this.inputValue : this.getRawValue();
    	},

  7. #17
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    If you really just want a true/false value from getValue then you only need:
    Code:
    getValue: function(){
      return this.getRawValue();
    },

  8. #18
    Sencha User
    Join Date
    Aug 2008
    Posts
    17
    Vote Rating
    0
    cyberal is on a distinguished road

      0  

    Default


    Hi,

    Thanks Condor for this good works .

    In my project for checkbox I need to change the image of the checkbox, to do this I have changed the code :
    Code:
    Ext.override(Ext.form.Checkbox, {
    	checked: undefined,
    	actionMode: 'wrap',
    
    	innerCls: 'x-form-checkbox-inner',
    	overCls: 'x-form-check-over',
    	downCls: 'x-form-check-down',
    	focusCls: 'x-form-check-focus',
    	checkedCls: 'x-form-check-checked',
    	
    	onResize: function(){
    		Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
    		if(!this.boxLabel){
    			this.innerWrap.alignTo(this.wrap, 'c-c');
    		}
    	},
    	initEvents: function(){
    		Ext.form.Checkbox.superclass.initEvents.call(this);
    		this.mon(this.el, {
    			click: this.onClick,
    			change: this.onClick,
    			mouseenter: this.onMouseEnter,
    			mouseleave: this.onMouseLeave,
    			mousedown: this.onMouseDown,
    			mouseup: this.onMouseUp,
    			scope: this
    		});
    	},
    	onRender: function(ct, position){
    		Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
    		if(this.inputValue !== undefined){
    			this.el.dom.value = this.inputValue;
    		}else{
    			this.inputValue = this.el.dom.value;
    		}
    		this.innerWrap = this.el.wrap({
    			cls: this.innerCls
    		});
    		this.wrap = this.innerWrap.wrap({
    			cls: 'x-form-check-wrap'
    		});
    		if(this.boxLabel){
    			this.labelEl = this.wrap.createChild({
    				tag: 'label',
    				htmlFor: this.el.id,
    				cls: 'x-form-cb-label',
    				html: this.boxLabel
    			});
    		}else {
    			this.innerWrap.addClass('x-form-check-no-label');
    		}
    		
    		// Need to repaint for IE, otherwise positioning is broken
            if(Ext.isIE){
                this.wrap.repaint();
            }
    		
            this.resizeEl = this.positionEl = this.wrap;
    	},
    	initValue: function(){
    		if(this.checked !== undefined){
    			this.setValue(this.checked);
    		}else{
    			if(this.value !== undefined){
    				this.setValue(this.value);
    			}
    			this.checked = this.el.dom.checked;
    		}
    		this.originalValue = this.getValue();
    	},
    	getRawValue: function(){
    		return this.rendered ? this.el.dom.checked : this.checked;
    	},
    	getValue: function(){
    		return this.getRawValue() ? this.inputValue : undefined;
    	},
    	onClick: function(){
    		if(Ext.isSafari){
    			this.focus();
    		}
    		if(this.el.dom.checked != this.checked){
    			this.setValue(this.el.dom.checked);
    		}
    	},
    	setValue: function(v){
    		this.checked = typeof v == 'boolean' ? v : v == this.inputValue;
    		if(this.rendered){
    			this.el.dom.checked = this.checked;
    			this.el.dom.defaultChecked = this.checked;
    			this.innerWrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
    			this.validate();
    		}
    		this.fireEvent('check', this, this.checked);
    		if(this.handler){
    			this.handler.call(this.scope || this, this, this.checked);
    		}
    		return this;
    	},
    	onMouseEnter: function(){
    		this.wrap.addClass(this.overCls);
    	},
    	onMouseLeave: function(){
    		this.wrap.removeClass(this.overCls);
    	},
    	onMouseDown: function(){
    		this.wrap.addClass(this.downCls);
    	},
    	onMouseUp: function(){
    		this.wrap.removeClass(this.downCls);
    	},
    	onFocus: function(){
    		Ext.form.Checkbox.superclass.onFocus.call(this);
    		this.wrap.addClass(this.focusCls);
    	},
    	onBlur: function(){
    		Ext.form.Checkbox.superclass.onBlur.call(this);
    		this.wrap.removeClass(this.focusCls);
    	}
    });
    Ext.override(Ext.form.Radio, {
    	innerCls: 'x-form-radio-inner',
    	onClick: Ext.form.Radio.superclass.onClick,
    	setValue: function(v){
    		Ext.form.Radio.superclass.setValue.call(this, v);
    		if(this.rendered && this.checked){
    			var p = this.el.up('form') || Ext.getBody(),
    				els = p.select('input[name=' + this.el.dom.name + ']'),
    				id = this.el.dom.id;
    			els.each(function(el){
    				if(el.dom.id != id){
    					Ext.getCmp(el.dom.id).setValue(false);
    				}
    			});
    		}
    		return this;
    	}
    });
    I think it is a good idea to allow the user to change the CSS classes.