Tetszik, ahogy az ExtJS-ben megoldották az átméretezést, véleményem szerint kellően rugalmas. Egy-egy komponens átméretezést egy külön Resizable elem végzi. Létrehozásakor megadjuk az komponens id-ját, illetve az átméretezés konfigurációját. (minimum, maximum méret, átméretezés iránya, dinamikusan változzon az elem mérete, vagy csak egér felengedése után, átméretezés közben legyen-e animáció, tetszőleges méret helyett léptetés stb.)
Egy sima TextArea-nál egyszerű dolgunk van, létrehozzuk a szövegmezőt, majd a Resizable elemnek megadjuk az ő azonosítóját, illetve az átméretezés mikéntjét. Annyit emelnék ki egyedül, hogy néhány elem átméretezéséhez szükség van egy befoglaló div-re, ilyen a textarea is, emiatt van szükség a wrap: true megadására:
renderTo: Ext.getBody(),
width: 500,
height: 250
});
new Ext.Resizable(textArea.id, {
handles: 's',
minHeight: 100,
wrap: true
});
HtmlEditor-nál már kicsit bonyolultabb a helyzet...
A probléma ott kezdődik, hogy az sem triviális, hogy mit méretezünk át. Maga a HtmlEditor-hoz tartozó id, a legenerált HTML DOM-ban egy nem látható textareahoz tartozik, míg a látható elemek között van az eszköztár, a szerkesztő felület iframe-je, és mindezt körbefoglaló keret, amit méretezni kell. A következő probléma, hogy a keret méretezése kapcsán nem történik meg a többi elem igazítása, így a Resizable elem eseményeit lekezelve a HtmlEditor-t utólag hozzá kell igazítani.
renderTo: Ext.getBody(),
width: 500,
height: 250,
listeners: {
afterrender: function (htmlEditor) {
new Ext.Resizable(htmlEditor.wrap.id, {
handles: 's',
minHeight: 100,
listeners: {
resize: function (resizer, width, height) {
htmlEditor.setSize(width, height);
}
}
});
}
}
});
Itt megnézheted élőben: http://stack.hu/extjs/resizable.html
