RowEditing plugin usage problem with gridpanel

[rushi2440]

Hi.. sencha forum member I am having problem with using the Ext.grid.plugin.RowEditing
with my gridpanel.

I am using the below code for my gridPanel.

Ext.define('admin.view.companymgt.resourceAssignedView',{
extend: 'Ext.tab.Panel',
alias: 'widget.resourceassignedview',
id:'resourceassignedview',
activeTab: 0,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'panel',
layout: {
type: 'border'
},
tabConfig: {
xtype: 'tab',
width: 150,
region: 'west'
},
items: [
{
xtype: 'gridpanel',
title: 'Project Information',
forceFit: true,
frame:true,
preventHeader: true,
store: 'resourcetask',
flex: 2.6,
region: 'center',
viewConfig: {
getRowClass: function(record) {
return record.data.id == rowId ? 'new-row' : '';
}
},
plugins : [rowEditing],
dockedItems: [
{
xtype: 'pagingtoolbar',
displayInfo: true,
store: 'resourcetask',
dock: 'bottom'
},
{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'label',
height: 14,
width: 222,
id:'resourcetaskrecord-msg',
style: 'width: 222px; height: 14px; margin: 0pt; left: 45px; top: 4px; font-weight: bold; color: red;',
},{
xtype: 'label',
anchor: '100%',
id:'resourceupdate-msg',
style: 'margin: 3px 0px 0px;',
},
{
xtype: 'tbfill'
},
{
xtype: 'textfield',
emptyText: 'enter name to search',
id:'txtsearchresourcename'
},
{
xtype: 'button',
text: 'Search',
iconCls:'search-icon',
itemId:'btnrsrctaskview-grid-search'
},
{
xtype: 'button',
text: 'Export',
iconCls:'icon-export',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'XLS',
iconCls:'icon-excel',
itemId:'btnrsrctaskview-export-excel'
},
{
xtype: 'menuitem',
text: 'CSV',
iconCls:'icon-csv',
itemId:'btnrsrctaskview-export-csv'
},
{
xtype: 'menuitem',
text: 'PDF',
iconCls:'icon-pdf',
itemId:'btnrsrctaskview-export-pdf'
}
]
}
}
]
}
],
features: [groupingprojectFeature],
columns: [{xtype: 'rownumberer', width: 40},
{
xtype: 'gridcolumn',
dataIndex: 'taskname',
text: 'Task Name'
},{
xtype: 'datecolumn',
text: 'Start Date',
dataIndex: 'startdate',
format: 'Y-M-d'
},{
xtype: 'datecolumn',
text: 'Completion Date',
dataIndex: 'enddate',
format: 'Y-M-d'
},
{
xtype: 'gridcolumn',
dataIndex: 'percentdone',
text: '% Done'
},
{
xtype: 'gridcolumn',
dataIndex: 'priority',
text: 'Priority',
renderer: function (v, m, r) {
switch (v) {
case TaskPriority.Low:
return 'Low';


case TaskPriority.Normal:
return 'Normal';


case TaskPriority.High:
return 'High';
}
},
field: {
xtype:'combobox',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'Id',
'displayText'
],
data: [[0, 'Low'], [1, 'Normal'], [2, 'High']]
}),
triggerAction: 'all',
mode: 'local',
valueField: 'Id',
displayField: 'displayText'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'employee',
header: 'Employee name',
field: {
xtype:'combobox',
name: 'employeeid',
emptyText: 'Select resource',
displayField: 'firstname',
store:'employeecombo',
valueField: 'id',
multiSelect: true,
typeAhead: true
},
renderer: function(employee){
var result = [];
employee = employee || [];
for (var idx = 0, len = employee.length; idx < len; idx++ ){
var value = employee[idx].firstname;
if(value){
result.push(value);
}
}
return result.join(', ');
}
},
{
xtype: 'actioncolumn',
id:'rsrctaskviewaction',
header: 'Action',
width: 80,
items: [{
iconCls: 'icon-edit-record',
tooltip: 'Edit Department',
text: 'edit'
}]
}]
}
]
}
]
});


me.callParent(arguments);
}


});


for the first time when I click the gridpanel it gives me the Rowediting as below image shown
39271

but after closing the panel and again opening the panel and then clicking the gridpanel it gives me the below Rowediting panel.
39272

the Rowediting panel goes behind the gridpanel. Please suggest me what's wrong with my above code why my Roweditor goes behind the gridpanel

[mitchellsimoens]

Where are you creating the plugins and features?