pozicionálás

2009.05.02. 12:03 stack

Az ExtJs előnyeit leginkább akkor látja meg az ember, ha egy feladatot a körülmények miatt más eszközökkel kell megoldani, és tudja, hogy mindez Ext-ben csupán néhány sor lenne.
E gondolat nemrég az elemek pozicionálása okán jutottak eszembe.

Például hozzunk létre egy 300x300-as piros négyzetet és tegyük a képernyő közepére:

var el = Ext.getBody().createChild({
    style: 'width: 300px;height:300px;background-color:red;'
});
el.alignTo(Ext.getBody(), 'c-c');

A második utasításhoz némi magyarázat:
Az újonnan létrehozott elemet helyezzük el a document.body-hoz képest úgy, hogy a body közepe illeszkedjen az elem közepéhez.

Ha azt szeretnénk, hogy a böngésző átméretezése után is legyen középen, akkor az alignTo függvény helyett használjuk az anchorTo függvényt.

Vegyünk egy másik példát, hozzunk létre két 100x100-as négyzetet, és tegyük úgy a képernyő közepére őket, hogy egymás mellett helyezkedjenek el és köztük legyen 10 pixel távolság.

Szólj hozzá!

Címkék: pozicionálás element alignto anchorto

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