InlineEditBox

InlineEditBox часто описывается как виджетобертка, которая предоставляет возможность статического отображения того, что в действительности является элементом ввода. Когда потребуется изменить содержимое элемента, пользователь должен просто выбрать его. Например, вместо того чтобы добавлять в страницу элемент редактирования фиксированного размера, такой как TextBox, всегда видимый на экране, его можно обернуть диджитом InlineEditBox, который на экране отображается как обычный текст (подобно метке), но при выборе преобразуется в TextBox, готовый к редактированию. По завершении редактирования, например по нажатию клавиши Enter или по щелчку мыши за пределами диджита, он опять превращается в обычный текст.

В простейшем случае можно просто обернуть TextBox диджитом InlineEditBox, сделав его, например, частью шаблона письма, как показано в следующем примере. Обратите внимание, что та часть, которая должна была бы отображаться как TextBox и загромождала бы изображение, выглядит как обычная разметка, но после щелчка мышью преобразуется в элемент редактирования:
Dear <span dojoType="dijit.InlineEditBox" autoSave="false"
editor="dijit.form.TextBox">Valued Customer</span>:
<div>We have received your request to be removed from our spam list. Not to worry, we'll remove you when we’re good and ready. In the meanwhile, please do not hesitate to contact us with further complaints.</div>
<div>Sincerely,</div>
<span dojoType="dijit.InlineEditBox" autosave="false"
editor="dijit.form.TextBox">Customer Service</span>


В этом примере атрибут autosave устанавливается в значение false, благодаря чему в элементе управления появляются две кнопки Сохранить (Save)1 и Отменить (Cancel) (в противном случае текст сохранялся бы автоматически по мере набора и эти кнопки вообще не отображались бы). Это очень важно. Теперь попробуем расширить базовую концепцию и создадим другой шаблон для составления письма.

Ниже приводится короткий пример, где диджитом InlineEditBox обернут диджит Textarea. Обратите внимание, что атрибут renderAsHtml позволяет отображать и редактировать исходный текст разметки:
Dear <span dojoType="dijit.InlineEditBox" autoSave="false"
editor="dijit.form.TextBox">Valued Customer</span>:
<div dojoType="dijit.InlineEditBox" autoSave="false"
editor="dijit.form.Textarea" renderAsHtml="true">
Insert(br)
Form(br)
Letter(br)
Here(br)
</div>
<div>Sincerely,</div>
<span dojoType="dijit.InlineEditBox"
autoSave="false" editor="dijit.form.TextBox">Customer Service</span>


Как и для других диджитов, рассматривавшихся выше в этой главе, типичное использование InlineEditBox не вызывает сложностей.
Теги:
Виджеты приложения
Добавлено: 25 Июля 2018 07:29:46 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...