PDA

View Full Version : Need to reload (rerender?) grids inside of a window



yerajeff
17 Jun 2010, 2:53 PM
I have one main grid that allows you to click a button in the tbar and initiate the function below. When the button is clicked a window pops up with two more grids allowing you to drag and drop back and forth between the grids. Everything works great the first time; however, the second time when the window is unhidden the same two grids are still there with the same data and nothing is refreshed...

Basically I am passing an id based on whatever selection is made on whatever row in the main grid. This id loads different data from two different stores, one for each drag and drop grid.

Is there a way to destroy the window and render it again so it does not hold on to those grids?... or a way to close it?...because just hiding it is not getting the job done and is where I believe my problem is.... I'm trying to pull unique data every time the tbar button in the main grid is clicked.

Your help is much appreciated!




var buildDragDropGrids = function(item) {


var sel = groupsgrid.getSelectionModel().getSelected();
var selIndex = allgroups.indexOf(sel);
var seldata=sel.data;
var currentgroup_id = seldata.group_id;



myRecordObj = Ext.data.Record.create([

{name: primaryKey},//this corresponds to 'contact_id', I assigned a
//variable to this value since it is used
//multiple times throughout this code (see the
//Private Variable definitions)
{name: 'contact_mobile', mapping: 'contact_mobile', sortDir: 'ASC', sortType: 'asUCString'},
/**
* I've noticed the sorting is questionable when using paging. For
* example, if the record spans multiple pages, the contact_mobile "3M" doesn't
* show up first. If all records are loaded into a single page view
* then "3M" shows up at the top of the ASC sorted column.
*/
{name: 'contact_fname'},
{name: 'contact_lname'}


]);


myReader = new Ext.data.JsonReader( //creates array from JSON response
{
root: 'results', //delimiter tag for each record (row of data)
totalProperty: 'total',//element containing total dataset size (opt
id: primaryKey //used several times so a Private Variable is used

},

myRecordObj//pass a reference to the object
);


currentcontacts = new Ext.data.GroupingStore({ //if grouping
proxy: new Ext.data.HttpProxy({
url: 'groupcontacts.php', //url to data object (server side script)
method: 'POST'
}),
baseParams:{task: "readContacts", whichGroup:currentgroup_id},
reader: myReader,
//groupField:'Groups', //added for GroupingStore, specifies initial group sort
sortInfo:{field: 'contact_mobile', direction: "ASC"}
//remoteSort: true,//true if sort from server (false = sort from cache only)
});//end currentcontacts


myRecordObjTwo = Ext.data.Record.create([

{name: primaryKey},//this corresponds to 'contact_id', I assigned a
//variable to this value since it is used
//multiple times throughout this code (see the
//Private Variable definitions)
{name: 'contact_mobile', mapping: 'contact_mobile', sortDir: 'ASC', sortType: 'asUCString'},
/**
* I've noticed the sorting is questionable when using paging. For
* example, if the record spans multiple pages, the contact_mobile "3M" doesn't
* show up first. If all records are loaded into a single page view
* then "3M" shows up at the top of the ASC sorted column.
*/
{name: 'contact_fname'},
{name: 'contact_lname'}
]);


myReaderTwo = new Ext.data.JsonReader( //creates array from JSON response
{
root: 'results', //delimiter tag for each record (row of data)
totalProperty: 'total',//element containing total dataset size (opt
id: primaryKey //used several times so a Private Variable is used

},

myRecordObjTwo//pass a reference to the object
);


availablecontacts = new Ext.data.GroupingStore({ //if grouping
proxy: new Ext.data.HttpProxy({
url: 'groupcontacts.php', //url to data object (server side script)
method: 'POST'
}),
baseParams:{task: "readAvailableContacts", whichGroup:currentgroup_id},
reader: myReaderTwo,
//groupField:'Groups', //added for GroupingStore, specifies initial group sort
sortInfo:{field: 'contact_mobile', direction: "ASC"}
//remoteSort: true,//true if sort from server (false = sort from cache only)
});//end currentcontacts


currentcontacts.load({
params: { //this is only parameters for the FIRST page load,
//use baseParams above for ALL pages.
start: 0, //pass start/limit parameters for paging
limit: APP.groupsModule.perPage//
}
});
availablecontacts.load({
params: { //this is only parameters for the FIRST page load,
//use baseParams above for ALL pages.
start: 0, //pass start/limit parameters for paging
limit: APP.groupsModule.perPage//
}
});



var getColumnModel = function(){
if(!colModel) { //only need to create columnModel if it doesn't already exist

colModel = new Ext.grid.ColumnModel([ //instantiate ColumnModel
new Ext.grid.RowNumberer(),
{
dataIndex: 'contact_mobile',
header:"Mobile",
id: 'classcontact_mobile',
sortable: true,

},{
dataIndex: 'contact_fname',
header: "First Name",
sortable: true,

},{
dataIndex: 'contact_lname',
header: "Last Name",
sortable: true,

}

]);//end colModel

}//end of colModel

return colModel;//if colModel already exists return it

}//end getColumnModel

var getColumnModelTwo = function(){
if(!colModelTwo) { //only need to create columnModel if it doesn't already exist

colModelTwo = new Ext.grid.ColumnModel([ //instantiate ColumnModel
new Ext.grid.RowNumberer(),
{
dataIndex: 'contact_mobile',
header:"Mobile",
id: 'classcontact_mobile',
sortable: true,

},{
dataIndex: 'contact_fname',
header: "First Name",
sortable: true,

},{
dataIndex: 'contact_lname',
header: "Last Name",
sortable: true,

}

]);//end colModel


}//end of colModelTwo

return colModelTwo;//if colModel already exists return it

}//end getColumnModelTwo



///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//these to grids are for the drag and drop when editing a group


gridone = new Ext.grid.GridPanel({
autoExpandColumn: 'contact_mobile',
colModel: getColumnModel(),
ddGroup : 'DDGroup',
enableDragDrop : true,
height:330,//you must specify height or autoHeight
loadMask: true,//use true to mask the grid while loading (default = false)
plugins: [
new Ext.ux.grid.GridFilters({

local:true,//specify true if you want to filter client side

filters:[
{dataIndex: 'contact_mobile', type: 'string'},
{dataIndex: 'contact_fname', type: 'string'},
{dataIndex: 'contact_lname', type: 'string'}
]
}),
],
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//true to limit row selection to 1 row})
store: currentcontacts, //the DataStore object to use (currentcontacts: is shorthand)
stripeRows: true,//applies css classname to alternate rows, defaults to false
title:'Current Contacts - (Drag and drop right)',
trackMouseOver: true,
width:420,
//Add a bottom bar
bbar: new Ext.PagingToolbar({
plugins: [
new Ext.ux.grid.GridFilters({

local:true,//specify true if you want to filter client side

filters:[
{dataIndex: 'contact_mobile', type: 'string'},
{dataIndex: 'contact_fname', type: 'string'},
{dataIndex: 'contact_lname', type: 'string'}
]
}),
],
pageSize: APP.groupsModule.perPage,//default is 20
store: currentcontacts,
displayInfo: true,//default is false (to not show displayMsg)
displayMsg: '{0} - {1} of {2}',
afterText: 'Records',
emptyMsg: "No data to display",//display message when no records found
items:[
'-', {

}]
}),

//this is the key to showing the GroupingStore
view: new Ext.grid.GroupingView({
forceFit:true,
//custom grouping text template to display the number of
//items per group
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})


});//end grid


gridtwo = new Ext.grid.GridPanel({
autoExpandColumn: 'contact_mobile',
colModel: getColumnModelTwo(), //gets the ColumnModel object to use (cm: is shorthand)
ddGroup : 'DDGroupTwo',
enableDragDrop : true,
height:330,//you must specify height or autoHeight
loadMask: true,//use true to mask the grid while loading (default = false)
plugins: [
new Ext.ux.grid.GridFilters({

local:true,//specify true if you want to filter client side

filters:[
{dataIndex: 'contact_mobile', type: 'string'},
{dataIndex: 'contact_fname', type: 'string'},
{dataIndex: 'contact_lname', type: 'string'}
]
}),
],
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//true to limit row selection to 1 row})
store: availablecontacts, //the DataStore object to use (ds: is shorthand)
stripeRows: true,//applies css classname to alternate rows, defaults to false
title:'Available Contacts - (Drag and drop left)',
trackMouseOver: true,
width:420,
//Add a bottom bar
bbar: new Ext.PagingToolbar({
plugins: [
new Ext.ux.grid.GridFilters({

local:true,//specify true if you want to filter client side

filters:[
{dataIndex: 'contact_mobile', type: 'string'},
{dataIndex: 'contact_fname', type: 'string'},
{dataIndex: 'contact_lname', type: 'string'}
]
}),
],
pageSize: APP.groupsModule.perPage,//default is 20
store: availablecontacts,
displayInfo: true,//default is false (to not show displayMsg)
displayMsg: '{0} - {1} of {2}',
afterText: 'Records',
emptyMsg: "No data to display",//display message when no records found
items:[
'-', {

}]
}),

//this is the key to showing the GroupingStore
view: new Ext.grid.GroupingView({
forceFit:true,
//custom grouping text template to display the number of
//items per group
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})


});//end grid


if(!editwin){
editwin = new Ext.Window({
applyTo:'window-contactgroups',
id: 'draganddropwindow',
width:855,
height:350,
closeAction:'hide',
plain: true,
layout: 'hbox',
defaults: { flex : 1 }, //auto stretch
layoutConfig: { align : 'stretch' },
items: [gridone,gridtwo],

buttons: [{
text: 'Close',
handler: function(){
editwin.hide();
allgroups.reload();
}
}]
});

}//end editwin !if check

// This will make sure we only drop to the view scroller element
var firstGridDropTargetEl = gridone.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'DDGroupTwo',
notifyDrop : function(ddSource, e, data){
var selectedRows = gridtwo.selModel.selections.items;
var selectedKeys = gridtwo.selModel.selections.keys;
var encoded_keys = Ext.encode(selectedKeys);

//submit to server
Ext.Ajax.request( //alternative to Ext.form.FormPanel? or Ext.BasicForm.submit
{ //specify options (note success/failure below that receives these same options)
waitMsg: 'Saving changes...',
//url where to send request (url to server side script)
url: 'groupcontacts.php',

//params will be available via $_POST or $_REQUEST:
params: {
task: "addContactToGroup", //pass task to do to the server script
contact_id: encoded_keys,//the unique id(s)
whichGroup: currentgroup_id,
key: primaryKey//pass to server same 'id' that the reader used
}

} //end Ajax request config
);// end Ajax request initialization

var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
gridone.store.add(records);
gridone.store.sort('contact_mobile', 'ASC');
availablecontacts.reload();
return true
}

});



// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = gridtwo.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'DDGroup',
notifyDrop : function(ddSource, e, data){
var selectedRows = gridone.selModel.selections.items;
var selectedKeys = gridone.selModel.selections.keys;
var encoded_keys = Ext.encode(selectedKeys);

//submit to server
Ext.Ajax.request( //alternative to Ext.form.FormPanel? or Ext.BasicForm.submit
{ //specify options (note success/failure below that receives these same options)
waitMsg: 'Saving changes...',
//url where to send request (url to server side script)
url: 'groupcontacts.php',

//params will be available via $_POST or $_REQUEST:
params: {
task: "removeContactFromGroup", //pass task to do to the server script
contact_id: encoded_keys,//the unique id(s)
whichGroup: currentgroup_id,
key: primaryKey//pass to server same 'id' that the reader used
}

} //end Ajax request config
);// end Ajax request initialization

var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
gridtwo.store.add(records);
gridtwo.store.sort('contact_mobile', 'ASC');
currentcontacts.reload();
return true
}
});

editwin.show(this);

}

darthwes
17 Jun 2010, 3:02 PM
closeAction:'hide' is the culprit. You want to recreate the window every time, not hide and show the same one.

I think you want closeAction:'close' and your close button needs to do editwin.close().

I'm not sure how your if(!editwin) is going to work out. You may have to go: var editWin = Ext.getCmp('draganddropwindow') before your if statement. Also it's a truthy-ness compare you might be better off asking if it's undefined like Ext.isDefined(editWin).

Hope something helped.

Good day.

yerajeff
18 Jun 2010, 9:41 AM
darthwes,

I'm not sure why I would even need an if(!editwin) statement or any other if I am closing the window... doesn't the window get removed from DOM and render itself again regardless? I did still try it with a variety of statements all giving me an error...

When I don't run any statements around the window creation process it works fine the first time, but when I go to call the function again that builds the grids and renders the window I get this error:

this.el is null
this.render(this.el.dom.parentNode);

Any ideas?

darthwes
18 Jun 2010, 11:37 AM
You might have a scope issue, you may need a closure. Your code's so much I can't just suck it all in in one viewing. Can you condense it down into a small code snippet that produces the same problems? If you do that I'll beat on the code and see if I can figure it out.

yerajeff
18 Jun 2010, 11:50 AM
darthwes,

I truncated it as much as I could by stripping out tbars and bbars as well as plugins...I took out the function to build the colmodels as well, but that can be reference in my first post.... I just left the necessary things in there... I don't think I can take anymore out of it from here:


var buildDragDropGrids = function(item) {

var sel = groupsgrid.getSelectionModel().getSelected();
var selIndex = allgroups.indexOf(sel);
var seldata=sel.data;
var currentgroup_id = seldata.group_id;

myRecordObj = Ext.data.Record.create([
{name: primaryKey},
{name: 'contact_mobile', mapping: 'contact_mobile', sortDir: 'ASC', sortType: 'asUCString'},
{name: 'contact_fname'},
{name: 'contact_lname'}

]);
myReader = new Ext.data.JsonReader( //creates array from JSON response
{
root: 'results', //delimiter tag for each record (row of data)
totalProperty: 'total',//element containing total dataset size (opt
id: primaryKey //used several times so a Private Variable is used

},
myRecordObj//pass a reference to the object
);
currentcontacts = new Ext.data.GroupingStore({ //if grouping
proxy: new Ext.data.HttpProxy({
url: 'groupcontacts.php', //url to data object (server side script)
method: 'POST'
}),
baseParams:{task: "readContacts", whichGroup:currentgroup_id},
reader: myReader,
sortInfo:{field: 'contact_mobile', direction: "ASC"}
});//end currentcontacts

myRecordObjTwo = Ext.data.Record.create([
{name: primaryKey},
{name: 'contact_mobile', mapping: 'contact_mobile', sortDir: 'ASC', sortType: 'asUCString'},
{name: 'contact_fname'},
{name: 'contact_lname'}
]);

myReaderTwo = new Ext.data.JsonReader( //creates array from JSON response
{
root: 'results', //delimiter tag for each record (row of data)
totalProperty: 'total',//element containing total dataset size (opt
id: primaryKey //used several times so a Private Variable is used

},
myRecordObjTwo//pass a reference to the object
);

availablecontacts = new Ext.data.GroupingStore({ //if grouping
proxy: new Ext.data.HttpProxy({
url: 'groupcontacts.php', //url to data object (server side script)
method: 'POST'
}),
baseParams:{task: "readAvailableContacts", whichGroup:currentgroup_id},
reader: myReaderTwo,
sortInfo:{field: 'contact_mobile', direction: "ASC"}
});//end currentcontacts

currentcontacts.load({
params: {
start: 0,
limit: APP.groupsModule.perPage
}
});
availablecontacts.load({
params: {
start: 0,
limit: APP.groupsModule.perPage
}
});


gridone = new Ext.grid.GridPanel({
autoExpandColumn: 'contact_mobile',
colModel: getColumnModel(),
ddGroup : 'DDGroup',
enableDragDrop : true,
height:330,
loadMask: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
store: currentcontacts,
stripeRows: true,
title:'Current Contacts - (Drag and drop right)',
trackMouseOver: true,
width:420,
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})

});//end grid

gridtwo = new Ext.grid.GridPanel({
autoExpandColumn: 'contact_mobile',
colModel: getColumnModelTwo(),
ddGroup : 'DDGroupTwo',
enableDragDrop : true,
height:330,
loadMask: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
store: availablecontacts,
stripeRows: true,
title:'Available Contacts - (Drag and drop left)',
trackMouseOver: true,
width:420,
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})

});//end grid

editwin = new Ext.Window({
applyTo:'window-contactgroups',
id: 'draganddropwindow',
width:855,
height:350,
closeAction:'close',
plain: true,
layout: 'hbox',
defaults: { flex : 1 }, //auto stretch
layoutConfig: { align : 'stretch' },
items: [gridone,gridtwo],

buttons: [{
text: 'Close',
handler: function(){
editwin.close();
allgroups.reload();
}
}]
});
///////////////////////////Drag and Drop functionality - after grids are rendered
// This will make sure we only drop to the view scroller element
var firstGridDropTargetEl = gridone.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'DDGroupTwo',
notifyDrop : function(ddSource, e, data){
var selectedRows = gridtwo.selModel.selections.items;
var selectedKeys = gridtwo.selModel.selections.keys;
var encoded_keys = Ext.encode(selectedKeys);
Ext.Ajax.request(
{
waitMsg: 'Saving changes...',
url: 'groupcontacts.php',
params: {
task: "addContactToGroup", //pass task to do to the server script
contact_id: encoded_keys,//the unique id(s)
whichGroup: currentgroup_id,
key: primaryKey//pass to server same 'id' that the reader used
}
} //end Ajax request config
);// end Ajax request initialization

var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
gridone.store.add(records);
gridone.store.sort('contact_mobile', 'ASC');
availablecontacts.reload();
return true
}
});

// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = gridtwo.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'DDGroup',
notifyDrop : function(ddSource, e, data){
var selectedRows = gridone.selModel.selections.items;
var selectedKeys = gridone.selModel.selections.keys;
var encoded_keys = Ext.encode(selectedKeys);

Ext.Ajax.request(
{
waitMsg: 'Saving changes...',
url: 'groupcontacts.php',
params: {
task: "removeContactFromGroup", //pass task to do to the server script
contact_id: encoded_keys,//the unique id(s)
whichGroup: currentgroup_id,
key: primaryKey//pass to server same 'id' that the reader used
}
} //end Ajax request config
);// end Ajax request initialization
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
gridtwo.store.add(records);
gridtwo.store.sort('contact_mobile', 'ASC');
currentcontacts.reload();
return true
}
});
editwin.show(this);
}//end build drag and drop gridsBasically the process of what is left is as follows:
1. Grab the currentgroup_id which is passed from the row of the main grid that initiates this function
2. Build record object 1, store 1 and reader 1
3. Build record object 2, store 2 and reader 2
4. Build gridone
5. Build gridtwo
6. Build the popup window to house the grids
7. Add drag and drop functionality between grids
Thanks a lot for your help it is much appreciated!

darthwes
18 Jun 2010, 7:45 PM
OK! Here's my advice. Get rid of the applyTo property on the edit panel. What are you doing with an applyTo? That'll fix ya right up...Unless you have for unknown reasons been abducted by aliens and are being forced to use the applyTo property, please let us know if that helps!

Condor
18 Jun 2010, 10:46 PM
Why are you reconstructing the two grids if you are reusing the window?

1. Construct both the grids and the window only once. If the window already exists, you only need to load the grid stores and show the window.
2. To reuse the window you need to hide() instead of close() it in your Close button handler. You've already set closeAction:'hide', so the [X] tool will hide instead of close the window.

darthwes
19 Jun 2010, 5:31 AM
Right, I totally blanked out on this one. Call buildDragDropGrids() once. Use hide. When you want to show it again do:



handler: function () {
var editwin = Ext.getCmp('draganddropwindow');
editwin.show();
}


Now you have need to reload the grids when you re-show. You can do



var editgrid = ...
listeners: {
show: function () {
currentcontacts.load({
params: {
start: 0,
limit: APP.groupsModule.perPage
}
});
availablecontacts.load({
params: {
start: 0,
limit: APP.groupsModule.perPage
}
});
}
},


That'll make your examples work. If you do that you can remove your inital store.load calls (before the definition of the editgrid).

Thanks Condor!

Hope we provided some help!

yerajeff
21 Jun 2010, 9:21 AM
You guys are awesome! Thanks a lot for your help, I've got everything working now. I had to do a few more modifications and figured I would share them for anyone who runs across the same issue. I still had to pass a fresh currentgroup_id each time so my window code looks like this:

if(!editwin){
editwin = new Ext.Window({
applyTo:'window-contactgroups',
id: 'draganddropwindow',
width:855,
height:350,
closeAction:'hide',
plain: true,
layout: 'hbox',
defaults: { flex : 1 }, //auto stretch
layoutConfig: { align : 'stretch' },
items: [gridone,gridtwo],
listeners: {
show: function () {
var sel = groupsgrid.getSelectionModel().getSelected();
var selIndex = allgroups.indexOf(sel);
var seldata=sel.data;
var currentgroup_id = seldata.group_id;


currentcontacts.load({
params: {
task: "readContacts",
whichGroup:currentgroup_id,
start: 0,
limit: APP.groupsModule.perPage
}
});
availablecontacts.load({
params: {
start: 0,
task: "readAvailableContacts",
whichGroup:currentgroup_id,
limit: APP.groupsModule.perPage
}
});
}
},
buttons: [{
text: 'Close',
handler: function(){
editwin.hide();
allgroups.reload();
}
}]
});

}//end editwin !if check

I also had to do the same for drag and drop so that worked, that code looks like this:

var firstGridDropTargetEl = gridone.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'DDGroupTwo',
notifyDrop : function(ddSource, e, data){
var selectedRows = gridtwo.selModel.selections.items;
var selectedKeys = gridtwo.selModel.selections.keys;
var encoded_keys = Ext.encode(selectedKeys);

var sel = groupsgrid.getSelectionModel().getSelected();
var selIndex = allgroups.indexOf(sel);
var seldata=sel.data;
var currentgroup_id = seldata.group_id;

//submit to server
Ext.Ajax.request( //alternative to Ext.form.FormPanel? or Ext.BasicForm.submit
{ //specify options (note success/failure below that receives these same options)
waitMsg: 'Saving changes...',
//url where to send request (url to server side script)
url: 'groupcontacts.php',

//params will be available via $_POST or $_REQUEST:
params: {
task: "addContactToGroup", //pass task to do to the server script
contact_id: encoded_keys,//the unique id(s)
whichGroup: currentgroup_id,
key: primaryKey//pass to server same 'id' that the reader used
}

} //end Ajax request config
);// end Ajax request initialization

var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
gridone.store.add(records);
gridone.store.sort('contact_mobile', 'ASC');
availablecontacts.reload();
return true
}

});



// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = gridtwo.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'DDGroup',
notifyDrop : function(ddSource, e, data){
var selectedRows = gridone.selModel.selections.items;
var selectedKeys = gridone.selModel.selections.keys;
var encoded_keys = Ext.encode(selectedKeys);

var sel = groupsgrid.getSelectionModel().getSelected();
var selIndex = allgroups.indexOf(sel);
var seldata=sel.data;
var currentgroup_id = seldata.group_id;

//submit to server
Ext.Ajax.request( //alternative to Ext.form.FormPanel? or Ext.BasicForm.submit
{ //specify options (note success/failure below that receives these same options)
waitMsg: 'Saving changes...',
//url where to send request (url to server side script)
url: 'groupcontacts.php',

//params will be available via $_POST or $_REQUEST:
params: {
task: "removeContactFromGroup", //pass task to do to the server script
contact_id: encoded_keys,//the unique id(s)
whichGroup: currentgroup_id,
key: primaryKey//pass to server same 'id' that the reader used
}

} //end Ajax request config
);// end Ajax request initialization

var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
gridtwo.store.add(records);
gridtwo.store.sort('contact_mobile', 'ASC');
currentcontacts.reload();
return true
}
});

Once again thanks a lot guys!