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

[Sherzod]

7 hours ago, x11 said:

uniGUI_menu.zip 33.55 kB · 1 download

Я постараюсь проанализировать...

[x11]

On 1/28/2021 at 10:05 AM, Sherzod said:

config.menu = [

Подскажите еще по radiogroup, пожалуйста.

Я примерно понимаю, как визуально составить меню из radiogroup https://fiddle.sencha.com/#fiddle/a5g&view/editor или https://metanit.com/web/extjs/7.9.php

Но где, в каком месте, правильно отправлять запрос ajaxRequest на сервер, т.е. как отправить идентификатор выбранной радио-кнопки?

Спасибо.

 

 

[Sherzod]

30 minutes ago, x11 said:

Подскажите еще по radiogroup, пожалуйста.

Добрый день,

Я смотрю, но, не получается у меня на данный момент.

[x11]

Не могу понять, почему всё включено?

И реакции на нажатие нет - в консоли ничего не появляется.

function beforeInit(sender, config){

  config.menu = [{
	xtype: 'radiogroup',
    columns: 1,
    vertical: true,
	style : 'margin-right:5px',
	
	items: [

		{ boxLabel: 'ціна', name: 'rb', inputValue: 'checkedPriceD'},
		
		{ boxLabel: 'загальна пл.', name: 'rb', inputValue: 'checkedAreaG'},
		
        { boxLabel: 'ID', name: 'rb', inputValue: 'checkedID'}
	],
	
	listeners: {
	  change: function(radiogroup, radio) {
		console.info(radiogroup.name);
		console.info(radio.inputValue);
	  }
	}
  }]
}	

 

 

[Sherzod]

1 minute ago, x11 said:

Не могу понять, почему всё включено?

То же самое и у меня.

Ext.field.RadioGroup не работает должным образом.

[x11]

On 1/28/2021 at 10:05 AM, Sherzod said:

function beforeInit(sender, config)

 

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

[x11]

4 minutes ago, Sherzod said:

То же самое и у меня.

Ext.field.RadioGroup не работает должным образом.

Может быть этот пример Вам поможет?

https://fiddle.sencha.com/#view/editor&fiddle/26no

[Sherzod]

1 hour ago, x11 said:

Подскажите еще...

Я проанализирую.

[Sherzod]

2 hours ago, x11 said:

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

Пока решил таким способом.

1. Кидаете на форму UniHiddenPanel, на него кидаете два контрола UnimRadio к примеру.

2. UnimFormReady:

procedure TMainmForm.UnimFormReady(Sender: TObject);
begin
  with UnimRadio1.JSInterface do
    JSAddListener('painted', 'function(){this.setChecked(true)}');

  with UnimButton1.JSInterface do
  begin
    JSConfig('arrowAlign', ['bottom']);
    JSCall('setMenu', [JSArray([UnimRadio1.JSControl, UnimRadio2.JSControl])]);
  end;
end;

 

[x11]

22 minutes ago, Sherzod said:

with UnimButton1.JSInterface do

а так привязать к TUnimToolButton?

Чтобы было выпадающее меню....

[Sherzod]

6 minutes ago, x11 said:

а так привязать к TUnimToolButton?

UnimToolButton1 -> Style -> tbsDropDown

procedure TMainmForm.UnimFormReady(Sender: TObject);
begin
  with UnimRadio1.JSInterface do
    JSAddListener('painted', 'function(){this.setChecked(true)}');

  with UnimToolButton1.JSInterface do //<--------------
  begin
    JSConfig('arrowAlign', ['bottom']);
    JSCall('setMenu', [JSArray([UnimRadio1.JSControl, UnimRadio2.JSControl])]);
  end;
end;

 

[Sherzod]

4 hours ago, x11 said:

а так привязать к TUnimToolButton?

Чтобы было выпадающее меню....

Более корректная логика:

procedure TMainmForm.UnimFormReady(Sender: TObject);
begin
  with UnimRadio1.JSInterface do
    JSAddListener('painted', 'function(){if (!this.getGroupValue()) {this.setChecked(true)}}'); //<-------------

  with UnimToolButton1.JSInterface do
  begin
    JSConfig('arrowAlign', ['bottom']);
    JSCall('setMenu', [JSArray([UnimRadio1.JSControl, UnimRadio2.JSControl])]);
  end;
end;

 

[x11]

14 hours ago, Sherzod said:

Более корректная логика:

В общем случае, боюсь, что не совсем корректная. Дело в том, что если повесить код на событие UnimRadio1Check(), то оно сработает при открытии формы, что не должно происходить, т.к. пользователь ведь не нажимает ничего при открытии формы.

Но в моем случае я убрал код "UnimRadio1.JSInterface.JSAddListener()", т.к. мне нужно, чтобы изначально все радио кнопки были отключены.

Спасибо за пример со скрытой панелью и за пример с кодом:

UnimToolButton1.JSInterface.JSCall('setMenu', [tbSort.JSInterface.JSArray([UnimRadio1.JSControl, UnimRadio2.JSControl])]);

 

[x11]

On 5/31/2021 at 7:50 PM, Sherzod said:

JSConfig('arrowAlign', ['bottom']);

Подскажите еще, пожалуйста.

Как управлять настройками (размерами) выпадающего меню?

Хочется сделать его шире (ширина компоненты TUnimRadio не влияет), например, ну или сделать так, чтобы надписи помещались... Как видите, места слева и справа достаточно. Хотя у радио-кнопок в LayoutConfig.Width я указал 100%.

Спасибо.

[Sherzod]

Я проанализирую. 

[x11]

Еще проблема. Выпадающий список автоматически не закрывается, когда пользователь щелкает по радио-кнопке.

Как выпавшее меню закрыть программно?

[Sherzod]

25 minutes ago, x11 said:

Выпадающий список автоматически не закрывается, когда пользователь щелкает по радио-кнопке.

Один из возможных решений.

procedure TMainmForm.UnimRadio1Check(Sender: TObject);
begin
  (Sender as TUnimRadio).JSInterface.JSCall('getParent().hide', []);
end;

 

[x11]

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

У радио кнопок указал FieldLabelWidth 80, а в CSS для радио кнопок добавил width: 100%.

Если это не совсем правильно, исправьте меня.

[x11]

17 hours ago, Sherzod said:

JSCall('setMenu',

Подскажите, а можно ли у TUnimToolButton заменить иконку на свою?

Получается некрасиво, если в IconCls вставить "fas fa-sort" или задействовать свойство ImageIndex, т.е. видна "двойная" иконка.

Спасибо.

[Sherzod]

7 minutes ago, x11 said:

Подскажите, а можно ли у TUnimToolButton заменить иконку на свою?

procedure TMainmForm.UnimFormReady(Sender: TObject);
begin
  with UnimToolButton1.JSInterface do
  begin
    //JSConfig('arrowAlign', ['bottom']);
    JSConfig('arrow', [False]);
    JSConfig('iconCls', ['fas fa-sort']);
    JSCall('setMenu', [JSArray([UnimRadio1.JSControl, UnimRadio2.JSControl])]);
  end;

end;

 

[x11]

On 6/1/2021 at 11:17 AM, Sherzod said:

Я проанализирую. 

Небольшая проблема в теме iOS - обрезаются радиокнопки. Подскажите, как это исправить.

Спасибо.

[Sherzod]

9 minutes ago, x11 said:

Небольшая проблема в теме iOS - обрезаются радиокнопки. Подскажите, как это исправить.

Добрый вечер,

Я не смог воспроизвести.

 

[x11]

On 6/1/2021 at 11:17 AM, Sherzod said:

Я проанализирую. 

прошло уже полгода....

так как же все-таки сделать меню шире?

[x11]

On 12/4/2021 at 4:23 PM, x11 said:

Небольшая проблема в теме iOS - обрезаются радиокнопки.

 

сделал в CSS 90%

 

.elSort {
	width: 90%;
	margin: 5px 2px !important;
}

 

[x11]

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

Например, чтобы потом можно было поменять цвет выпадающего меню и др. свойства.

Спасибо.