Ctrl + S

2009.01.14. 11:09 stack

Gyakori jelenség, hogy megszokásból egy űrlap adatait a Ctrl+S billenytűkombinációval akarom elmenteni, és ilyenkor feljön a böngésző Save As ablaka. Néhány sorral kezelhető ez a probléma:

new Ext.KeyMap(document, {
    key: Ext.EventObject.S,
    ctrl: true,
    stopEvent: true,
    fn: function(){Ext.getBody().createChild({html: 'Saving...'});}
});

A stopEvent: true-nak köszönhetően a böngésző saját eseménye nem hajtódik végre. (csak zárójelben az IE-nek néhány esetben ez is bonyolult, a Ctrl+S-nél éppen működik, de az F1-nél például nem)

Szólj hozzá!

Címkék: keymap

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

readOnly PropertyGrid

2009.01.03. 10:01 stack

A PropertyGrid egy olyan speciális EditorGrid, amelynek két oszlopa van: name és value, ahol a value oszlopban lévő értékek szerkeszthetőek. Amiért érdekes ez az osztály, hogy a használata sokkalta kényelmesebb, átláthatóbb mintha egy szimpla EditorGrid-del készítenénk el ugyanezt.
Sajnos szerkesztés nélküli verziója nincsen. Pedig lehetne... :)

Egy tetszőleges EditorGrid-nél, ha a beforeedit esemény hamis értékkel tér vissza, akkor nem jelenik meg a szerkesztőmező. Ezzel szinte már el is értük a readOnly PropertyGrid-et, ám nem túl elegáns, hogy a gridben a kijelölés csak a value oszlopon látszódik, illetve egy PropertyGrid a HTML felépítésekor kap egy class-t, ami az szokásos selModel-lel rosszul néz ki, így ezt is ki kell ütni.

Tehát:

var readonly_propertygrid = new Ext.grid.PropertyGrid({
    title: 'Properties Grid',
    width: 300,
    renderTo: Ext.getBody(),
    source: {
        "(name)": "My Object",
        "Created": new Date(Date.parse('10/15/2006')),
        "Available": false,
        "Version": .01,
        "Description": "A test object"
    },
    listeners: { 'beforeedit': function() {return false;} },
    selModel: new Ext.grid.RowSelectionModel(),
    onRender: Ext.grid.PropertyGrid.superclass.onRender
});

Szólj hozzá!

Címkék: grid readonly propertygrid

Boldog Karácsonyt! :)

2008.12.24. 14:43 stack

Küszöbön áll a nap, az az egyetlen egy nap az évben, mely hivatalosan is a szereteté. Háromszázhatvanöt nap közül háromszázhatvannégy a gondjaidé, a céljaidé, munkádé, és a szereteté csupán egyetlen egy, s annak is az estéje egyedül. Pedig hidd el, Ismeretlen Olvasó, fordítva kellene legyen. Háromszázhatvannégy nap a szereteté, s egyetlen csak a többi dolgoké, s még annak is elég az estéje. - Wass Albert

Kellemes Karácsonyi Ünnepeket kívánok mindenkinek!

Szólj hozzá!

Címkék: off

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

autoHeight

2008.11.28. 09:55 stack

Sokat gondolkodtam azon, hogy miért így oldották meg az autoHeight-ot?
Miért használnék valamikor is autoHeight=false-t? ("Nem tudom a magasságot, de nem is szeretném, hogy az ExtJS kiszámolja!")

Vegyünk három esetet:

  • Megadom a konkrét magasságot, ekkor az autoHeight érték nem számít.
  • Olyan konténerben van az elem, ahol a konténer határozza meg a magasságot. Itt az autoHeight igaz érték elrontja az elem magasságát. Vagy bug, vagy ficsör, mindegy, a lényeg, hogy nem használható.
  • Végül, az az eset, amikor sem az elemnek nincs megadva a magasság, sem a konténer nem határoz meg magasságot. De ilyen esetben nem lenne alapértelmezett, hogyha nincs magasság, akkor az ExtJS magától meghatározza?

Valahogy az az ember érzése, hogy felesleges ez a property, ExtJS-nek is kellene tudnia, hogy mikor kell automatikus magasság.

Szólj hozzá!

Címkék: auto height

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?

süti beállítások módosítása