[2.0.2] EditorGrid: Input value not save into Record

**S1-Gezi** · 7 Apr 2008 1:45 AM

Hi all!

My environment: ExtJS 2.0.2, Firefox 2.0.0.13, IE 7.0.6001.18000

I have an EditorGrid + ColumnModel + RowSelectionModel. Four columns, each column with custom editor and renderer. First, 2th and 4th column is a combobox, 3th is a TriggerField.
My EditorGrid is implemented as Popup with "Save" and "Cancel" button.
Steps to repeat:
1.) add new row to the grid
2.) select a value in combobox of 1th,2th,4th column
3.) click into field of 3th column & type in something valid
4.) let the cursor stay in the field of 3th column and press "Save" button

Problem:
Firefox sometime simply ignore my input and to not store my value at the corresponding Record-instance. Sometimes Firefox throw an error:
F has no properties <ext-base.js line 10>

IE simply ignore my input and to not store my value at the corresponding Record-instance.

It seems that EditorGrid#onEditComplete is sometimes called, sometimes not. Or it dows not work properly.

Is this a known bug?

Thanks
Frank

**evant** · 7 Apr 2008 2:19 AM

Since this is quite a specific test case, an example demonstrating it would be great.

**S1-Gezi** · 7 Apr 2008 6:57 AM

As suggested by mjlecomte I put all the stuff into one html file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> [2.0.2] EditorGrid: Input value not save into Record</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.QuickTips.init();
});
</script>
</head>
<body>
<script type="text/javascript">
Ext.namespace('MyNamespace');

MyNamespace.ProductFilterSet = Ext.extend(Ext.grid.EditorGridPanel, {
initComponent : function() {

var qualifierCombo = new Ext.form.ComboBox({
store: Ext.StoreMgr.get('qualifierStore'),
valueField: 'qualVal',
displayField: 'displ',
mode: 'local',
editable:false
});

var operatorCombo = new Ext.form.ComboBox({
store: Ext.StoreMgr.get('operatorStore'),
valueField: 'opVal',
displayField: 'displ',
mode: 'local',
editable:false
});

var valueEditor = new Ext.form.TriggerField({
allowBlank: false
});

var cm = new Ext.grid.ColumnModel(
[{
id:'filterid',
dataIndex: 'filterid',
hidden:true
},{
id:'qualifier',
header: "Qualifier",
dataIndex: 'qualifier',
width: 100,
editor: qualifierCombo
},{
id:'operator',
header: "Operator",
dataIndex: 'operator',
width: 130,
editor: operatorCombo
},{
id:'value',
header: "Value",
dataIndex: 'value',
editor: valueEditor
}]);

var FilterSetRecord = Ext.data.Record.create([{name: 'filterid'},{name: 'qualifier'},{name: 'operator'},{name: 'value'}])
var store = new Ext.data.JsonStore({
storeId: 'fooStore',
reader:new Ext.data.JsonReader({id:'filterid'},FilterSetRecord),
fields:['filterid','qualifier','operator','value']
});

Ext.apply(this,{
autoExpandColumn:'value',
autoHeight:true,
clicksToEdit:1,
store

tore,
cm: cm,
sm: new Ext.grid.RowSelectionModel(),
tbar: [{
panel:this,
text: 'Add Qualifier',
handler : function(){
this.panel.addProductFilter();
}
}]
});
MyNamespace.ProductFilterSet.superclass.initComponent.call(this);
},
addProductFilter : function(config){
var store = this.getStore();
var ProductFilter = store.recordType;

//generate a unique id for the new filter
var dt = new Date();

store.add(new ProductFilter({
filterid:dt.format('Fj,Y,g:ia'),
qualifier: '',
operator: '',
value:''
}));
}
});

MyNamespace.ProductFilterDialog2 = Ext.extend(Ext.Window, {
initComponent : function() {

new Ext.data.JsonStore({
data: MyNamespace.Qualifiers,
root: 'root',
storeId: 'qualifierStore',
id: 'qualVal',
fields: [{name:'qualVal', type:'string'}, {name:'displ', type:'string'}]
});

new Ext.data.JsonStore({
data: MyNamespace.Operators,
root: 'root',
storeId: 'operatorStore',
id: 'opVal',
fields: [{name:'opVal', type:'string'}, {name:'displ', type:'string'}]
});

var filterSet = new MyNamespace.ProductFilterSet();
Ext.apply(this, {
closeAction:'hide',
items:[filterSet],
buttons: [{
text:'Save',
panel:this,
handler: this.saveSelection
}]
});
MyNamespace.ProductFilterDialog2.superclass.initComponent.call(this);
},
saveSelection : function() {
var store = Ext.StoreMgr.get('fooStore');

store.each(
function(r){

Ext.log("qualifier="+r.get('qualifier')+" operator="+r.get('operator')+" value="+r.get('value'));
}, this);
this.panel.hide();
}
});

MyNamespace.Qualifiers = {
"root": [
{"qualVal":"Brand","displ":"Brand"},
{"qualVal":"Price","displ":"Price"}
]};

MyNamespace.Operators = {
"root": [
{
"opVal": "equals",
"displ": "equals"
},{
"opVal": "less than",
"displ": "less than"
}]};
function onButton()
{
var dialog = new MyNamespace.ProductFilterDialog2({
width:1100,
height:300,
renderTo:document.body,
autoScroll :true
});
dialog.show();
}
</script>
<div id="foo">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td><input type="submit" name="foo" value="Click me" class="button" onClick="onButton()"/></td></tr>
</table>
</div>
</body>
</html>

I debugged it in IE with Companion-Debugger.

Thanks Frank

**mjlecomte** · 7 Apr 2008 7:05 AM

Typically people will get confirmation of a bug in the help forums before posting a bug in the bug forum.

Also, it is recommended to strip down problems to the smallest possible test case that reproduces the problem. Also, make the code self contained (a single html file for example) that only references ext-all-debug.js, etc. that has self contained sample data for the example to work as a single cut/paste so someone else can test on their local machine.

See this for an example: http://extjs.com/forum/showthread.ph...387#post142387

[2.0.2] EditorGrid: Input value not save into Record

Thread Tools

Search Thread

Display

[2.0.2] EditorGrid: Input value not save into Record

[2.0.2] EditorGrid: Input value not save into Record