Ext JS Réorganisation d'une liste de glisser-déposer

J'ai suivi le tutoriel sur au http://www.sencha.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1

Il est grand, mais maintenant, j'ai besoin de conseils sur la façon d'ajouter des fonctionnalités de l'être pour être en mesure de réorganiser une liste unique. Au moment où je baisse un élément de la liste est annexée à la fin. Toutefois je tiens à être en mesure de faire glisser un élément entre deux autres ou à l'avant de l'y déposer.

Tous les conseils apprécié, merci.

OriginalL'auteur babadbee | 2010-07-07

  1. 1

    J'ai trouvé Ext.GridPanel ligne de tri par glisser-déposer qui travaillent par exemple dans le blog http://hamisageek.blogspot.com/2009/02/extjs-tip-sortable-grid-rows-via-drag.html
    Il a bien fonctionné pour moi. Voici mon code js:

        app.grid = new Ext.grid.GridPanel({
store: app.store,
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
cm:  new Ext.grid.ColumnModel({
columns: app.colmodel
}),
ddGroup: 'dd',
enableDragDrop: true,
listeners: {
"render": {
scope: this,
fn: function(grid) {
//Enable sorting Rows via Drag & Drop
//this drop target listens for a row drop
//and handles rearranging the rows
var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'dd',
copy:false,
notifyDrop : function(dd, e, data){
var ds = grid.store;
//NOTE:
//you may need to make an ajax call
//here
//to send the new order
//and then reload the store
//alternatively, you can handle the
//changes
//in the order of the row as
//demonstrated below
//***************************************
var sm = grid.getSelectionModel();
var rows = sm.getSelections();
if(dd.getDragData(e)) {
var cindex=dd.getDragData(e).rowIndex;
if(typeof(cindex) != "undefined") {
for(i = 0; i <  rows.length; i++) {
ds.remove(ds.getById(rows[i].id));
}
ds.insert(cindex,data.selections);
sm.clearSelections();
}
}
//************************************
}
}) 
//load the grid store
//after the grid has been rendered
this.store.load();
}
}
}
});
    Peut-être que ceci extjs fil de discussion du forum sera utile pour quelqu'un. Les gars crée un plugin pour dragndroppable-grille-lignes ou quelque chose comme ça.

    OriginalL'auteur summer.is.gone

  2. 0

    Si vous aviez hbox d'une mise en page 3 de la Grille à côté de

    new Ext.Panel(
{
layout: "hbox",
anchor: '100% 100%',
layoutConfig: 
{
align: 'stretch',
pack: 'start'
},
items: [GridPanel1, GridPanel2, GridPanel3
})

    alors vous devez juse grille El au lieu de conteneur 

    var ddrow = new Ext.dd.DropTarget(grid.getEl(), { ....

    OriginalL'auteur Infira