1. #11
    Ext User
    Join Date
    Dec 2007
    Posts
    67
    Vote Rating
    0
    jit is on a distinguished road

      0  

    Thumbs up


    Thanks for the fix!

    Anyone know if there's an ETA for a bug fix version of Ext 2.2?

    - Jit

  2. #12
    Sencha User
    Join Date
    Aug 2007
    Posts
    174
    Vote Rating
    0
    piston is on a distinguished road

      0  

    Question how do you implement the fix?

    how do you implement the fix?


    I'm hoping other noobs have same question as I do: How do you implement that fix? Do you add the bold text somewhere? What do you do with the stylesheet?

  3. #13
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    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 Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by piston View Post
    I'm hoping other noobs have same question as I do: How do you implement that fix? Do you add the bold text somewhere? What do you do with the stylesheet?
    Most peope create 2 files (fixes.css and fixes.js) and put in all required css and js overrides.
    Next, you include fixes.css and fixes.js after ext-all.css and ext-all.js in your HTML page.

    (don't try to edit ext-all.css or ext-all.js, because it complicates upgrading Ext JS to a newer version)

  4. #14
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    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 Condor has much to be proud of

      0  

    Default


    Here is a patch for those who also need Checkbox/Radio validation:
    Code:
    Ext.override(Ext.form.Field, {
    	markInvalid : function(msg){
    		if(!this.rendered || this.preventMark){
    			return;
    		}
    		var markEl = this.markEl || this.el;
    		markEl.addClass(this.invalidClass);
    		msg = msg || this.invalidText;
    		switch(this.msgTarget){
    			case 'qtip':
    				markEl.dom.qtip = msg;
    				markEl.dom.qclass = 'x-form-invalid-tip';
    				if(Ext.QuickTips){
    					Ext.QuickTips.enable();
    				}
    				break;
    			case 'title':
    				markEl.dom.title = msg;
    				break;
    			case 'under':
    				if(!this.errorEl){
    					var elp = this.getErrorCt();
    					if(!elp){
    						markEl.dom.title = msg;
    						break;
    					}
    					this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
    					this.errorEl.setWidth(elp.getWidth(true)-20);
    				}
    				this.errorEl.update(msg);
    				Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
    				break;
    			case 'side':
    				if(!this.errorIcon){
    					var elp = this.getErrorCt();
    					if(!elp){
    						markEl.dom.title = msg;
    						break;
    					}
    					this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
    				}
    				this.alignErrorIcon();
    				this.errorIcon.dom.qtip = msg;
    				this.errorIcon.dom.qclass = 'x-form-invalid-tip';
    				this.errorIcon.show();
    				this.on('resize', this.alignErrorIcon, this);
    				break;
    			default:
    				var t = Ext.getDom(this.msgTarget);
    				t.innerHTML = msg;
    				t.style.display = this.msgDisplay;
    				break;
    		}
    		this.fireEvent('invalid', this, msg);
    	},
    	clearInvalid : function(){
    		if(!this.rendered || this.preventMark){
    			return;
    		}
    		var markEl = this.markEl || this.el;
    		markEl.removeClass(this.invalidClass);
    		switch(this.msgTarget){
    			case 'qtip':
    				markEl.dom.qtip = '';
    				break;
    			case 'title':
    				markEl.dom.title = '';
    				break;
    			case 'under':
    				if(this.errorEl){
    					Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
    				}else{
    					markEl.dom.title = '';
    				}
    				break;
    			case 'side':
    				if(this.errorIcon){
    					this.errorIcon.dom.qtip = '';
    					this.errorIcon.hide();
    					this.un('resize', this.alignErrorIcon, this);
    				}else{
    					markEl.dom.title = '';
    				}
    				break;
    			default:
    				var t = Ext.getDom(this.msgTarget);
    				t.innerHTML = '';
    				t.style.display = 'none';
    				break;
    		}
    		this.fireEvent('valid', this);
    	},
    	alignErrorIcon : function(){
    		this.errorIcon.alignTo(this.markEl || this.el, 'tl-tr', [2, 0]);
    	}
    });
    Ext.override(Ext.form.Checkbox, {
    	onRender: function(ct, position){
    		Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
    		if(this.inputValue !== undefined){
    			this.el.dom.value = this.inputValue;
    		}
    		this.el.removeClass(this.baseCls);
    		//this.el.addClass('x-hidden');
    		this.innerWrap = this.el.wrap({
    			//tabIndex: this.tabIndex,
    			cls: this.baseCls+'-wrap-inner'
    		});
    		this.wrap = this.innerWrap.wrap({cls: this.baseCls+'-wrap'});
    		this.imageEl = this.innerWrap.createChild({
    			tag: 'img',
    			src: Ext.BLANK_IMAGE_URL,
    			cls: this.baseCls
    		});
    		if(this.boxLabel){
    			this.labelEl = this.innerWrap.createChild({
    				tag: 'label',
    				htmlFor: this.el.id,
    				cls: 'x-form-cb-label',
    				html: this.boxLabel
    			});
    		}
    		//this.imageEl = this.innerWrap.createChild({
    			//tag: 'img',
    			//src: Ext.BLANK_IMAGE_URL,
    			//cls: this.baseCls
    		//}, this.el);
    		if(this.checked){
    			this.setValue(true);
    		}else{
    			this.checked = this.el.dom.checked;
    		}
    		this.originalValue = this.checked;
    		this.markEl = this.innerWrap;
    	},
    	afterRender: function(){
    		Ext.form.Checkbox.superclass.afterRender.call(this);
    		//this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
    		this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
    	},
    	initCheckEvents: function(){
    		//this.innerWrap.removeAllListeners();
    		this.innerWrap.addClassOnOver(this.overCls);
    		this.innerWrap.addClassOnClick(this.mouseDownCls);
    		this.innerWrap.on('click', this.onClick, this);
    		//this.innerWrap.on('keyup', this.onKeyUp, this);
    		if(this.validationEvent !== false){
    			this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
    		}
    	},
    	onFocus: function(e) {
    		Ext.form.Checkbox.superclass.onFocus.call(this, e);
    		//this.el.addClass(this.focusCls);
    		this.innerWrap.addClass(this.focusCls);
    	},
    	onBlur: function(e) {
    		Ext.form.Checkbox.superclass.onBlur.call(this, e);
    		//this.el.removeClass(this.focusCls);
    		this.innerWrap.removeClass(this.focusCls);
    	},
    	onClick: function(e){
    		if (e.getTarget().htmlFor != this.el.dom.id) {
    			if (e.getTarget() != this.el.dom) {
    				this.el.focus();
    			}
    			if (!this.disabled && !this.readOnly) {
    				this.toggleValue();
    			}
    		}
    		//e.stopEvent();
    	},
    	onEnable: Ext.form.Checkbox.superclass.onEnable,
    	onDisable: Ext.form.Checkbox.superclass.onDisable,
    	onKeyUp: undefined,
    	setValue: function(v) {
    		var checked = this.checked;
    		this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
    		if(this.rendered){
    			this.el.dom.checked = this.checked;
    			this.el.dom.defaultChecked = this.checked;
    			//this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
    			this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
    		}
    		if(checked != this.checked){
    			this.fireEvent("check", this, this.checked);
    			if(this.handler){
    				this.handler.call(this.scope || this, this, this.checked);
    			}
    		}
    	},
    	getResizeEl: function() {
    		//if(!this.resizeEl){
    			//this.resizeEl = Ext.isSafari ? this.wrap : (this.wrap.up('.x-form-element', 5) || this.wrap);
    		//}
    		//return this.resizeEl;
    		return this.wrap;
    	},
    	markInvalid: Ext.form.Checkbox.superclass.markInvalid,
    	clearInvalid: Ext.form.Checkbox.superclass.clearInvalid,
    	validationEvent: 'click',
    	validateOnBlur: false,
    	validateValue: function(value){
    		if(this.vtype){
    			var vt = Ext.form.VTypes;
    			if(!vt[this.vtype](value, this)){
    				this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
    				return false;
    			}
    		}
    		if(typeof this.validator == "function"){
    			var msg = this.validator(value);
    			if(msg !== true){
    				this.markInvalid(msg);
    				return false;
    			}
    		}
    		return true;
    	}
    });
    Ext.override(Ext.form.Radio, {
    	checkedCls: 'x-form-radio-checked',
    	markInvalid: Ext.form.Radio.superclass.markInvalid,
    	clearInvalid: Ext.form.Radio.superclass.clearInvalid
    });
    (CSS from original post also needs to be used)

    msgTarget:'qtip' only works partially, but 'title', 'side' and 'under' work correctly.

  5. #15
    Ext User
    Join Date
    Dec 2007
    Posts
    6
    Vote Rating
    0
    dan1son is on a distinguished road

      0  

    Default


    Condor,

    Is this validation fix going into the codebase for 2.2.1 or whatever the next version turns out to be or do I need to patch my code to get this feature?


    Dan

  6. #16
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    173
    Vote Rating
    0
    MaxT is on a distinguished road

      0  

    Default


    Condor, I've been testing out this code once more. One thing I notice is that when the fieldLabel is clicked to toggle the checkbox it first flashes a grey image before the blue one. I don't get the grey image flash when clicking on the boxLabel to toggle the check state.

    Has anyone else noticed this, or have I done something else to break the correct behaviour? It happens consistently for me with Fx2, Fx3, IE7.

    Max

  7. #17
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    2.2.1 will revert checkboxes back to their original 2.0 implementation. Native checkboxes and radios should be used to ensure cross platform look and feel is consistent.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  8. #18
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    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 Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by jack.slocum View Post
    2.2.1 will revert checkboxes back to their original 2.0 implementation. Native checkboxes and radios should be used to ensure cross platform look and feel is consistent.
    That's too bad. Styled checkboxes and radios were very high on the requested feature list back in the Ext 2.0 days.

    ps. You can't claim consistent cross platform look and feel when using native checkboxes/radios! Don't you mean platform specific look and feel?

  9. #19
    Ext User jahman's Avatar
    Join Date
    Oct 2008
    Location
    Germany
    Posts
    37
    Vote Rating
    0
    jahman is on a distinguished road

      0  

    Default


    Hello everyone,

    I need help. I have a group of checkboxes. I want to implement validation on them. I have done it in way, that if a child is selected, it know his father and can prove if his father is selected, it gets its father selected as well. But if in turn the father is deselected, he should try and contact his children, although he doesn't his children.

    I am trying to get all items of the checkboxgroup, iterate over them and look for items with the father id as parent. Can any body help me. My code is below. Thanks

    [code]

    Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var url = 'http://'+host+'/cake/modules/getAllModules';
    var root = 'modules';
    var results = 'results';

    Ext.Ajax.request({
    waitMsg: 'Daten werden geladen',
    methode: 'POST',
    url: url,
    params: {},
    success: function(result, request) {
    var jsonData = Ext.decode(result.responseText);
    var array = [
    {name: 'id'},
    {name: 'bezeichnung', mapping: 'bezeichnung'},
    {name: 'beschreibung', mapping: 'beschreibung'},
    {name: 'typ', mapping: 'typ'},
    {name: 'seriennummer', mapping: 'seriennummer'},
    {name: 'obermodule', mapping: 'module_id'}
    ];


    var cm = new Ext.grid.ColumnModel([
    {header: "ID", dataIndex: 'id', width: 100, hidden: true},
    {header: "Name 1", dataIndex: 'bezeichnung', width: 200},
    {header: "Name 2", dataIndex: 'beschreibung', width: 120},
    {header: "Name 3", dataIndex: 'typ', width: 120},
    {header: "Name 4", dataIndex: 'seriennummer', width: 120},
    {header: "Name 5", dataIndex: 'obermodule', width: 120},

    ]);

    var store = getStore(url, array, results, root, true);
    var storeWithRange = getStore(url, array, results, root, true, 10);

    //Here's where we define our datagrid.
    //We have to specify our dataStore and our columnModel.
    var grid = new Ext.grid.GridPanel({
    ds: getStore(url, array, results, root),
    cm: cm,
    stripeRows: true,
    height: 350,
    width: 350,
    title: 'Data Grid',
    hidden: true
    });

    grid.render('contents');

    var storeX = getArray(jsonData);

    Ext.override(Ext.form.Checkbox, {
    onClick: function(e){
    var isChecked = this.checked;
    var id = this.id;
    var wert = "baugruppe_"+this.parent;
    if(!isChecked){
    if (this.parent == 0) {
    this.setValue('on');
    }
    else{
    if (Ext.getCmp(wert).checked) {
    this.setValue('on');
    }
    else {
    Ext.MessageBox.alert('Confirm','Diese Unterbaugruppe kann nur gew

  10. #20
    Sencha User mysticav's Avatar
    Join Date
    Mar 2007
    Location
    Mexico
    Posts
    481
    Vote Rating
    17
    mysticav will become famous soon enough

      0  

    Default


    I applied the patch, but now, I can't check any radiobox. if I click the radio, nothing happens (it is not checked).
    Using Ext with cachefly
    Working on LAMPExt