Выпадающее мобильное меню для unimToolbar

[x11]

Подскажите, пожалуйста, как с помощью чего можно реализовать выпадающее меню?

И привязать его к кнопке или к контейнеру на TunimToolbar.

Может быть вместо меню можно использовать какую-нибудь другую компоненту?

Спасибо.

[x11]

up

[Sherzod]

On 1/25/2021 at 2:34 PM, x11 said:

Подскажите, пожалуйста, как с помощью чего можно реализовать выпадающее меню?

И привязать его к кнопке или к контейнеру на TunimToolbar.

Может быть вместо меню можно использовать какую-нибудь другую компоненту?

UnimButton -> ClientEvents -> UniEvents ->

function beforeInit(sender, config)
{
    config.arrowAlign = 'bottom';
    config.menu = [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' },
        { text: 'Item 4' }
    ];
}

 

[x11]

А дальше?

А как их обработать, как узнать, что нажал пользователь?

[Sherzod]

    config.menu = [
        { text: 'Item 1', iconCls: 'x-fa fa-home', handler: function() {alert('click')} },
        { text: 'Item 2' },
        { text: 'Item 3' },
        { text: 'Item 4' }
    ]

 

[x11]

1 hour ago, Sherzod said:

iconCls: 'x-fa fa-home',

еще хотел бы уточнить по поводу иконок: как правильно формировать (составлять) название?

вот пример https://fontawesome.com/icons/eraser?style=solid

так правильно 'fas fa-eraser'?

Или так 'x-fa fa-eraser'?

Или еще как-то по-другому?

Откуда взялось это "x-fa"?

 

[x11]

А еще вопрос. А можно у какого-нибудь пункта меню задействовать checkbox, если такое возможно?

И как работать с меню типа checked?

Спасибо.

[Sherzod]

23 minutes ago, x11 said:

А еще вопрос. А можно у какого-нибудь пункта меню задействовать checkbox, если такое возможно?

И как работать с меню типа checked?

function beforeInit(sender, config)
{
    config.arrowAlign = 'bottom';
    config.menu = [
        { text: 'Item 1', xtype: 'menucheckitem', iconCls: 'x-fa fa-home', checkHandler: function() {alert(this.getChecked())} },  //hideOnClick: false/true
        { text: 'Item 2' },
        { text: 'Item 3' },
        { text: 'Item 4' }
    ]
}

 

[x11]

Спасибо огромное!!!

 

Вот еще, если нужно добавить разделитель, то "xtype: menuseparator"

 

https://docs.sencha.com/extjs/6.5.0/modern/Ext.menu.Separator.html

 

 

[x11]

8 hours ago, Sherzod said:

xtype: 'menucheckitem'

 

Вы случайно не знаете, почему отображается непонятное состояние? Т.е. среднее: не включено и не отключено.

Вторая картинка - это другие возможные состояния рисует это меню.

 

[Sherzod]

12 hours ago, x11 said:

Вы случайно не знаете, почему отображается непонятное состояние?

Это и есть отключенное состояние.

[x11]

Просто одно и то же состояние отображается по разному: серый или белый квадратик, что вводит в заблуждение.

[Sherzod]

7 minutes ago, x11 said:

Просто одно и то же состояние отображается по разному: серый или белый квадратик, что вводит в заблуждение.

Это при наведении курсора мыши?

[x11]

нет, при раскрытии - серое, а потом, когда начинаешь нажимать на меню уже не серое, а белое.

но на смартфоне я еще не тестировал, проблема проявляется в десктопном Хроме

[x11]

Проверил на смартфоне (Chrome и Firefox): первое открытие - серый квадратик, а когда нажимаешь, то уже потом он белым становится.

[Sherzod]

Потому что там фон меняется, нет? 

[x11]

в каком смысле "меняется фон"? где меняется?

[x11]

вот я видео записал (10 сек)

https://files.dp.ua/ru/fMxv

[Sherzod]

25 minutes ago, x11 said:

в каком смысле "меняется фон"? где меняется?

При нажатии... 

[x11]

Ну да, как бы в этом и проблема, т.е. при открытии чекбокс серый изначально, а по идее должен быть вот такой.

 

 

[x11]

Наверное, до меня дошло.

Белый становится он потому, что весь пункт меню выделяется голубым цветом.

Т.е. невыбранный пункт меню - серый. А выбранный - белый.

[x11]

А можно ли это меню привязать к XTamplate?

Если да, то подскажите, пожалуйста, как?

с помощью этих двух процедур у меня отображается таблица TUnimDBListGrid + XTamplate:

function beforeInit(sender, config){
	config.loadMask = false;
	config.loadingText = 'загрузка...';
	config.emptyText = 'даних немає'; 
	config.grouped = false;
  	var descr = '<table class="tblResDescr">' +
                    '<tr>' +
						'<td class="tdDbgRowID">ID {[this.getVal(values, "ID")]}</td>' +
							'<td class="tdBtnPopup"><button class="btnPopup" data-id="{[this.getVal(values, "ID")]}" type-id="{[this.getVal(values, "ID")]}"><i class="fas fa-angle-down"></i></td>' +
						'</tr>' +                     
                    '<tr>' +
                        '<td colspan="2">Ціна {[this.getVal(values, "PRICE")]}</td>' +
                    '</tr>' +                   
                    ...
    				...
    				...
                    '</tr>'+
                '</table>';
	config.itemTpl = new Ext.XTemplate('<table class="tblRes">' +
                     '<tr>' +
						...
                        ...

 

function afterCreate(sender) {
   Ext.getCmp(sender.id).bodyElement.addListener('click', function(event, target) {
        if (target.getAttribute('class').includes('btnPopup')) {
            ajaxRequest(sender, "eventPopup", ['objId=' + target.getAttribute('data-id'),
						'typeId=' + target.getAttribute('type-id')]);
        }
    }, null, {
        delegate: 'table button'
    });
}

спасибо

Т.е. нужно знать для какого data-id всплывает меню

[x11]

up

[Sherzod]

On 2/1/2021 at 10:14 PM, x11 said:

А можно ли это меню привязать к XTamplate?

Если да, то подскажите, пожалуйста, как?

с помощью этих двух процедур у меня отображается таблица TUnimDBListGrid + XTamplate:

Надо проанализировать. Если есть тестовый случай, прикрепите пожалуйста.

[x11]

23 hours ago, Sherzod said:

Если есть тестовый случай, прикрепите пожалуйста.

вот, на какую-нибудь кнопку повесить бы выпадающее меню

в папке "\Win32\Debug\files" находятся дополнительные файлы для меню и для XTamplate.

uniGUI_menu.zip