Panel.body contextmenu

2009.01.11. 00:55 stack

Az egér jobb klikk lekezelése (a context menü előhívása) kifejezetten kényelmesen lett megvalósítva az ExtJS-ben, ám valamiért nem minden elemhez készítették el ezt alapértelmezetten. Nekem nagyon hiányzott a szimpla panel tartalmi részénél. Azaz, valami ilyesmire volt szükségem:

new Ext.Panel({
    title:'Context Menu',
    html:'Lorem ipsum....',
    renderTo: Ext.getBody(),
    listeners: {
        bodycontextmenu: function(panel, e) {
            var contextMenu = new Ext.menu.Menu({
                items: [{
                    text: 'Hello',
                    handler: function() { Ext.Msg.alert('Szia!', 'Szerbusz világ!');}
                }]
            });
            contextMenu.showAt(e.xy);
        }
    },
});

Az eredeti forrásfájlokba továbbra sem szeretnék belenyúlni, így szintén az Ext.override-dal írjuk a Ext.Panel egyes függvényeihez a hiányzó részeket:

Ext.override(Ext.Panel, {
    initComponent: Ext.Panel.prototype.initComponent.createSequence( function() {
        this.addEvents('bodycontextmenu', 'headercontextmenu');
    }),
    initEvents: Ext.Panel.prototype.initEvents.createSequence( function() {
        if(this.body) this.body.on('contextmenu', this.onBodyContextMenu, this);
        if(this.header) this.header.on('contextmenu', this.onHeaderContextMenu, this);
    }),
    onBodyContextMenu: function(e){
        e.preventDefault();
        this.fireEvent('bodycontextmenu', this, e);
    },
    onHeaderContextMenu: function(e){
        e.preventDefault();
        this.fireEvent('headercontextmenu', this, e);
    }
});

Ezzel a kiegészítéssel már a fenti kód is a várt eredményt adja.

És, ha már itt voltunk, akkor a fejléc context menüjét is hozzáadtuk. Annyi megjegyzés még a végére, hogy az addEvents elhagyható lenne, de ahogy az ExtJS kódjában is minden típusnál minden eseményt hozzáadják, így én sem akartam ezt kihagyni.

5 komment

Címkék: panel override contextmenu

A bejegyzés trackback címe:

https://extjs.blog.hu/api/trackback/id/tr48870216

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 és az adatvédelmi tájékoztatóban.

BraunX 2010.08.26. 11:34:13

A fenti (egyébként kiváló) megoldást szerettem volna "ráhúzni" a saját problémámra, de sikertelenül. Nem értem, miért, de Ext.form.HtmlEditor esetében nem sikerül OnContextMenu eseményt alkalmaznom. Esetleg tudna valaki segíteni?

stack 2010.08.28. 00:37:50

Szia! Több probléma is lesz majd, az első, hogy pontosan melyik elemen kell elkapni a jobb klikket?
Második, hogy a HTML editor, ugye egy iframe, amelyben az események másként, máshol vannak, mint az alap oldalon.

var body = Ext.select('iframe').first().dom.contentWindow.document.body;
Ext.get(body).on('contextmenu', function (e) {
e.preventDefault();
console.log(arguments);
});

Én errefelé indulnék el, de ugye a második probléma miatt a menü elhelyezésével majd még játszani kell...

BraunX 2010.08.29. 00:47:30

Szia!
Köszönöm a segítséget, segítségeddel sikerült az eseményt implementálni a HtmlEditorba. Jelenleg már csak az a problémám, hogy amint megjelenik a menü azonnal el is tűnik. Úgy tűnik, hogy az egér bármelyik gombjával kattintáskor lefut egy "sync" esemény, aminek "melléktermékeként" eltűnik a menü is.

stack 2010.08.29. 07:23:36

@BraunX: némi késleltetéssel ezt ki lehetne kerülni, illetve az elhelyezésnél ugye az iframe pozíciójával el kell tolni az egészet:

var xy = iframe.getXY();
xy[0] += e.xy[0];
xy[1] += e.xy[1];
contextMenu.showAt.defer(100, contextMenu, [xy]);

BraunX 2010.08.29. 11:46:00

a késleltetés..háth persze! Nem jutott eszembe, mert nem tudtam, hogy a megjelenítés asynchron módban történik. Kipróbáltam és remekül működik!
Annyi még ide tartozik, hogy a megjelenített Ext.menu.Menu, autoDestroy funkciója nem működött jól, megjelenéskor random módon többszörözte (vagy nem) a menü elemeit. A menu onHide eseményébe implicit módon betettem egy menu.destroy() -t, most már rendben van ez is. Mégegyszer köszi a segítséget!

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?