PDA

View Full Version : Grid Update Rows Drag & Drop



Holomew
11 Mar 2010, 9:06 AM
Hi. I'm writing a extjs grid from a ColdFusion component. I'm able to get the data just fine and I can also drag and drop the records/rows with no problem (other than a strange RowNumbering not renumbering correctly).

I am a little confused on how to write the new order of the grid (after a record has been dragged and dropped to a new row). I don't mean the logic of how it would work but rather how to write the new store (is it a new store?).


Ext.onReady(function(){

//This function will be called on a succesful load, it can be used for debugging or perform on load events.
/*function testStore(st,recs,opts){
console.info('Store count = ', store.getCount());
}*/

//This is our JSON record set which defines what kind of data will be present in the JSON passed back from our component.
var users = Ext.data.Record.create([
{name:'LISTORDER',type:'int'},
{name:'USERID',type:'int'},
{name:'FIRSTNAME',type:'string'},
{name:'LASTNAME',type:'string'},
{name:'FAVORITECOLOR',type:'int'},
store
]
)

var CRUDSelect = 'ListData';

var conn = new Ext.data.Connection();


// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
encode: true// <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
//writeAllFields: true
});

// create the Data Store
var store = new Ext.data.JsonStore({
totalProperty:'DATASET',//This is how many total records are there in the set.
root:'ROWS',//The Root of the data.
url:'listLocation.cfc',//Where we get it from
remoteSort: false,//We will sort server side
restful: true,
//Base Params are parameters passed in during the first call
baseParams:{
method: 'GridData',
returnFormat: 'JSON',
thisFunction: CRUDSelect,
start: '0',
limit: '100',
sort: 'ListOrder',
dir: ''
},
//We define the JSON Reader for the data. We also need to set the totalProperty, root and idProperty for the dataset here.
reader: new Ext.data.JsonReader({
totalProperty:'DATASET',
root:'ROWS',
idProperty:'ID'
},
users
),
writer: new Ext.data.JsonWriter({
encode: true// <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
//writeAllFields: true
}/*,
users*/
),
//Fields read in
fields: [
'LISTORDER','USERID','FIRSTNAME','LASTNAME','USEREMAILID','FAVORITECOLOR'
],
//We specify the listeners to be called during load or another one during loadexception. good for debugging purposes.
/*listeners: {
load:{
fn: testStore
},
loadexception: {
fn: function() {
//console.log(arguments);
//console.info("Response Text?"+response.responseText);
//console.log("dgStore Message \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);
}
}
}*/
});

//We setup the Grid
var grid = new Ext.grid.GridPanel({
width: 600,
height: 400,
title: 'Users',
store: store,
trackMouseOver: true,
disableSelection: false,
loadMask: true,
stripeRows: true,
collapsible: true,
enableDragDrop: true,
ddGroup : 'mygrid-dd',
//ddText : 'Place this row.',
// grid columns
columns:[
new Ext.grid.RowNumberer(),//This will do numbering on the grid for us
{
id: 'Order',
header: "Order",
dataIndex: 'LISTORDER',
width: 100,
hidden:false,
sortable: true
},/*{
header: "User ID",
dataIndex: 'USERID',
width: 100,
hidden: false,
sortable: true
},*/{
header: "First Name",
dataIndex: 'FIRSTNAME',
width: 100,
hidden: false,
sortable: true
},{
header: "Last Name",
dataIndex: 'LASTNAME',
width: 100,
hidden: false,
sortable: true
},{
header: "Favorite Color",
dataIndex: 'FAVORITECOLOR',
width: 100,
hidden: false,
sortable: true
}],

sm: new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
beforerowselect: function(sm,i,ke,row){
grid.ddText = "This is a test."; //title_img(row.data.title, null, row);
}
}
}),

listeners: {
afteredit: function(e){
e.record.commit();
}
},

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
//pageSize: 10,
store: store,
displayInfo: false,
//displayMsg: 'Records {0} - {1} of {2}',
displayMsg: console.info,
//emptyMsg: "No Records to display"
})
/*bbar: new Ext.Toolbar({
//pageSize: 10,
//store: store,
displayInfo: false,
//displayMsg: 'Records {0} - {1} of {2}',
//emptyMsg: "No Records to display"
})*/
/*bbar = grid.getBottomToolbar();
bbar.add('-', {
pressed: false,
enableToggle: false,
text: 'Add',
icon: '',
cls: 'x-btn-text-icon',
handler:addShow
});
bbar.doLayout();
);*/

});


// add some buttons to bottom toolbar just for demonstration purposes
grid.getBottomToolbar().add([
'->',
{
text: ' Save This Order & Print ',// + (local ? 'On' : 'Off'),
//tooltip: 'Toggle Filtering between remote/local',
enableToggle: false,
handler: function (button, state) {
//var local = (grid.filters.local===true) ? false : true;
//var text = 'Revert'; //+ (local ? 'On' : 'Off');
//newUrl = 'test.cfm';//local ? url.local : url.remote;

conn.request({
url: 'listLocation.cfc',
params: {
action: 'UpdateData',
ListOrderQuery: store
},
success: function(resp, opt) {
//e.commit();
},
failure: function(resp, opt) {
//e.reject();
}
});

//grid.getStore().reload();

/*url:'listLocation.cfc',
baseParams:{
method: 'getStuffA',
returnFormat: 'JSON',
start: '0',
limit: '100'
}*/

// update the GridFilter setting
//alert(newUrl);
//grid.filters.local = local;
// bind the store again so GridFilters is listening to appropriate store event
//grid.filters.bindStore(grid.getStore());

// update the url for the proxy
//grid.getStore().proxy.setApi('read', newUrl);

//CRUDSelect = 'UpdateData';

//button.setText(text);
//grid.getStore().reload();
}
}
]);

//Default Sort set for the grid load call
//store.setDefaultSort('FIRSTNAME','ASC');
// render it
grid.render('topic-grid');

// trigger the data store load
store.load();

var ddrow = new Ext.dd.DropTarget(grid.getView().mainBody, {
ddGroup: 'mygrid-dd',
notifyDrop: function(dd, e, data){
var sm = grid.getSelectionModel();
var rows = sm.getSelections();
var cindex = dd.getDragData(e).rowIndex;
if (sm.hasSelection()) {
for (i = 0; i < rows.length; i++) {
store.remove(store.getById(rows[i].id));
store.insert(cindex,rows[i]);
}
sm.selectRecords(rows);
}

/*conn.request({
url: 'listLocation.cfc',
params: {
action: 'UpdateData',
ListOrderQuery: store
},
success: function(resp, opt) {
//e.commit();
},
failure: function(resp, opt) {
//e.reject();
}
});*/

//writer;
//grid.getStore().reload();
}

});

/*var win = new Ext.Window({
title: 'Grid Filters Example',
height: 400,
width: 700,
layout: 'fit',
items: grid
}).show();*/

});