UniDBGrid добавить свою кнопку для выпадающего меню

AlexanderP · April 9

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

Хочется в таблицу в верхний левый угол добавить свою кнопку с привязкой в PopupMenu

сделать что то типа такого

image.png.7e7e9f97cd3bafed52e66f78417763b3.png

я долго искал как это сделать и нашел один пост, но там как я понял происходит преобразование кнопки очистки фильтра

а этого не хочется, т.к. эта кнопка тоже нужна

можно как то новую копку добавить, к примеру выше кнопки очистить ?

image.png.d5b681349374fc6bc3b02df19172aca4.png

AlexanderP · April 11

Добрый день!

Sherzod, а по этой теме посмотрите ?

Sherzod · April 11

Попробую проанализировать.

Sherzod · April 11

On 4/9/2025 at 9:09 PM, AlexanderP said:

можно как то новую копку добавить, к примеру выше кнопки очистить ?

image.png.cd14ea239678458df431bc473139f4f9.png

AlexanderP · April 11

18 minutes ago, Sherzod said:

Sherzod код не вложили

Sherzod · April 11

42 minutes ago, AlexanderP said:

код не вложили

Я знаю, мне нужно подготовить код.

Sherzod · April 12

15 hours ago, AlexanderP said:

код не вложили

Доброе утро!

Одно из возможных решений, попробуйте так:

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

2. UniDBGrid.ClientEvents.UniEvents ->

function beforeInit(sender, config) 
{
    sender.attachMenuToRowNumberer = function(component) {
        var grid = this;

        var rowNumbererCol = grid.columnManager.getColumns().find(function(col) {
            return col.xtype === 'rownumberer';
        });

        if (rowNumbererCol) {
            component.setWidth('100%');
            rowNumbererCol.insert(0, component);

            component.setStyle({
                marginBottom: '2px'
            });

            if (rowNumbererCol.titleEl) {
                rowNumbererCol.titleEl.setHeight(0);
            }
        }
    };
}

3. В MainForm.OnReady вызываете метод:

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  if dgRowNumbers in UniDBGrid1.Options then
  begin
    JSInterface.JSCall('attachMenuToRowNumberer', [UniMenuButton1.JSControl], UniDBGrid1.JSControl);
  end;
end;

4. Далее работаете с меню как обычно — обработка команд идёт на серверной стороне.

Sherzod · April 12

* Хотя Вы также можете размещать кнопку меню ниже иконки очистки фильтров.
Для этого потребуется немного изменить код: анализировать не индекс 0, а 1, и, соответственно, устанавливать отступ сверху, а не снизу (marginTop вместо marginBottom).

AlexanderP · April 12

3 hours ago, Sherzod said:

* Хотя Вы также можете размещать кнопку меню ниже иконки очистки фильтров.
Для этого потребуется немного изменить код: анализировать не индекс 0, а 1, и, соответственно, устанавливать отступ сверху, а не снизу (marginTop вместо marginBottom).

Sherzod Спасибо!!

я гляну чуть позже и отпишусь

Sherzod · April 12

Без проблем.

AlexanderP · April 12

6 hours ago, Sherzod said:

Доброе утро!

Одно из возможных решений, попробуйте так:

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

2. UniDBGrid.ClientEvents.UniEvents ->

function beforeInit(sender, config) 
{
    sender.attachMenuToRowNumberer = function(component) {
        var grid = this;

        var rowNumbererCol = grid.columnManager.getColumns().find(function(col) {
            return col.xtype === 'rownumberer';
        });

        if (rowNumbererCol) {
            component.setWidth('100%');
            rowNumbererCol.insert(0, component);

            component.setStyle({
                marginBottom: '2px'
            });

            if (rowNumbererCol.titleEl) {
                rowNumbererCol.titleEl.setHeight(0);
            }
        }
    };
}

3. В MainForm.OnReady вызываете метод:

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  if dgRowNumbers in UniDBGrid1.Options then
  begin
    JSInterface.JSCall('attachMenuToRowNumberer', [UniMenuButton1.JSControl], UniDBGrid1.JSControl);
  end;
end;

4. Далее работаете с меню как обычно — обработка команд идёт на серверной стороне.

Sherzod, проверил все работает, но заметил такой момент, кнопка при загрузке чуть ниже верхнего края, мешает стиль padding у titleEl

при нажатии на кнопку очистить фильтр, все ставится на место, как и должно быть

я посмотрел и пытался сам по умолчанию скинуть стиль rowNumbererCol.titleEl.setStyle({padding: 'unset'}) , но не хочет применяться

можешь глянуть ?

AlexanderP · April 14

Добрый день!

Sherzod, посмотрите по ему последнему вопросу ?

Еще столкнулся с тем, что если в Options отключить dgFilterClearButton (в некоторых таблицах кнопка "Очистить" не нужна), то кнопка не создается

увидел в что не создается контейнер x-autocontainer-outerCt, при отсутствии кнопки очистить.

можно что то сделать, чтобы кнопка UniMenuButton создавалась при отключенном в Options dgFilterClearButton ?

AlexanderP · April 15

On 4/12/2025 at 1:13 PM, AlexanderP said:

Sherzod, проверил все работает, но заметил такой момент, кнопка при загрузке чуть ниже верхнего края, мешает стиль padding у titleEl

при нажатии на кнопку очистить фильтр, все ставится на место, как и должно быть

я посмотрел и пытался сам по умолчанию скинуть стиль rowNumbererCol.titleEl.setStyle({padding: 'unset'}) , но не хочет применяться

можешь глянуть ?

Sherzod с этим моментом вроде как сам разобрался, унес изменение стиля сюда, не знаю насколько это правильно, где то на форуме подсмотрел что можно стиль менять в afterlayout

но возникла еще проблемка, когда пытаюсь перенести поле кнопка исчезает, глянул по логам в этот момент возникает событие reconfigure

тоже само возникает если поле выключить или включить таким образом UniDBGrid1->Columns->Items[3]->Visible = false/true

AlexanderP · April 17

Добрый день!

Sherzod, посмотрите мои последние вопросы ?

Sherzod · April 17

14 minutes ago, AlexanderP said:

посмотрите мои последние вопросы ?

Добрый день!

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

AlexanderP · April 28

On 4/17/2025 at 2:20 PM, Sherzod said:

Добрый день!

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

Добрый день!

Sherzod, смотрели, получилось что то ?

Sherzod · April 29

Добрый день!

21 hours ago, AlexanderP said:

смотрели, получилось что то ?

Отменяем все предыдущие решения, обсуждавшиеся выше.
Мы больше не будем использовать UniMenuButton.
Вместо этого мы будем отправлять запросы на UniDBGrid, которые нужно будет обрабатывать в событии OnAjaxEvent.

Решение:

OnFormCreate ->

UniDBGrid1.JSInterface.JSAddListener(
  'columnschanged',
  'function(ct, eOpts) {' +
    'var rowCol = ct.down("rownumberer");' +

    'if (rowCol) {' +
      'if (rowCol.titleEl && rowCol.titleEl.setHeight) rowCol.titleEl.setHeight(0);' +

      'if (!rowCol.items) {' +
        'rowCol.items = new Ext.util.MixedCollection();' +
        'rowCol.add(Ext.create("Ext.Component", { html: "&nbsp;" }));' +
      '}' +

      'var existingBtn = rowCol.items.findBy(function(cmp) { return cmp.itemId === "RowNumbererMenuButton"; });' +

      'if (!existingBtn) {' +
        'var newBtn = Ext.create("Ext.button.Button", {' +
          'text: "",' +
          'iconCls: "x-fa fa-bars",' + // иконка для кнопки
          'tooltip: "Действия",' +
          'itemId: "RowNumbererMenuButton",' +
          'menu: Ext.create("Ext.menu.Menu", {' +
              'items: [' +
                  '{ text: "Обновить", iconCls: "x-fa fa-sync", handler: function() { ajaxRequest('#1', "RefreshClicked", []); } },' +
                  '{ text: "Удалить", iconCls: "x-fa fa-trash", handler: function() { ajaxRequest('#1', "DeleteClicked", []); } }' +
              ']' +
          '})' +
        '});' +

        'rowCol.insert(0, newBtn);' +
        'newBtn.setWidth("100%");' +
        'newBtn.setStyle({ marginBottom: "2px" });' +
      '}' +
    '}' +
  '}'
);

AlexanderP · April 29

11 minutes ago, Sherzod said:

Добрый день!

Отменяем все предыдущие решения, обсуждавшиеся выше.
Мы больше не будем использовать UniMenuButton.
Вместо этого мы будем отправлять запросы на UniDBGrid, которые нужно будет обрабатывать в событии OnAjaxEvent.

Решение:

OnFormCreate ->

UniDBGrid1.JSInterface.JSAddListener(
  'columnschanged',
  'function(ct, eOpts) {' +
    'var rowCol = ct.down("rownumberer");' +

    'if (rowCol) {' +
      'if (rowCol.titleEl && rowCol.titleEl.setHeight) rowCol.titleEl.setHeight(0);' +

      'if (!rowCol.items) {' +
        'rowCol.items = new Ext.util.MixedCollection();' +
        'rowCol.add(Ext.create("Ext.Component", { html: "&nbsp;" }));' +
      '}' +

      'var existingBtn = rowCol.items.findBy(function(cmp) { return cmp.itemId === "RowNumbererMenuButton"; });' +

      'if (!existingBtn) {' +
        'var newBtn = Ext.create("Ext.button.Button", {' +
          'text: "",' +
          'iconCls: "x-fa fa-bars",' + // иконка для кнопки
          'tooltip: "Действия",' +
          'itemId: "RowNumbererMenuButton",' +
          'menu: Ext.create("Ext.menu.Menu", {' +
              'items: [' +
                  '{ text: "Обновить", iconCls: "x-fa fa-sync", handler: function() { ajaxRequest('#1', "RefreshClicked", []); } },' +
                  '{ text: "Удалить", iconCls: "x-fa fa-trash", handler: function() { ajaxRequest('#1', "DeleteClicked", []); } }' +
              ']' +
          '})' +
        '});' +

        'rowCol.insert(0, newBtn);' +
        'newBtn.setWidth("100%");' +
        'newBtn.setStyle({ marginBottom: "2px" });' +
      '}' +
    '}' +
  '}'
);

Добрый день!

Круто получилось !!

Sherzod, Спасибо!

image.png.62c7291e77c449aa032da58f17084017.png

AlexanderP · April 30

23 hours ago, Sherzod said:

Добрый день!

Отменяем все предыдущие решения, обсуждавшиеся выше.
Мы больше не будем использовать UniMenuButton.
Вместо этого мы будем отправлять запросы на UniDBGrid, которые нужно будет обрабатывать в событии OnAjaxEvent.

Решение:

OnFormCreate ->

UniDBGrid1.JSInterface.JSAddListener(
  'columnschanged',
  'function(ct, eOpts) {' +
    'var rowCol = ct.down("rownumberer");' +

    'if (rowCol) {' +
      'if (rowCol.titleEl && rowCol.titleEl.setHeight) rowCol.titleEl.setHeight(0);' +

      'if (!rowCol.items) {' +
        'rowCol.items = new Ext.util.MixedCollection();' +
        'rowCol.add(Ext.create("Ext.Component", { html: "&nbsp;" }));' +
      '}' +

      'var existingBtn = rowCol.items.findBy(function(cmp) { return cmp.itemId === "RowNumbererMenuButton"; });' +

      'if (!existingBtn) {' +
        'var newBtn = Ext.create("Ext.button.Button", {' +
          'text: "",' +
          'iconCls: "x-fa fa-bars",' + // иконка для кнопки
          'tooltip: "Действия",' +
          'itemId: "RowNumbererMenuButton",' +
          'menu: Ext.create("Ext.menu.Menu", {' +
              'items: [' +
                  '{ text: "Обновить", iconCls: "x-fa fa-sync", handler: function() { ajaxRequest('#1', "RefreshClicked", []); } },' +
                  '{ text: "Удалить", iconCls: "x-fa fa-trash", handler: function() { ajaxRequest('#1', "DeleteClicked", []); } }' +
              ']' +
          '})' +
        '});' +

        'rowCol.insert(0, newBtn);' +
        'newBtn.setWidth("100%");' +
        'newBtn.setStyle({ marginBottom: "2px" });' +
      '}' +
    '}' +
  '}'
);

Добрый день!

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

if (rowCol.titleEl && rowCol.titleEl.setHeight) rowCol.titleEl.setHeight(0);

   'if (!rowCol.items) {' +
        'rowCol.items = new Ext.util.MixedCollection();' +
        'rowCol.add(Ext.create("Ext.Component", { html: " " }));' +
      '}'

Sign In

UniDBGrid добавить свою кнопку для выпадающего меню

Recommended Posts

AlexanderP

AlexanderP

Sherzod

Sherzod

AlexanderP

Sherzod

Sherzod

Sherzod

AlexanderP

Sherzod

AlexanderP

AlexanderP

AlexanderP

AlexanderP

Sherzod

AlexanderP

Sherzod

AlexanderP

AlexanderP

Join the conversation

Browse

Activity