ComboBox.tpl

2009.03.17. 22:37 stack

Ha a ComboBox elemei között az egyiknek a displayField mezője üres, akkor a legördülő listában az adott elem csupán néhány pixel magas lesz.

new Ext.form.ComboBox({
    renderTo: Ext.getBody(),
    displayField: 'display',
    valueField: 'value',
    store: new Ext.data.SimpleStore({
        fields: ['display', 'value'],
        data: [['', '0'], ['hello', '1']]
    }),
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Triviális megoldás lehet, hogy nem csinálunk ilyet :), mondjuk úgy, hogy az üres string helyett   -t használunk. (olyan szóköz, ami nem választható el) Editálható ComboBox esetén nem lesz jó, mivel kiválasztásakor megjelenik az input mezőben is a szóköz.

Másik megoldás lehetne, hogy css-ben beállítjuk a minimum magasságot. (azt leszámítva, hogy az IE nem ismeri a minimum magasságot, illetve nem tudhatjuk, hogy pontosan mekkora is az a minimum magasság, tehát ezeket leszámítva teljesen jó megoldás)

Végül megoldható úgy, hogy a lenyiló lista template-jét átszerkesztjük.

Az interpreter nyelvek (a kód értelmezése dinamikusan, azaz futás és fordítás egy időben történik) egyik előnye, hogy aránylag könnyű bennük template rendszereket írni. A futatni kívánt programkódot először átalakítjuk az adott nyelvre, majd azt futtatjuk.

Természetesen az ExtJS-ből sem maradhattak ki a temaplate-ek. :) Már az ExtJS első verziójában is létezett erre megoldás, majd az ExtJS 2-ben kiegészítve, sokkal kényelmesebb formában jelent meg az Ext.XTemplate osztály.

Visszatérve az eredeti problémára, adjunk egy alapértelmezett értéket a megjelenítéshez: {display:defaultValue(" ")}. Ha Smarty-ban lennénk, akkor mindez így nézne ki: {$display|default:" "} (az utolsó mondat valójában lényegtelen, csak azért került ide, mert - gondolom - ezt a szintaktikát sokan jobban ismerik:)

new Ext.form.ComboBox({
    renderTo: Ext.getBody(),
    displayField: 'display',
    valueField: 'value',
    store: new Ext.data.SimpleStore({
        fields: ['display', 'value'],
        data: [['', '0'], ['hello', '1']]
    }),
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',
    tpl: ['<tpl for=".">',
        '<div class="x-combo-list-item">{display:defaultValue("&#160;")}</div>',
    '</tpl>'].join('')
});

 

Szólj hozzá!

Címkék: combobox template

A bejegyzés trackback címe:

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

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?