Вопрос
Мобильное приложение
7.x

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

Смородинов Денис
2 июня 2017 00:13

Всем доброго времени суток.

Версия 7.10.

Возможно ли в мобильном приложении добавлять кастомные элементы, как в браузерной версии системы?

К примеру, кнопку, на которую добавлен вызов функции? Или создать свой контрол, генерирующий свой html-код?

Если да, то можно ли посмотреть примеры (хотя бы пример с кнопкой)?

Нравится

10 комментариев
Смородинов Денис
2 июня 2017 14:49

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

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

Батуев А.И.
2 июня 2017 15:41

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

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() {
        /* сабж  */
    }
});
Смородинов Денис
2 июня 2017 23:23

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

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

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

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

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

Батуев А.И.
5 июня 2017 11:02

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

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) {
 
	}
}
Смородинов Денис
5 июня 2017 14:34

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

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

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

Смородинов Денис
5 июня 2017 16:19
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 '<div id="testDiv"></div>';
    },

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

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

Батуев А.И.
5 июня 2017 19:06

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

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: "?"
                    });
    }
}
Смородинов Денис
5 июня 2017 23:01

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

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

<div id="myDiv" style="width: 100%; height: 150px; background-color: #eee">Мой блок</div>

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

<canvas id="myCanvas" width='350' height='150' style="background-color: #eee; border: 1px solid #ccc;"></canvas>

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

Батуев А.И.
6 июня 2017 11:19
return Ext.create("Ext.Toolbar", {
            id: 'myCanvas-toolbar',
            html: "<canvas id="myCanvas" width='350' height='150' style="background-color: #eee; border: 1px solid #ccc;"></canvas>",
            height: '60px'
        })
Смородинов Денис
6 июня 2017 12:54

Спасибо!!

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

Показать все комментарии