Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Растягивание textarea - заполнение доступной высоты в окне (https://javascript.ru/forum/extjs/30869-rastyagivanie-textarea-zapolnenie-dostupnojj-vysoty-v-okne.html)

danik.js 18.08.2012 17:17

Растягивание textarea - заполнение доступной высоты в окне
 
Может кто подскажет - есть всплывающее окно, с возможностью ресайза, в окне содержится форма (FormPanel), layout у формы естественно form, форма состоит из нескольких полей. последнее поле (textarea) нужно сделать чтобы заполняло всю доступную оставшуюся высоту - тоесть растягиваем мышкой высоту окна и образовавшееся пространство внизу заполняет textarea.
Знаю уже что нужно использовать anchor каким-то образом, но ничего не получается - если прописать для textarea anchor: '100% -50' то текстовое поле растягивается по высоте, словно других полей и нет, и таким образом уходит далеко за пределы окна вниз.

для окна я прописал layout: 'anchor', а для формы - anchor: '100% 100%' таки образом форма занимает всю высоту окна. в visual studio элемент формы можно спокойно заанкорить к верху и низу, но там, можно сказать абсолютное позиционирование, а extjs не использует его (по крайней мере по умолчанию)

Deff 18.08.2012 20:28

<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>

<div id=Wrap style="position:fixed;z-index:1200;top:120px;left:0;border:red solid 2px;width:80%;height:430px;max-height:430px;">
aaaaaaaaassssssssssssssssssss<br>
saaaaaaaaaaaaaaaaaassssssssssssssssssss<br>
saaaaaaaaaaaaaaaaaassssssssssssssssssss<br>
saaaaaaaaaaaaaaaaaassssssssssssssssssss<br>
saaaaaaaaaaaaaaaaaassssssssssssssssssss<br>
saaaaaaaaaaaaaaaaaassssssssssssssssssss<br>
saaaaaaaaaaaaaaaaaassssssssssssssssssss<br>
<div id=clear style="border:red solid 1px;width:100%;height:3px"></div>


 <textarea id="MyTex" style="border:blue solid 1px;width:100%;"></textarea>

</div>

<script type="text/javascript">
  var delta = 12;

function resizTextar() {
    heitTex=$('#Wrap').height()-$('#clear').position().top-delta;
    $('#Wrap #MyTex').css({"height":heitTex})
}resizTextar();

</script>

При растягивании div - обращаемся к функции resizTextar()

Aetae 18.08.2012 23:13

Deff,
При чём тут глупое jqйery, вас про ExtJS спрашивают.

Deff 18.08.2012 23:16

Aetae,

danik.js 19.08.2012 06:15

В общем, вопрос можно закрыть.
Решил путем компенсации высоты за счет большого отступа от низа, равного суммарной высоте остальных полей, например anchor: '100% -300' - и поле не вылазиит за пределы окна. Правда для каждого окна придется прописывать разное значение, ибо в каждом окне разный набор полей.
Но при layout: 'form' это наверное единственное решение - этот лэйаут не очень гибкий в плане позиционирования, зато сам отрисовывает лэйблы полей. Подругому наверное только layout: 'absolute' и прописывать жестко высоту и положение x/y каждого элемента (типа как в VCL получится, например как в Visual Studio :) )

Deff 19.08.2012 10:43

danik.js,
Есть плагин в Инете - растягивающий textarea - а не div
Тогда просто делаете у дива автовысоту - а растяжение textarea будет автоувеличивать и высоту div до нужных размеров
Вот пример http://s1.uploads.ru/i/IZhHA.png
http://hostjs-mybb2011.narod.ru/SmiliesBoxes2.htm
А в Moзилле и Гугле вроде свойство такое есть по умолчанию

danik.js 19.08.2012 12:38

Deff, вопрос задан в контексте ExtJS, поэтому решение должно быть специфичным и не требовать каких-то плагинов (тем более что все элементы целиком генерируются extjs'ом - исходный html код - пустой)

Собственно, я предположил что кто-то уже работал с extjs и имел счастье решать подобную проблему...
Возможно это решается через хитроумное сплетение всяких там панелей с причудливыми layout параметрами...

Deff 19.08.2012 12:40

danik.js,
В инете вродь есть нативный JS, http://leonid.shevtsov.me/ru/rastyag...a-po-vertikali

nekto_O 19.08.2012 13:43

Цитата:

Сообщение от danik.js
Решил путем компенсации высоты за счет большого отступа от низа, равного суммарной высоте остальных полей, например anchor: '100% -300' - и поле не вылазиит за пределы окна. Правда для каждого окна придется прописывать разное значение, ибо в каждом окне разный набор полей.

Ну на самом деле вы правельно сделали, в документации есть пример, в котором решение схоже с вашим, но насчет плохой гибкости решения я с вами соглашусь. Возможно есть лучшее решение, нужно экспериментировать))

Цитата:

Сообщение от Deff
В инете вродь есть нативный JS, http://leonid.shevtsov.me/ru/rastyag...a-po-vertikali

Цитата:

Сообщение от Aetae
...вас про ExtJS спрашивают.

Цитата:

Сообщение от danik.js
Deff, вопрос задан в контексте ExtJS

Добавлю только то что копать сгенеренный фреймворком dom и пытаться там что-то изменить, это все равно что разобрать космическую станцию ради одного винтика.


Часовой пояс GMT +3, время: 21:32.