Enter key doesn't work well on confirm box [Archive]

View Full Version : Enter key doesn't work well on confirm box

cnicolas

28 Nov 2009, 4:41 AM

Hi,

I have a problem whith Enter key and confirm box when updating an EditorGridPanel.

This simple code illustrate it :

<html><head>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<script type="text/javascript">
Ext.onReady(function(){
function updStore(myRow){
Ext.MessageBox.confirm("Update","Are you sure ?",confirm);
function confirm(action){if (action == "yes"){
// update action here
}else{
myStore.rejectChanges();
}};
}
var myState=new Ext.form.ComboBox({
triggerAction:'all',
displayField:'state',
store:new Ext.data.SimpleStore({fields:['state'],data:[['true'],['false']]}),
mode:'local'
})
var myStore=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'query.php',method:'POST'}),
reader:new Ext.data.JsonReader({root:'results'},[{name:'data'},{name:'state'}])
});
var myCm=new Ext.grid.ColumnModel([
{header:'data',dataIndex:'data',width:80},
{header:'state',dataIndex:'state',width:80,editor:myState}]);
var myGrid=new Ext.grid.EditorGridPanel({
store:myStore,
cm:myCm,
autoHeight:true,
width:160,
clicksToEdit:1,
sm:new Ext.grid.RowSelectionModel({singleSelect:true})
});
myStore.load();
myGrid.render('myGrid');
myGrid.on("afteredit",updStore);
});
</script>
</head><body>
<div id="myGrid"></div>
</body></html>Query.php returns :

({"results":[ {"data":"data1","state":"false"}, {"data":"data2","state":"false"}, {"data":"data3","state":"true"} ]})Now the problem :
If you change state to true on the first row and you press enter key, the confirm box appear, but the cursor go to second row on the grid behind.
Worst, If you press Enter a second time, you can't confirm the Update action, but the cursor go to third row on the grid...

Any idea ?

Thank's for your help...

Condor

28 Nov 2009, 10:45 AM

The afteredit event isn't really suitable for this.

Wouldn't a RowEditor work much better in this case?

cnicolas

29 Nov 2009, 6:12 AM

OK, I have modified my code for RowEditor and it's better :

<html><head>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/examples/ux/RowEditor.js"></script>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../ext/examples/ux/css/RowEditor.css" />
<script type="text/javascript">
Ext.onReady(function(){
function updStore(myRow){
Ext.MessageBox.confirm("Update","Are you sure ?",confirm);
function confirm(action){if (action == "yes"){
// update action here
}else{
myStore.rejectChanges();
}};
}
var myState=new Ext.form.ComboBox({
triggerAction:'all',
displayField:'state',
store:new Ext.data.SimpleStore({fields:['state'],data:[['true'],['false']]}),
mode:'local'
})
var myStore=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'a.php',method:'POST'}),
reader:new Ext.data.JsonReader({root:'results'},[{name:'data'},{name:'state'}])
});
var myCm=new Ext.grid.ColumnModel([
{header:'data',dataIndex:'data',width:80},
{header:'state',dataIndex:'state',width:80,editor:myState}]);

var myEditor = new Ext.ux.grid.RowEditor();

var myGrid=new Ext.grid.GridPanel({
store:myStore,
cm:myCm,
autoHeight:true,
width:160,
sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
plugins:[myEditor]
});
myStore.load();
myGrid.render('myGrid');
myEditor.on({scope:this,afteredit:updStore})

});
</script>
</head><body>
<div id="myGrid"></div>
</body></html>

But there are no explicite doc for RowEditor plugin and I have 2 questions :
- The font for not edited rows (data in my example) is incorrect.
- I doesn't want the Save and Cancel buttons, how I can hide them ?

Thanks for your help.