ExtJs 4 - Grid - Drag and Drop - Ne pas rendre une ligne draggable

Version imprimable

20/12/2011, 16h46
ROD_M6C

ExtJs 4 - Grid - Drag and Drop - Ne pas rendre une ligne draggable

Bonjour,

J'utilise ExtJs4.
J'ai 2 Grid qui me servent a faire du drag and drop de l'une vers l'autres et vis et versa.

Je voudrais interdire de faire du Drag and Drop sur certaines lignes suivant un test spécifique.

Auriez-vous un exemple ?

Je ne veux pas faire ça via le beforeDropItem car (pour moi) cela n'a pas de sens d'interdire un Drag&Drop (via l'affichage d'un message d'erreur par exemple) d'une ligne après que l'utilisateur est essayé de déplacé la ligne, si on sait pertinemment que cette ligne n'est pas déplaçable dés l'affichage du contenu du grid.

Donc je voudrais griser les lignes qui ne peuvent pas être déplacé. Et laisser l'utilisateur déplacer les autres lignes.

Par la même occasion auriez-vous un exemple de l’implémentation du Drag (en non Drop) ?
Cela peut toujours m'être utile et je pense qu'une des solutions est là....

Merci ;)
20/12/2011, 17h19
kenny.kev

tu ajout l'évènement before dans la déclaration du drag et tu tests les cas :
si interdit tu return false;
sinon tu laisse passer.

Pour griser la ligne tu ajoute un classe sur le td.

Tu aurais un exemple ??? Car ce que tu me dis ne correspond pas au code que je trouve dans la doc Sencha ou tout autre exemple !!!

Ci-dessous un extrait de mon grid.
Le fait de pouvoir faire du Drag&Drop se fait via l'ajout du plugin 'gridviewdragdrop'.
Je précise que, sauf erreur de ma part, l'ajout d'un listener 'beforedrag' ou 'drag' (comme je l'ai fait pour le Drop) dans le viewConfig ne fonctionne pas. J'ai déjà testé.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
Ext.define('common.grid.GridDragDropExtjs4', {
	extend: 'Ext.grid.Panel'
	,
	alias: 'widget.commonGridDragDrop',
	alternateClassName: 'CommonGridDragDrop'
	,
	viewConfig: {
		listeners: {
		    beforedrop: function(nodeEl, data) {
		        return this.panel.onBeforeDrop(nodeEl, data);
		    }
		    ,
		    drop: function(nodeEl, data, overModel, dropPosition, eOpts) {
		        return this.panel.onDrop(nodeEl, data, overModel, dropPosition, eOpts);
		    }
		},
		plugins: {
	            ptype: 'gridviewdragdrop',
            	    stripeRows : true
	        }
		,
		allowCopy: true
    	}
	,
	onBeforeDrop : function(nodeEl, data) {
		console.info('common.grid.GridDragDropExtjs4 onBeforeDrop');
	}
	,
	onDrop : function(nodeEl, data, overModel, dropPosition, eOpts) {
		console.info('common.grid.GridDragDropExtjs4 onDrop');
	}
	,
	layout: {
            type: 'hbox',
            align: 'stretch'
        },
        draggable: true 
        ,
        defaults     : { flex : 1 },//auto stretch
	multiSelect: true
});

Pour la couleur c'est avec le getRowClass? exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
viewConfig: {
    getRowClass: function (record){
    if(record.data.action == 'Ajouter'){
        return 'green';
    } else if (record.data.action == 'Supprimer') {
        return 'red';
    } else if (record.data.action == 'Modifier') {
        return 'orange';
    }
    return 'x-grid3-row-collapsed';
}
},

Je ne retrouve plus comment j'avais fait pour ne pas autorisé certaines lignes à les déplacer.

20/12/2011, 22h54
ROD_M6C

Merci je vais déjà tester ça. Si tu retrouves ce que t'avais fait je suis preneur ;)
Ou quelqu'un d'autre ;)