PDA

View Full Version : TextField in Cell Editing Plugin, floats along with the Pointer



prijithkr
18 Apr 2013, 11:18 PM
Hi

I have a grid using CellEditing Plugin, in a panel using anchor layout To Edit few columns, But when i keep the pointer exactly above it and scroll up or down, the Textfield floats along with the Pointer



var detailGrid=Ext.create('Ext.grid.Panel', {
store: detailGridGridStore,
minHeight: 90,
id:'detailGrid',
overflowY:'auto',
anchor:'100% 80%',
deferRowRender: false,
viewConfig: { loadMask: false },
columns: [

{header: 'Carrying Value' + '<span style="color:red; font: Arial; font-size: 11px"> &gt; </span>', id:'NAVDetailCarryingValue', dataIndex: 'carryingValue',flex:1,menuDisabled:true,renderer: Ext.util.Format.numberRenderer("0,000,000.00/i"),originalText:'Carrying Value',
editor: {
xtype: 'numberfield',
name:'carryingValue',
hideTrigger:true,
enforceMaxLength : true,
maxLength: 15,
readOnly: false
}
},

{header: 'Carrying Cap Rate (%)' + '<span style="color:red; font: Arial; font-size: 11px"> &gt; </span>', id:'NAVDetailCarryingCapRate', dataIndex: 'carryingCapRt',flex:1,menuDisabled:true,renderer: Ext.util.Format.numberRenderer("0,000,000.00/i"),originalText:'Carrying Cap Rate (%)',
editor: {
xtype: 'numberfield',
name:'carryingCapRt',
hideTrigger:true,
enforceMaxLength : true,
maxLength: 15,
readOnly: false
}
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
pluginId: 'navcellplugin'

})
]
});


43233

slemmon
20 Apr 2013, 10:42 AM
I'm unable to reproduce the issue you're seeing.
What version of ExtJS are you using? What browser / OS are you seeing the issue in?

prijithkr
21 Apr 2013, 9:03 PM
Extjs 4.1 and it occured in both IE and Chrome

Even this guy has faced the same problem, as posted in this post
http://www.sencha.com/forum/showthread.php?256570

B (http://www.sencha.com/forum/showthread.php?256570)ut no reply found in that either!!!

slemmon
22 Apr 2013, 8:24 AM
I'd like to help out, but haven't been able to reproduce the error you're seeing using a celleditor example.

What version of ExtJS are you using? What browser / OS are you seeing the issue in?

prijithkr
23 Apr 2013, 2:14 AM
Thank you so much for the response...

See I have the following View in my Application, I have given the blank panel with height 300, so that the vertical scroll bar will appear

i am setting the height of the container on render, with the height of the browser, And the above mentioned problem occurs only when the height is set in that way,

If i am not setting the height of the main panel, the problem doesnt occur



var commentsStore=Ext.create('Ext.data.Store', {
storeId:'commentsStore',
fields:['Comments', 'Date', 'Posted By'],
data:{'items':[
{ "Date":"17/1/2013", "Comments":"Very Good", "Posted By":"Test" },
{ "Date":"17/1/2013", "Comments":"Good", "Posted By":"Joseph" },
{ "Date":"17/1/2013", "Comments":"Very Good", "Posted By":"Mishra" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});



var commentsGridRepDetails=Ext.create('Ext.grid.Panel', {
id: 'commentsGridRepDetails',
height:150,
// width:600,
autoScroll:true,
viewConfig: { forceFit: true } ,
store: commentsStore,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columns: [
{ text: 'Date', dataIndex: 'Date',flex:1,editor: 'datefield'},
{ text: 'Posted By', dataIndex: 'Posted By' ,flex:1 },

{ text: 'Comments', dataIndex: 'Comments' ,flex:3,editor:'textareafield' }
,
{header: 'Delete',
xtype:'actioncolumn',
align:'center',
width:50,
items: [{
icon: 'images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {

Ext.MessageBox.confirm('Delete', 'Are you sure ?', function(btn){
if(btn === 'yes'){
var rec = grid.getStore().getAt(rowIndex);
grid.getStore().removeAt(rowIndex);
}
else{

}
});





}
}]
}

]

});


Ext.define('App.view.mainPanel' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.mainPanel',
id:'mainPanel',
layout: {
type: 'fit'
},
listeners:{
render:function(){
this.setHeight(Ext.getBody().getHeight());
}
},

items: [
{
xtype:'container',
layout:'anchor',
autoScroll:true,
items:[{xtype:'panel',height:300},{xtype:'panel',height:300},{xtype:'panel',height:300},{xtype:'panel',height:300},{xtype:'panel',height:300},{xtype:'panel',height:300},commentsGridRepDetails,{xtype:'panel',height:300},{xtype:'panel',height:300},{xtype:'panel',height:300}]
}

]


});

slemmon
23 Apr 2013, 10:58 PM
For what it's worth I'm not seeing the issue when testing with Chrome and 4.1.1, 4.1.3, or 4.2.