Sortable DataView

2009.07.21. 08:04 stack

Egy érdekes DataView rendezési megoldást láttam nemrégiben az ExtJS fórumán. Általában a DragAndDrop rendezéseknél megfogjuk az elemeket, egérrel ide-oda mozgathatjuk, majd az egér gomb felengedésénél a megfelelő helyre illesztjük a kiválasztott elemet. Jobb esetben az egér mozgatása közben az eredeti elemet egy átmeneti töltelék elemmel helyettesítjük.

Itt az alapötlet annyi, hogy nincs tetszőleges mozgatás, nincs mozgatandó elem és nincs átmeneti állapot. Az megoldás kihasználja, hogy amikor megváltozik a DataView-hoz tartozó Store, akkor a HTML felépítés is változik, illetve, hogy a DataView-on belüli egérmozgásnál egyszerűen lekérhetjük azt az elemet, amelyik felett mozgatjuk az egeret. Nem kell mást csinálnunk, mint az eredeti elemet az új elem helyére tesszük, így a Store-ban az rekordok rendezése pont ugyanazt az eredményt adja, mintha az egérrel áthelyeznénk az adott elemeket.

Első lépésben létrehozunk egy plugin-t, amivel a DataView-hoz hozzáadjuk az rendezhetőséget:

// eredeti megoldás: http://tof2k.com/ext/sortable/
Ext.namespace("Ext.ux.plugins");
Ext.ux.plugins.SortableDataView = {
    init: function(view) {
        view.on('render', function() {
            view.addEvents('serialise');
            Ext.apply(new Ext.dd.DragDrop(view.el), {
                // itt indul a folyamat, megkeressük, hogy melyik rekordon nyomtuk le az egeret:
                onMouseDown: function(e) {
                    try {
                        this.dragData = null;
                        var id = view.indexOf(e.getTarget(view.itemSelector));
                        if (id !== -1) {
                            this.dragData = {orig: id, last: id, record: view.store.getAt(id)};
                        }
                    } catch (error) {}
                },
                // mozgatás kezdete, a kiválasztott elemhez (ha van) hozzáadjuk a megfelelő osztályt
                startDrag: function() {
                    if (!this.dragData) {return;}
                    Ext.fly(view.getNode(this.dragData.orig)).addClass(view.dragCls);
                },
                // a lényegi rész, lekérjük, hogy melyik elem felett vagyunk, és a kiválasztott elemet annak a helyére szúrjuk
                onDrag: function(e) {
                    if (!this.dragData) {return;}
                    try {
                        var id = view.indexOf(e.getTarget(view.itemSelector));
                        if (id !== -1 && id !== this.dragData.last) {
                            this.dragData.last = id;
                            view.store.remove(this.dragData.record);
                            view.store.insert(id, [this.dragData.record]);
                            Ext.fly(view.getNode(id)).addClass(view.dragCls);
                        }
                    } catch (error) {}
                },
                // folyamat vége, a dragCls-t leszedjük a kiválasztott elemről, továbbá az esemény elküldése
                endDrag: function() {
                    if (!this.dragData) {return;}
                    Ext.fly(view.getNode(this.dragData.last)).removeClass(view.dragCls);
                    if (this.dragData.orig !== this.dragData.last) {
                        view.fireEvent('serialise', view, this.dragData.orig, this.dragData.last);
                    }
                }
            });
        });
    }
};

Második lépés, ennek a használata:

new Ext.DataView({
    store: new Ext.data.SimpleStore({
        fields: ['item'],
        data: ...
    }),
    tpl: '<tpl for="."><div class="item">{item}<\/div><\/tpl>',
    overClass: 'x-view-over',
    dragCls: 'x-view-drag',
    itemSelector: 'div.item',
    plugins: Ext.ux.plugins.SortableDataView,
    listeners: {
        serialise: ...
    }
});

Ide kattintva megnézheted működés közben...

Szólj hozzá!

Címkék: plugin sortable dataview dragdrop

A bejegyzés trackback címe:

http://extjs.blog.hu/api/trackback/id/tr281258074

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben.

Nincsenek hozzászólások.

ExtJS blog, mi ez?

Az ExtJS egy JavaScript keretrendszer, melyet a blog írója elfogultan a legjobbnak tart, és ez a blog olyan apróságok gyűjteménye, melyek ExtJS használata közben felmerültek, eszébe jutottak...

Címkék

ajax (4) alignto (1) állás (3) analytics (1) anchorto (1) android (4) animate (2) array (9) auto (1) back button (1) beautifier (1) beforeevent (1) benchmark (1) blur (1) budapest.js (1) button (1) canvas (1) capture (1) case sensitive (1) center (1) change (1) cikkajánló (1) class (2) closure compiler (1) collapse (1) combobox (3) comment (1) console.log (2) contextmenu (2) core (2) count (1) css (15) csv (1) dataview (1) date (4) datefield (3) datepicker (1) debug (1) doksi (1) dragdrop (1) easing (1) eclipse (1) editor (1) element (5) error (5) eval (2) event (1) fejtörő (1) field (2) fieldset (1) filter (1) firefox (4) firefox extension (2) focus (3) fonts (1) fun (1) function (1) google (2) google chrome (1) grayscale (1) grid (4) group contact (1) header (3) height (2) hidden (1) hirek (2) history (1) htaccess (1) html5 (2) htmleditor (2) https (1) icon (3) id (2) ie (2) ie6 (1) ie9 (1) iframe (3) image (2) indexof (1) javascript (1) jquery (2) jslint (2) jsmin (1) json (7) keymap (1) kipróbálom (2) könyvajánló (2) label (1) layout (1) lint (1) log (1) loop (1) magyar (2) mandelbrot (1) mask (1) math (1) maxlength (1) mistake (1) mysql (5) napi szívás (16) nem extjs (12) node (1) nth child (1) number (1) off (5) offline (1) operator (1) override (20) pagesize (1) paging (2) panel (2) php (7) picker (1) plugin (3) pozicionálás (2) preload (1) print (1) propertygrid (1) pseudo (3) readonly (2) record (1) regexp (1) replace (1) resizable (1) rotate (1) round (1) scale (1) sencha touch (2) server (1) shuffle (1) slider (1) sort (3) sortable (1) store (2) string (7) sum (1) tabchange (1) tabpanel (1) tab key (2) tdd (1) template (1) textarea (2) textfield (1) textitem (1) theme (2) throw (1) timer (1) timestamp (1) title (2) toggle (1) toolbar (6) tools (1) total count (1) transparent (1) tree (1) treenode (1) trigger (1) truncate (1) try (1) ucfirst (1) undefined (2) unique (1) unload (1) urlencode (1) utf8 (2) verzió (1) video (1) viewer (1) viewport (2) visible (2) vtype (1) window (2) xtype (1) zindex (2)

Extjs.blog.hu - RSS

Kérdés?