TextArea + Tab key

2011.10.20. 08:29 stack

Előfordulhat, hogy egy TextArea-ban a Tab gomb lenyomásával azt szeretnénk, hogy ne a következő elemre ugorjunk, hanem az adott helyre szúrjunk be egy "\t" –t.
Legegyszerűbb, ha nem a TextArea-t módosítjuk, hanem egy plugin-nal egészítjük ki.

{
    xtype: 'textarea',
    plugins: ['tabKey']
}

2 komment

Címkék: plugin textarea tab key

Hol a fókusz?

2011.10.18. 14:22 stack

Minap egy olyan problémába ütköztem, hogy a Tab gomb lenyomása utána IE alatt nem ott volt a kurzor, ahol annak lennie kellett volna... megtalálásában a document.activeElement változó volt a segítségemre.

Ha nincs semmiféle csili-vili IE segédeszközünk, akkor is az url helyére beírhatjuk, hogy:

javascript:alert(document.activeElement.outerHTML);

Szólj hozzá!

Címkék: ie focus napi szívás tab key

...

2011.10.06. 18:26 stack

Firefox 7 telepítése után meglepve láttam, hogy az egyik táblázatomban az ikonok helyén három darab pont volt csak látható. Először azt hittem, hogy a képekkel van valami probléma, majd kis vizsgálat után észrevettem, hogy már a Firefox is ismeri a text-overflow: ellipsis; CSS szabályt.

Ennek örülünk, a méretezést meg pontosítani kell mindenhol... :)

Szólj hozzá!

Címkék: css

transparent iframe in IE

2011.09.24. 14:39 stack

Explorer-ben egy iframe-nek hiába adunk átlátszó hátteret, attól még az nem lesz átlátszó. Alapértelmezetten nincs engedélyezve az átlátszóság...

if (Ext.isIE) {
    Ext.select('iframe').set({allowTransparency: true});
}

Szólj hozzá!

Címkék: transparent iframe

Slider.zIndex

2011.07.04. 07:39 stack

Ha egy SliderField-nél a csúszkát mozgatjuk, akkor megváltozik a hozzá tartozó z-index értéke.

(A SliderField is a MultiSlider elemet használja, ahol több thumb elem is használható, így szükséges, hogy mozgatás közben az aktuális elem magasabban legyen, mint a többi)

Az nem világos, hogy miért kell alapértelmezetten ilyen extrém nagy értéket (10.000) megadni ennek a z-index-nek? Egy ablak alapértelmezetten 9.000 körüli z-index-et kap.
Példa itt: stack.hu/extjs/slider_zindex.php (csúszka mozgatás, majd ablak ráhelyezés)

A MultiSlider egyik paramétere, hogy mekkora értéket kapjon a z-index, ennek felülírásával javítható ez a probléma.

Ext.slider.MultiSlider.prototype.topThumbZIndex = 1;

Javított verzió megnézhető itt: stack.hu/extjs/slider_zindex.php?fix

Szólj hozzá!

Címkék: override zindex slider

createContextualFragment

2011.05.30. 08:02 stack

Sajnos az IE 9-nek van egy kis problémája az ExtJS-sel: Error: Object doesn't support property or method 'createContextualFragment'. Adjuk hozzá a hiányzó metódust:

if (typeof Range !== "undefined" && !Range.prototype.createContextualFragment) {
    Range.prototype.createContextualFragment = function (html) {
        var frag = document.createDocumentFragment(),
            div = document.createElement("div");
        frag.appendChild(div);
        div.outerHTML = html;
        return frag;
    };
}

2 komment

Címkék: override ie9

font-family

2011.04.15. 19:24 stack

Nemrég játszottam egy kicsit a Google Web Fonts rendszerrel.
Egyszerű és nagyszerű technológia. :)

Sajnos szembesülnöm kellett azzal, hogy a különböző böngészők a font-family értékét JavaScript-ben nem ugyanúgy kezelik. Főleg, ha az adott betűkészlet még nincs is betöltve.

Egy egyszerű CSS szabály:

.mountains {
    font-family: 'Mountains of Christmas',arial,serif;
}

Két lekérés. Az első elem a fenti CSS osztályt kapja meg, a másik elem style-ból kapja meg ugyanazt.

var el1 = Ext.getBody().createChild({
    cls: 'mountains'
});
var el2 = Ext.getBody().createChild({
    style: "font-family: 'Mountains of Christmas',arial,serif;"
});
Ext.getBody().createChild({
    tag: 'pre',
    html: el1.getStyle('font-family') + "\n" +
          el2.getStyle('font-family')
});

Eredmények:

Szólj hozzá!

Címkék: css fonts

Array.chunk()

2011.03.22. 13:16 stack

// [1, 2, 3, 4, 5, 6].chunk(2); -> [[1, 2], [3, 4], [5, 6]]
if (typeof Array.prototype.chunk === 'undefined') {
    Array.prototype.chunk = function (size) {
        for (var x, i = 0, c = -1, l = this.length, n = []; i < l; i++) {
            (x = i % size) ? n[c][x] = this[i] : n[++c] = [this[i]];
        }
        return n;
    };
}

Szólj hozzá!

Címkék: override array

video.loop in Firefox

2011.03.16. 18:32 stack

Mostanában volt szerencsém foglalkozni a HTML5-féle videó megjelenítéssel. Egyelőre nagyon felemás véleménnyel vagyok róla.

Firefox valamiért nem támogatja a loop paramétert, ám egyszerűen helyettesíthető a befejezés esemény lekezelésével. onended="this.play();"

Szólj hozzá!

Címkék: video loop html5

!JQuery

2011.03.02. 07:24 stack

Azt tapasztaltam, hogy sokan csupán azért használják az ExtJS-t a JQuery könyvtárral, mert úgy gondolják, hogy azzal egyszerűbb a szelektorok használata, a CSS módosítás vagy éppen az animáció.
Pedig ezeknek mind létezik az ExtJS-es megfelelője:

DOM Basic + CSS:

$("#id, .class, div").addClass('blue');
Ext.select("#id, .class, div").addClass('blue');
$("input[type='text']").css('background', 'red');
Ext.select("input[type='text']").setStyle('background', 'red');

Effektek + Animáció:

$('#id').slideUp();
Ext.get('id').slideOut('t', {useDisplay: true});
$('#id').animate({opacity: 0.5, width: 20}, 1500, 'easeOutBounce');
Ext.get('id').shift({
    opacity: 0.5,
    width: 20,
    duration: 1.5,
    easing: 'bounceOut'
});

Szólj hozzá!

Címkék: element jquery animate

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