Этот пост — небольшое и скромное руководство из категории «На заметку домохозяйке».
Когда я только начинал знакомиться с ExtJS, меня несколько удивило, что столь крупный фреймворк веб-разработки не содержит никаких средств использования гиперссылок в пользовательском интерфейсе (по крайней мере, наравне с кнопками, панелями и другими более сложными элементы управления, которые могут быть реализованы где угодно).
что бы ни).
Как это часто бывает, структура, которая обеспечивает простой путь для сложных задач, создает сложности там, где вы их не ожидаете.
Конечно, используя Ext.Element (кросс-браузерную обертку вокруг dom-элементов), вы можете внедрить любой HTML-фрагмент во время выполнения, но гибкость и простота, с которой можно вставлять другие элементы управления, например, в панель инструментов, панель или другой контейнер , будет очень сложно добиться сложного.
И вот недавно, работая над прототипом приложения, я «случайно» написал такой компонент. Это очень просто, но, мне кажется, многим это могло бы облегчить жизнь.
Ниже приведен его код и краткий анализ.
Эта гиперссылка добавляется в контейнер так же, как и любой другой стандартный компонент; взаимодействие с окружающей средой происходит в обычном событийно-ориентированном стиле.Custom.Hyperlink = Ext.extend(Ext.BoxComponent, { constructor: function (config) { config = config || {}; Ext.apply(this, config); Custom.Hyperlink.superclass.constructor.call(this, config); this.on('afterrender', this.createHref, this); this.addEvents('clicked'); }, hrefTpl: '<a href="#" onclick="Ext.getCmp(\'{0}\').notifyClicked(); return false;">{1}</a>', createHref: function () { var tpl = new Ext.Template(this.hrefTpl), html = tpl.apply([this.getId(), this.text]); this.el.update(html); }, notifyClicked: function () { this.fireEvent('clicked', this); } } ); Ext.reg('hyperlink', Custom.Hyperlink);
Ссылка не привязана к предопределенному идентификатору dom, но синтаксически гарантируется, что метод, вызываемый при нажатии ссылки, будет вызываться от имени правильного компонента (как вы знаете, метод вызывается как A.method()).
гарантируется, что this внутри метода будет указывать на A) Ниже приведен пример использования такого компонента.
Custom.SearchPanel = Ext.extend(Ext.Panel, {
initComponent: function () {
Ext.apply(this, {
… //skipped
tbar: [{
xtype: 'hyperlink',
text: 'Show advanced',
listeners: {
scope: this,
clicked: this.showAdvancedForm
}
}
]
}
);
Custom.SearchPanel.superclass.initComponent.call(this);
},
showAdvancedForm: function () {
Ext.Msg.alert('Clicked!');
}
}
);
В идеале гиперссылка должна иметь возможность разрешать/отключать экранирование небезопасных символов HTML при настройке свойства text. Это делается тривиально с помощью стандартной функции Ext.util.Format.htmlEncode().
Я предлагаю это усовершенствование читателю в качестве небольшого упражнения.
Теги: #howto #extjs #Чулан #гиперссылка
-
Станет Ли 3D Новейшим Игровым Увлечением?
19 Oct, 24 -
Пришло Время Создавать Совместимые Веб-Сайты
19 Oct, 24 -
Пусть Расцветает Сотня Многоразовых Ракет
19 Oct, 24 -
Анонимные Сети И Временные Атаки: Tor
19 Oct, 24 -
Devfest Калининград-2015: Фотоотчет
19 Oct, 24 -
Amazon.com Открывает Свою Платежную Систему
19 Oct, 24
