FieldSet.titleCollapse

2012.03.11. 08:09 stack

Szeretem használni a FieldSet komponenst Checkbox-szal. (checkboxToggle: true) Jól látszódik, hogy a konténer és a komponensei között milyen viszony áll fent.

Hasznos, ha nem csak a checkbox-ra lehet kattintani, hanem a teljes cím kattintható. (titleCollapse: true) Ám sajnos ezzel a property-vel több probléma is van: 1. betesz egy teljesen felesleges és zavaró "toggle" ikont a checkbox és a cím közé. (igaz ez kikapcsolható: hideCollapseTool: true) 2. a checkbox elromlik, ami elég komoly probléma. :) A checkbox-ra kattintva is lefut a váltás, majd mivel a header komponensen is rajta van a kattintás figyelés, ezért mégegyszer lefut a váltás. Tehet az eredmény csupán egy villanás.

Legegyszerűbbnek az az út tűnik, ha a címre kattintást, mi magunk kezeljük le:

var fieldset = {
    title: 'my fieldset',
    xtype: 'fieldset',
    checkboxToggle: true,
    collapsed: true,
    items: [{title: 'Hello'}],
    listeners: {
        render: function (cmp) {
            cmp.checkbox.next()
                .on('click', cmp.toggleCollapse, cmp)
                .applyStyles({cursor: 'pointer'});
        }
    }
};

Mindez ExtJS 4-ben? Itt ez valahogy egy az egyben kimaradt. Itt nincs titleCollapse. De legalább hiba sincs. :)

var fieldset = {
    title: 'my fieldset',
    xtype: 'fieldset',
    checkboxToggle: true,
    collapsed: true,
    items: [{title: 'Hello'}],
    listeners: {
        render: function (cmp) {
            cmp.titleCmp.el
                .on('click', cmp.toggle, cmp)
                .applyStyles({cursor: 'pointer'});
        }
    }
};

Szólj hozzá!

Címkék: title collapse toggle fieldset

A bejegyzés trackback címe:

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

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?