toolbar.hide() és toolbar.show()

2009.01.21. 09:07 stack

Nem is gondolná az ember, hogy egy toolbar eltüntetése milyen komoly feladat, míg nem próbálta egyszerűen a hide() függvényt erre használni, ekkor az eltüntetés után a toolbar helye üresen marad és a panel body része nem változik. Ám ahhoz, hogy ez ne így legyen meglepően sok dolgot kell állítanunk.

Először is adjuk meg, hogy a toolbar méreteit másként számoljuk (ezt nem is értem, hogy miért nem ilyen alapértelmezetten), utána tüntessük el magát a toolbart (itt is megemlítendő, hogy a this.bbar az a this.getBottomToolbar().container -rel egyenlő, csakhogy ha az egyiket eltüntetjük, attól még a másik isVisible() függvény eredménye nem lesz hamis), ezután a panel méretét újraszámolhatjuk, és végül, ha a panel egy másik elembe van benne, akkor azt is újra kell rajzoltatni. Azaz:

Szólj hozzá!

Címkék: panel toolbar override

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);
        }
    },
});

5 komment

Címkék: panel override contextmenu

toString + IE + for

2009.01.07. 09:17 stack

Nem gondoltam volna, hogy valamikor az Ext.override -ot is felül kell írni. Akasztjuk a hóhért:)

Az Object osztálynak van két speciális eljárása: a toString és a valueOf, első szövegként adja vissza az objektum tartalmát, míg a második valamilyen primitív értékként. Mindkét függvény felüldefiniálható, ám van egy olyan probléma, hogy IE alatt hiába definiáljuk felül ezeket, a for( i in obj ) ciklusnál nem lesz az iteráció része a felüldefiniált függvény.

for( var i in {a: 1, b: 2, toString: function() {return 3;}}) {
    alert( i );
}

Egy kicsivel valósabb példa:

myClass = function(text) {
    this.text = text;
}
Ext.override(myClass, {
    'toString': function() {
        return this.text;
    }
});
var a = new myClass('Hello World!');
alert( a ); // [object Object]

Szólj hozzá!

Címkék: override kipróbálom

TreeNode.removeAllChildren

2008.12.23. 14:14 stack

Valahol azt olvastam, hogy nem szükséges spórolni a függvényekkel. Ha úgy érzi az ember, hogy egy kétsoros függvényre szükség van, akkor hozzuk létre azt a függvényt. És nekem tényleg többször szükségem volt már arra, hogy egy fában az egyik elem gyerekeit töröljük:

Ext.override(Ext.tree.TreeNode, {
    removeAllChildren: function() {
        while (this.hasChildNodes()) {
            this.removeChild(this.firstChild);
        }
        return this;
    }
});

Szólj hozzá!

Címkék: override treenode

DateField.change

2008.12.19. 14:59 stack

ExtJs-ben egy beviteli mezőnél akkor fut le az változás esemény, ha az adott mezőről lemegyünk. Ami többé, kevésbé megfelelő viselkedés, ám egy TriggerField-nél, például egy dátumválasztónál jó lenne, ha a megjelenő naptárban egy dátum kiválasztása után is lefutna a változás esemény.

new Ext.form.DateField({
    renderTo: Ext.getBody(),
    listeners: {
        change: function() { console.log( 'change' ); }
    }
});

Szólj hozzá!

Címkék: override change datefield

tbtext.text

2008.12.10. 09:12 stack

Szeretem a JavaScript-nek gyenge típusosságát. Hihetetlen rugalmassá teszi a benne készült eszközöket, ám mindig megvan a veszély, hogy egyszerű elírás felkutatása is hosszú és fáradságos feladat lehet, miközben más nyelvekben a fordító rögtön kidobja a hibát a típuskülönbségek miatt.

Amikor meglátom a képernyőn a [object Object] felíratot, akkor sejthetően belefutottam egy hasonló problémába. De most nem én, hanem az Toolbar készítői.

Egy eszköztár, benne egy üres elem:

new Ext.Toolbar({
    renderTo: Ext.getBody(),
    items: [
        {xtype:'tbtext', text:''}
    ]
});

Gyakorlatban hamarabb előjön, mint azt gondolnánk:)

Szólj hozzá!

Címkék: toolbar override textitem

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'); }
    }
});

Szólj hozzá!

Címkék: override tabpanel tabchange

field és label

2008.11.19. 21:51 stack

Jópofa ötlet volt ez a form layout. Teljesen felesleges lenne minden egyes input mező mellé létrehozni egy label objektumot.  Sokkal kényelmesebb, ha azt mondom, hogy az input mező egy tulajdonsága a címkéje és a konténer tulajdonsága, hogy hogyan jeleníti meg a beviteli mezők mellett (felett) a címkéket. Ám mégis kicsit szépséghibás, hogy a létrehozást segíti a rendszer, ám a további használat már nincsen megoldva… mosolyra deríti az embert, amikor az input mezőt el akarjuk tüntetni és a címkéje ott marad. Emellett szükségünk lehet futás közben a címke átírására is:

Ext.override(Ext.form.Field, {
    setFieldLabel: function(text) {
        this.fieldLabel = text;
        this.container.up('div.x-form-item')
            .child('label.x-form-item-label').update(text + ':');
    },
    hideWithLabel: function() {
        this.hide();
        this.container.up('div.x-form-item')
            .hide().setStyle('display','none');
    },
    showWithLabel: function() {
        this.show();
        this.container.up('div.x-form-item')
            .show().setStyle('display','block');
    }
});

Szólj hozzá!

Címkék: label override field

Ext.urlEncode

2008.10.30. 08:58 stack

Valahogy mindig akkor hal le az extjs.com, amikor olyan bug-ba ütközök, amelyet valószínűleg már több száz másik ExtJS használó is megtalált, és a fórumban számtalan megoldást kínáltak a probléma orvoslására.
Az url-ek elkódolását nagyon olcsón oldották meg az ExtJS-ben.

var obj = {
    str:'Hello',
    obj: {
        foo: 'Bar',
        foobar: {
            szia:'világ!',
            hello:'world'
        }
    },
    szamok: ['egy', 'ketto', 'harom'],
    ures: []
}
console.log( Ext.urlEncode( obj) );
// str=Hello&szamok=egy&szamok=ketto&szamok=harom&ures

A tömböt rosszul, az objektumot sehogy, a stringet jól jelenítette meg, a várt eredmény ez lenne:

// str=Hello&obj[foo]=Bar&obj[foobar][szia]=vil%C3%A1g!&obj[foobar][hello]=world&szamok[]=egy&szamok[]=ketto&szamok[]=harom&ures[]=

Mivel nagyobb problémát okozott volna a szerver oldalon módosítani a kódot, kénytelen voltam az Ext.urlEncode -t felülírni:

Szólj hozzá!

Címkék: override urlencode

Window.toFront

2008.10.20. 12:18 stack

Az ExtJS használata közben a Firefox néha művel furcsaságokat, az egyik ilyen, hogy ha egy inaktív ablak egyik input mezőjére kattintunk, akkor az input mező nem kapja meg a fókuszt. Az alábbi kis „patch” ezen segít:

Ext.override(Ext.Window, {
    toFront: function(e) {
        if(this.manager.bringToFront(this)) {
            if (!e || !e.getTarget().focus) {
                this.focus();
            }
        }
        return this;
    }
});

Számomra szokatlan, hogy az ExtJS fóruma mennyire aktív, illetve, hogy a support team milyen lelkesedéssel válaszolnak a legkülönbözőbb problémákra. A fenti kód is a fórumból származik.

Szólj hozzá!

Címkék: override focus window

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?