Добавление кастомных элементов в мобильном приложении

Вот здесь, например есть инструкция по созданию своего контрола: http://www.community.terrasoft.ru/forum/topic/25285#comment-67717

Можно ли такое же сделать для мобильного приложения?

В конфиге вью определяем нужный контрол + метод для его отображения, а в контроллере завязываем на него обработчик:

Ext.define("...вью...", {
config: {
refreshButton: {
id: 'usr_order_refresh_btn',
cls: "x-button-primary-blue",
text: 'Обновить'
}
},
showRefreshButton: function (isShow) {
var navigationPanel = this.getNavigationPanel(); /*компонент в котором нужно отобразить контрол*/
var refreshButton = this.getRefreshButton();
if (isShow) {
this._refreshButton = navigationPanel.addButton(refreshButton);
} else {
navigationPanel.removeButton(refreshButton);
}
return this._refreshButton;
}
});
Ext.define("...контроллер...", {
initializeView: function (view) {
this.callParent(arguments);
var btn = view.showRefreshButton(true);
btn.on("tap", this.onRefreshButtonTap, this);
},
onRefreshButtonTap: function() {
/* сабж */
}
});

Ещё раз большое спасибо!

Два вопроса ещё есть:

1. Где-нибудь можно найти список компонентов? Вот, например, есть MobileOpportunityEditPage, можно ли кнопку добавить не на навигационную панель, а допустим прямо между колонками - как на картинке (не обязательно именно так, дизайн может быть любым.. вопрос в возможности)?

2. А если речь идёт именно о своём элементе? Допустим, просто вывести блок html.

Могу сказать, в принципе, чтобы было понятно: началось всё с идеи добавить туда canvas, для того, чтобы клиент мог подписать договор "на экране планшета". В браузерной версии всё по кр.мере понятно - там делается контрол по инструкции из комментария выше, и в нужное место на странице добавляется блок с канвасом. Далее делаются обработчики для него, и всё такое. А вот можно ли повторить это в приложении...

В таком случае можно свой контрол определить также, как и в инструкции для веб, и сделать так:

Ext.define("...контроллер...", {
onLoadRecord: function(loadedRecord, callback) {
this.callParent([loadedRecord, function() {
var panelItems = this.getView().getPanel().getItems();
/* собственно здесь хранятся панели и детали страницы*/
var primaryColumnSet = panelItems.first(),
control = this.getOurCustomControl(loadedRecord);
primaryColumnSet.add(control); //если добавляем в конце панели
primaryColumnSet.insert(index, control); //в определенное место
}
},
getOurCustomControl: function(record) {

}
}

А можно на примере - что может быть указано в getOurCustomControl во втором случае, если не трудно?
До конца не могу понять, как в этом случае правильно указывать.

Например, если я заменяю в showRefreshButton функцию this.getNavigationPanel() на this.getPanel().getItems().first() и далее addButton на add - то блок появляется на странице, но не виден из-за отсутствия текста в нём (а при addButton ошибка).

А например, this.getItems().first() - работает как getNavigationPanel.

[javascript]
onLoadRecord: function(loadedRecord, callback) {
this.callParent([loadedRecord, function() {
var panelItems = this.getView().getPanel().getItems();
/* собственно здесь хранятся панели и детали страницы*/
var primaryColumnSet = panelItems.first(),
control = this.getOurCustomControl(loadedRecord);
primaryColumnSet.add(control); //если добавляем в конце панели
}]);
},
getOurCustomControl: function(record) {
return '';
},
[/javascript]

В таком случае вываливается ошибка.

sencha-touch-all-debug.js:86794 Uncaught Error: [ERROR][Ext.Container#factoryItem] Invalid config, must be a valid config object

допустим так:

onLoadRecord: function(loadedRecord, callback) {
this.callParent([loadedRecord, function() {
var panelItems = this.getView().getPanel().getItems();
/* собственно здесь хранятся панели и детали страницы*/
var primaryColumnSet = panelItems.first(),
control = this.getOurCustomControl(loadedRecord);
control .on("tap", function () {
Terrasoft.MessageBox.showMessage("hello world");
}, this);
primaryColumnSet.add(control); //если добавляем в конце панели
}]);
},
getOurCustomControl: function(record) {
return Ext.create('Ext.Button', {
xtype: "button",
cls: "x-button x-button-link",
text: "?"
});
}
}

Огромное спасибо! Теперь понял))

И всё-таки в качестве завершающего аккорда - можно ли вывести туда свой html код? Можно конечно сгенерить пустой блок и поставить туда через innerHTML, допустим такой код:

[javascript]
Мой блок
[/javascript]

или тот же канвас, с которого всё начиналось:

[javascript]

[/javascript]

Но насколько правильно так поступать в данном случае? И будет ли это работать на всех видах устройств?

return Ext.create("Ext.Toolbar", {
id: 'myCanvas-toolbar',
html: "",
height: '60px'
})

Спасибо!!

Работает, больше вопросов наверно не имею)