// reference local blank image
Ext.BLANK_IMAGE_URL = '/extjs/lib/resources/images/default/s.gif';
// create namespace
Ext.namespace('Test');
// create application
Test.app = function() {
// do NOT access DOM from here; elements don't exist yet
// private variables
var Grid1Store = new Ext.data.JsonStore({
root: 'users',
fields: [ 'id', 'name', 'email' ],
autoLoad: true,
data: { users: [
{ "id": 1, "name":"John Smith", "email":"jsmith@example.com"},
{ "id": 2, "name":"Anna Smith", "email":"asmith@example.com"},
{ "id": 3, "name":"Peter Smith", "email":"psmith@example.com"},
{ "id": 4, "name":"Tom Smith", "email":"tsmith@example.com"},
{ "id": 5, "name":"Andy Smith", "email":"asmith@example.com"},
{ "id": 6, "name":"Nick Smith", "email":"nsmith@example.com"}
]}
});
var Grid2Store = new Ext.data.JsonStore({
root: 'ddi',
fields: [ 'e164', 'local' ],
autoLoad: true,
data: { ddi: [
{ e164: '442088442235', local: '02088442235' },
{ e164: '442084452718', local: '02084452718' },
{ e164: '442084452719', local: '02084452719' },
{ e164: '442084452728', local: '02084452728' }
]}
});
// private functions
// public space
return {
// public properties, e.g. strings to translate
// public methods
init: function() {
var Grid2Panel = new Ext.grid.GridPanel({
title: 'Source',
width: 200,
renderTo: 'grid2',
store: Grid2Store,
enableDragDrop: true,
ddGroup: 'users',
enableColumnHide: false,
enableColumnMove: false,
columns: [
{
header: 'Number',
dataIndex: 'local',
sortable: true
}
]
});
var Grid1Grid = new Ext.grid.GridPanel({
store: Grid1Store,
renderTo: 'grid1',
title: 'Target',
width: 300,
enableDragDrop: true,
enableColumnHide: false,
enableColumnMove: false,
columns: [
{
id: 'name',
header: "Name",
sortable: true,
dataIndex: 'name'
},{
id: 'email',
header: "Email",
sortable: true,
dataIndex: 'email'
}
],
autoExpandColumn: 'email',
border: true,
listeners: {
/* Drop zone */
render: function(grid){
var target = new Ext.dd.DropTarget(grid.getView().mainBody,{
ddGroup: 'users',
copy: false,
notifyDrop: function(dragSource, event, data){
var dropRowIndex = dragSource.getDragData(event).rowIndex;
var user = Grid1Store.getAt(dropRowIndex);
var ddis = data.selections;
var ddis_list = '';
for(i=0; i < ddis.length; i++)
{
var ddi = ddis[i];
var e164 = ddi.data.e164;
ddis_list = ddis_list + e164 + ',';
}
Ext.Msg.alert('Drop',ddis_list + ' dropped on ' + user.data.name);
}
});
}
}
});
} // end of init
};
}(); // end of app
Ext.onReady(Test.app.init, Test.app);
|