Видимость данных в колонке типа ActionColumn

[x11]

Спасибо разработчикам, за то, что подсказали как скрывать значки в ActionColumn с помощью CSS

Но проблема в том, что в ActionColumn теперь не отображаются данные.

Т.е. цель такого функционала - это:

1. По умолчанию скрывать все кнопки и показывать только при наведении (это реализовано).

2. Отображать не просто пустую колонку, а колонку с данными (как реализовать этот функционал).

 

спасибо

[Sherzod]

47 minutes ago, x11 said:

Отображать не просто пустую колонку

Здравствуйте,

Простите, а почему пустая строка? Вы имеете в виду пустую строку?

[x11]

Не строка, а колонка (столбец сетки).

Вот есть колонка ID. Я хотел бы отображать там ID объектов, а при наведении мышки показывать кнопки действий (редактировать, просмотреть, удалить и т.д.) вместо цифры. Но как только я включаю ActionColumn.Enabled (картинка 1), то данные уже в колонке отсутствуют (картинка 2).

 

И еще одна проблема всплыла. Если включено ActionColumn.Enabled, то автоматически отключается возможность изменять ширину колонку (стрелка на картинке 2).

[Sherzod]

24 minutes ago, x11 said:

Вот есть колонка ID. Я хотел бы отображать там ID объектов, а при наведении мышки показывать кнопки действий (редактировать, просмотреть, удалить и т.д.) вместо цифры. Но как только я включаю ActionColumn.Enabled (картинка 1), то данные уже в колонке отсутствуют (картинка 2).

Теперь ясно.

[x11]

 

On 4/2/2021 at 12:12 PM, Sherzod said:

Теперь ясно.

ну так получиться или нет?

[Sherzod]

10 minutes ago, x11 said:

ну так получиться или нет?

На данный момент у меня не получается.

[Sherzod]

On 4/3/2021 at 7:26 PM, x11 said:

ну так получиться или нет?

Вот такой вид получается на данный момент, с использованием UniPanel (кнопки), mouseover событие ячейки...

[x11]

а как такое сделать?

[Sherzod]

6 minutes ago, x11 said:

а как такое сделать?

Черновой код (JS):

MainForm.UniDBGrid1.getView().getEl().addListener('mouseover', function(event, target) {
    MainForm.UniPanel1.setWidth(Ext.get(target).getWidth());
    MainForm.UniPanel1.setHeight(Ext.get(target).getHeight());
    MainForm.UniPanel1.alignTo(Ext.get(target), 't-t', [0, 0])
}, null, {
    delegate: '.x-grid-cell-first .x-grid-cell-inner'
});

 

[x11]

мда, слишком сложно для меня

без полностью готового примера, я не справлюсь.

[Sherzod]

3 hours ago, x11 said:

мда, слишком сложно для меня

без полностью готового примера, я не справлюсь.

Надеюсь, что есть более простой способ, проанализируем...

[Sherzod]

8 hours ago, x11 said:

без полностью готового примера, я не справлюсь.

Кажется, получается:

[x11]

супер... ждем решения

[Sherzod]

24 minutes ago, x11 said:

ждем решения

Попробуйте следующие шаги:

1. CustomCSS (если несколько гридов, то можно добавить cls...)

.x-grid-cell-inner-action-col {
    line-height: inherit;
    font-size: inherit;
}

.x-grid-cell-inner-action-col:hover {
    line-height: 0;
    font-size: 0;
}

.x-action-col-icon {
    margin-right: 10px;
}

2. UniDBGrid1->ClientEvents->ExtEvents->

(также, можно модифицировать код, для всех actionColumns)

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts)
{
    var actionColIndx = 6;
    
    columns[actionColIndx].items.forEach(function(actioncol) {
        actioncol.getClass = function(value, metadata, record) {
            return "x-hidden"
        }
    });
}

3. UniDBGrid1->ClientEvents->ExtEvents->

(при использовании иконок, не проверял...) (тестировано на демо примере \FMSoft\Framework\uniGUI\Demos\Desktop\Grid - ActionColumn)

function afterrender(sender, eOpts) 
{
    var me = sender.getView().getEl();
    me.addListener('mouseout', function(event, target) {
        Ext.get(target).select('img').elements.forEach(function(img) {
            Ext.get(img).addCls('x-hidden')
        })
    }, null, {
        delegate: '.x-action-col-cell'
    });
    me.addListener('mouseover', function(event, target) {
        Ext.get(target).select('img').elements.forEach(function(img) {
            Ext.get(img).removeCls('x-hidden')
        })
    }, null, {
        delegate: '.x-action-col-cell'
    });
}

4. UniDBGrid1.Columns[ActionCol].FieldName = 'xx'

    UniDBGrid1.Columns[ActionCol].Alignment = ...

[x11]

22 minutes ago, Sherzod said:

var actionColIndx = 6;

 

но ведь в разных сетках положение колонки почти всегда разное

т.е. нужно отдельный код для каждой сетки?

[x11]

26 minutes ago, Sherzod said:

UniDBGrid1.Columns[ActionCol].Alignment = ...

подскажите, а это что обозначает?

[Sherzod]

3 minutes ago, x11 said:

но ведь в разных сетках положение колонки почти всегда разное

т.е. нужно отдельный код для каждой сетки?

Тогда, попробуйте такой код:

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts)
{
    //var actionColIndx = 6;
    
    //columns[actionColIndx].items.forEach(function(actioncol) {
    //    actioncol.getClass = function(value, metadata, record) {
    //        return "x-hidden"
    //    }
    //});
    
    columns.forEach(function(col){
       if (col.xtype && col.xtype == 'actioncolumn') {
           col.items.forEach(function(actioncol) {
               actioncol.getClass = function(value, metadata, record) {
                   return "x-hidden"
               }
           })
       }
    });
}

 

[Sherzod]

4 minutes ago, x11 said:

подскажите, а это что обозначает?

Выравнивание "значения" в сетке...

[x11]

Я понимаю, что выравнивание, а значение три точки вы указали - что это обозначает?

[Sherzod]

Выравнивание значения, выравнивание images. 

[x11]

Ну, так и что там указать?

Я так понял, что вы специально обратили внимание на это свойство, что там что-то надо указать. Но что именно? Там возможны только три значения. Пустое значение недопустимо ведь.

[x11]

Еще 2 вопроса. Как разрешить менять ширину ActionColumn? Зачем вообще запрещать менять ширину этой колонки?

И второй. Как добавить меню в заголовке такое же, как и остальных обычных колонок?

 

спасибо

[x11]

1 hour ago, Sherzod said:

Ext.get(target).select('img').elements.forEach(function(img)

 

Подскажите, а если используются иконки fontawesome font? Должно работать или не будет?

[Sherzod]

1 hour ago, Sherzod said:

(при использовании иконок, не проверял...) (тестировано на демо примере \FMSoft\Framework\uniGUI\Demos\Desktop\Grid - ActionColumn)

 

3 minutes ago, x11 said:

Подскажите, а если используются иконки fontawesome font? Должно работать или не будет?

Не тестировал.

[x11]

1 hour ago, Sherzod said:

var me = sender.getView().getEl();

 

приложение не запускается

 

function afterrender(sender, eOpts)
{
	//фильтры
	let fp = sender.addPlugin('gridfilters');
    fp.setConfig({menuFilterText: 'Фільтр'});


    var me = sender;	
    if (me.editingPlugin.isRowEditor) {
		
		me.editingPlugin.saveBtnText   = 'Підтвердити';
		me.editingPlugin.cancelBtnText = 'Відмінити';
		
        me.editingPlugin.editorCfg.cls = "_roweditor";
        me.addCls('_roweditor');
        
        me.editingPlugin.editorCfg.listeners = {
            show: function() {
                if (me.activeTD) {
                    me.getEl().select('.x-grid-row-editor-buttons').setX(Ext.get(me.activeTD).getX());
                }
            }
        };
    }

	var me = sender.getView().getEl();
    me.addListener('mouseout', function(event, target) {
        Ext.get(target).select('img').elements.forEach(function(img) {
            Ext.get(img).addCls('x-hidden')
        })
    }, null, {
        delegate: '.x-action-col-cell'
    });
    me.addListener('mouseover', function(event, target) {
        Ext.get(target).select('img').elements.forEach(function(img) {
            Ext.get(img).removeCls('x-hidden')
        })
    }, null, {
        delegate: '.x-action-col-cell'
    });

}

 

Quote

Cannot read property 'getView' of undefined