PDA

View Full Version : Retaining invalid value in editable grid



newusername
11 Aug 2015, 11:54 PM
Hi,

I have implemented following to retain invalid value in editable grid but it is not working as expected. Please help me out.




// This override is needed to deal with an ExtJS 4.2.1 bug that results from
// grouping a grid. Without it, when you hover over the first row in the grid
// you'll get an error and the row won't be highlighted. The only change is in x
// you'll return statement (original shown in comments).






Ext.onReady(function() {


Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:[{name : 'subject1'}, 'subject2', 'subject3'],
data:{'items':[
{ 'subject1': 123, "subject2":456, "subject3":789 },
{ 'subject1': 123, "subject2":456, "subject3":789 },
{ 'subject1': 123, "subject2":456, "subject3":789 },
{ 'subject1': 123, "subject2":456, "subject3":789 },
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});







var cellEditing = Ext.create("Ext.grid.plugin.CellEditing", {
clicksToEdit : 1


}); // End Ext.create().
var onKeyDown = function(inField, inEvent, inOpts){



var charCode = inEvent.getCharCode();
var v = inField.getValue();
var vLen = v.length;
var allowNeg = Ext.valueFrom(inField.allowNegative, false);
//var rightOfDecMax = inField.rightOfDecimalMax;


if ((charCode == 173 || charCode == 189 || charCode == 109) && !
allowNeg) {
inEvent.stopEvent();
return;
}


if ((charCode == 173 || charCode == 189 || charCode == 109) &&
allowNeg) {


if (v.charAt(0) == "-") {
inEvent.stopEvent();
return;
}


}

if ((charCode == 190 || charCode == 110) && ((v.split(".").length -1) > 0
)) {
inEvent.stopEvent();
return;
}


}




var validateThisField = function(inValue){




var leftOfDecMin = this.leftOfDecimalMin;
var leftOfDecMax = this.leftOfDecimalMax;
var rightOfDecMin = this.rightOfDecimalMin;
var rightOfDecMax = this.rightOfDecimalMax;
var allowNeg = Ext.valueFrom(this.allowNegative, false);



//if (Ext.isEmpty(inValue) && this.allowBlank == true) {
//return true;
//}


// Get absolute value of this field. That means we need to get
// rid of negative sign, if any, and all commas, if any.
var v = inValue;
v = v.replace("-", "");
v = v.replace(/,/g, "");


// Split the value at decimal point (if any).
var vSplit = v.split(".");

/*if(!this.allowZero){

var tempVal = parseInt(v,10);
if(tempVal == 0){
return "Value should be greater than zero";
}
}*/



// Make sure there's not too many digits to left of decimal.
if (vSplit[0].length > leftOfDecMax) {
return "Too many digits to the left of the decimal (" +
leftOfDecMax + " allowed)";
}


// Make sure there's not too many digits to right of decimal,
// if there's any.
if (vSplit[1] && vSplit[1].length > rightOfDecMax) {
return "Too many digits to the right of the decimal (" +
rightOfDecMax + " allowed)";
}

// Check for minimum digits to the left if leftOfDecMin > 0.
if (vSplit[0] == "" && leftOfDecMin >0) {
return "Not enough digits to the left of the decimal (" +
leftOfDecMin + " required)";
}




// Check for minimum digits to the left.
if (vSplit[0].length < leftOfDecMin) {
return "Not enough digits to the left of the decimal (" +
leftOfDecMin + " required)";
}


// Check for minimum digits to the right if rightOfDemical > 0
if (vSplit[1] == "" && rightOfDecMin > 0) {
return "Not enough digits to the right of the decimal (" +
rightOfDecMin + " required)";
}


// Again Check for minimum digits to the right.
if (!Ext.isEmpty(vSplit[1]) && vSplit[1].length < rightOfDecMin) {
return "Not enough digits to the right of the decimal (" +
rightOfDecMin + " required)";
}


// Check for negative value if allowNegative is false. This is necessary
// in case of the user pasting a value into the field.
if (!allowNeg && (inValue.indexOf("-") > -1)) {
return "Value cannot be negative";
}

// Check if -ve is allowed and at proper position
if (allowNeg && inValue.indexOf("-") > -1 &&(inValue.lastIndexOf("-") != 0)) {
return "Not a negative value";
}

if(!Ext.isEmpty(this.minValue) && v<this.minValue){
return "Minimum value should be or greater than" + this.minValue;
}

if(!Ext.isEmpty(this.maxValue) && v>this.maxValue){
return "Maximum value should be or lesser than " + this.maxValue;
}


return true;





}




Ext.override( Ext.Editor, {
updateEl : true,
revertInvalid : true,
completeEdit : function(remainVisible){
console.log("in overriden method");
var me = this,
field = me.field,
value;


if (!me.editing) {
return;
}



if (field.assertValue) {
field.assertValue();
}


value = me.getValue();
if (!field.isValid()) {
if (me.revertInvalid !== false) {
//me.cancelEdit(remainVisible);
}
//return;
}


if (String(value) === String(me.startValue) && me.ignoreNoChange) {
me.hideEdit(remainVisible);
return;
}


if (me.fireEvent('beforecomplete', me, value, me.startValue) !== false) {

value = me.getValue();
if (me.updateEl && me.boundEl) {
me.boundEl.update(value);
}
me.hideEdit(remainVisible);
me.fireEvent('complete', me, value, me.startValue);
}

},


cancelEdit : function(remainVisible) {
var me = this,
startValue = me.startValue,
field = me.field,
value;


if (me.editing) {
value = me.getValue();
// temporarily suspend events on field to prevent the "change" event from firing when setValue() is called
field.suspendEvents();
me.setValue(value);
field.resumeEvents();
me.hideEdit(remainVisible);
me.fireEvent('canceledit', me, value, startValue);
}
}
});








Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
margin : 50,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
selType : 'cellmodel',

plugins : [cellEditing],
columns: [
{ text: 'Subject 1', dataIndex: 'subject1',
align : "right",
width : 150,
editor: {
maxLength : 16,
enforceMaxLength : true,
maskRe: /[\d.,-]/,
enableKeyEvents: true,
fieldStyle: "text-align:right;",
allowNegative : true,
leftOfDecimalMin : 2,
leftOfDecimalMax : 13,
rightOfDecimalMin : 2,
rightOfDecimalMax : 2,
validator: validateThisField,
listeners : {
keydown : onKeyDown

}
},
renderer : function(v){
return v;
//return Ext.util.Format.number(v, '0,000.00');
}
},
{ text: 'Subject 2', dataIndex: 'subject2', flex: 1 ,
width : 150,
editor : {
maxLength : 15,
id : "textID"
}},
{ text: 'Subject 3', dataIndex: 'subject3' ,width : 150}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});


});






You can find demo of above example on link https://fiddle.sencha.com/#fiddle/s1c

joel.watson
30 Aug 2015, 7:43 PM
Hi--

Can you describe a bit more about the error you're experiencing?

Thanks
Joel