tabchange

2008.12.08. 09:00 stack

Valamiért a TabPanel kirajzolásnál lefut a tabchange esemény:

new Ext.TabPanel({
    renderTo: Ext.getBody(),
    activeTab: 0,
    items: [
        {title:'1',  html:'Lorem ipsum...'},
        {title:'2',  html:'Lorem ipsum...'}
    ],
    listeners: {
        'tabchange': function() { alert('tabchange'); }
    }
});

Először arra gondoltam, hogy majdhogynem logikus, mivel az inicializálásnál az activeTab Number típusú, míg utána Panel típusú lett. Azaz valóban történt változás. Ám a következő átalakítás után sem javult a helyzet:

var panel1 = new Ext.Panel({title:'1',  html:'Lorem ipsum...'}});
var panel2 = new Ext.Panel({title:'2',  html:'Lorem ipsum...'});
new Ext.TabPanel({
    renderTo: Ext.getBody(),
    activeTab: panel1,
    items: [panel1, panel2] ,
    listeners: {
        'tabchange': function() { alert('tabchange'); }
    }
});

Problémán átléphetnék egy minimális hack segítségével, miszerint az eseményt a kirajzolás után adnánk hozzá, de még ez sem hozta a kívánt eredményt:

listeners: {
    'render': function(tabPanel) {
        tabPanel.on('tabchange', function() { alert('tabchange'); });
    }
}

Ha már itt vagyunk, akkor lehetne az első tab váltás után hozzárendelni a valódi tab váltás eseményt:

listeners: {
    'tabchange': {
        fn: function(tabPanel) { tabPanel.on('tabchange', function() { alert('tabchange'); }); },
        single: true
    }
}

Mindez az első problémára megoldást jelenthetne, ám ez már annyira csúnya, hogy kénytelenek vagyunk ehelyett átvizsgálni a ExtJS kódját a probléma valódi oka miatt. Téves volt az a gondolat, hogy a Number és a Panel típus számítana, ugyanis kirajzoláskor minden esetben a hagyományos setActiveTab fut le:

render : function(){
    Ext.TabPanel.superclass.render.apply(this, arguments);
    if(this.activeTab !== undefined){
        var item = this.activeTab;
        delete this.activeTab;
        this.setActiveTab(item);
    }
}

Így nem maradt más, mint kirajzoláskor átmenetileg kikapcsolni az eseményküldést:

Ext.override(Ext.TabPanel, {
    render : function(){
        Ext.TabPanel.superclass.render.apply(this, arguments);
        if(this.activeTab !== undefined){
            var item = this.activeTab;
            delete this.activeTab;
            this.suspendEvents();
            this.setActiveTab(item);
            this.resumeEvents();
        }
    }
});

Szólj hozzá!

Címkék: override tabpanel tabchange

A bejegyzés trackback címe:

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

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.

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?