touch Добавить кнопку в unimMemo

[x11]

Нужна идея реализации, как повесить кнопку над компонентой TunimMemo, там, где красный квадратик. Можно, конечно, вышке или ниже, но хочется  сэкономить драгоценное место, т.к. на форме довольно много разных элементов, форма сложная, а экраны на смартфонах маленькие.

Текст может быть большой, поэтому редактирование и/или просмотр полного текста нужно открывать в отдельной форме.

Спасибо.

[Sherzod]

Я также проанализирую. 

[x11]

хотел сделать финт ушами с помощью z-index и position - но всё равно кнопка прячется под memo

[Sherzod]

1 hour ago, x11 said:

Нужна идея реализации, как повесить кнопку над компонентой TunimMemo, там, где красный квадратик.

UnimMemo1.ClientEvents.ExtEvents ->

function painted(sender, eOpts)
{
    var me=sender;
    me.bottomEditEl = Ext.dom.Helper.insertBefore(me.inputElement, {
        tag: 'span', 
        class: 'x-fa fa-edit', 
        style: 'position: absolute; font-size: 1.4em; padding: 5px; bottom: 0; right: 0;'
    }); 
    
    me.bottomEditEl.addEventListener('click', function(){
        ajaxRequest(me, 'bedtclick', []);
    });
}

 

[x11]

Спасибо, то что надо.

 

Маленький шрих.

Если получится, будет вообще класс.

Обратите внимание ,что кнопка у memo более яркая, отличается от остальных, а они более тусклые.

Можно ли и кнопку у memo сделать такой же тусклой, чтобы она не выделялась?

 

[Sherzod]

Скорее всего color надо указать в style. 

[Sherzod]

style: 'position: absolute; font-size: 1.4em; padding: 5px; bottom: 0; right: 0; color: gray;' // или darkgray

 

[x11]

А как вместо "gray" указать цвет кнопок из темы?

Т.е. можно ли там указать имя переменной, которая связана с цветом выбранной темы?

[Sherzod]

5 hours ago, x11 said:

А как вместо "gray" указать цвет кнопок из темы?

Нужно проанализировать.

[Sherzod]

5 hours ago, x11 said:

А как вместо "gray" указать цвет кнопок из темы?

Есть одно решение, попробуйте.

Но на форме, должна быть одна компонента с "иконкой"...

function painted(sender, eOpts)
{
    var me=sender;
    me.bottomEditEl = Ext.dom.Helper.insertBefore(me.inputElement, {
        tag: 'span', 
        class: 'x-fa fa-edit', 
        style: 'position: absolute; font-size: 1.4em; padding: 5px; bottom: 0; right: 0;'
    }); 
    
    me.bottomEditEl.addEventListener('click', function(){
        ajaxRequest(me, 'bedtclick', []);
    });
    
    Ext.onReady(function() {
        if (sender.bottomEditEl && Ext.select('.x-trigger .x-icon-el').elements[0]) {
            sender.bottomEditEl.style.color = Ext.get(Ext.select('.x-trigger .x-icon-el').elements[0].id).getStyle('color');
        }
    });
}

 

[x11]

11 hours ago, Sherzod said:

Но на форме, должна быть одна компонента с "иконкой"...

Этого не понял, какая именно компонента?

Должна ли быть эта компоненты видимой или её можно сделать невидимой?

[Sherzod]

17 hours ago, x11 said:

"Синие" иконки...

[x11]

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

[Sherzod]

2 minutes ago, x11 said:

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

Нет.

[Sherzod]

Но, будет взято значение класса:

.x-trigger .x-icon-el

[x11]

не получилось

[Sherzod]

48 minutes ago, x11 said:

не получилось

OK. Проанализирую.

[Sherzod]

55 minutes ago, x11 said:

не получилось

Нашел решение, использование триггера.

[Sherzod]

function painted(sender, eOpts)
{
    var me=sender;
    me.bottomEditEl = Ext.dom.Helper.insertBefore(me.inputElement, {
        tag: 'span', 
        class: 'x-fa fa-edit', 
        style: 'position: absolute; font-size: 1.4em; padding: 5px; bottom: 0; right: 0;'
    }); 
    
    me.bottomEditEl.addEventListener('click', function(){
        ajaxRequest(me, 'bedtclick', []);
    });
    
    Ext.onReady(function() {
        if (sender.bottomEditEl && Ext.select('.x-trigger .x-icon-el').elements[0]) {
            sender.bottomEditEl.style.color = Ext.get(Ext.select('.x-trigger .x-icon-el').elements[0].id).getStyle('color');
        }
    });
}

function beforeInit(sender, config)
{
    config.triggers = [
        {
            iconCls: 'x-fa fa-edit', 
            style: 'position: absolute; font-size: 1.4em; padding: 5px; bottom: 0; right: 0;', 
            handler: function() {
                console.log('edit'); //ajaxRequest
            }
        }
    ];
}

 

[x11]

Спасибо. Работает

function beforeInit(sender, config)
{
    config.triggers = [
        {
            iconCls: 'x-fa fa-edit', 
            style: 'position: absolute; font-size: 1.4em; padding: 5px; bottom: 0; right: 0;', 
            handler: function() {
                ajaxRequest(this, 'btnEditMemoAdClick', []);
            }
        }
    ];
}

 

[x11]

Было бы неплохо, если бы и в Memo разработчики добавили триггеры (кнопки), как в других компонентах.

[x11]

@Sherzod а как добавить несколько кнопок, как на картинке выше?

[Sherzod]

1 hour ago, x11 said:

@Sherzod а как добавить несколько кнопок, как на картинке выше?

function beforeInit(sender, config)
{
    config.triggers = [
        {
            iconCls: 'x-fa fa-clone', 
            style: 'position: absolute; font-size: 1.4em; padding: 5px; bottom: 0; right: 45px;', 
            handler: function() {
                ajaxRequest(this, 'btnCloneMemoAdClick', []);
            }
        },
        {
            iconCls: 'x-fa fa-edit', 
            style: 'position: absolute; font-size: 1.4em; padding: 5px; bottom: 0; right: 20px;', 
            handler: function() {
                ajaxRequest(this, 'btnEditMemoAdClick', []);
            }
        }, 
        {
            iconCls: 'x-fa fa-share-alt', 
            style: 'position: absolute; font-size: 1.4em; padding: 5px; bottom: 0; right: 0;', 
            handler: function() {
                ajaxRequest(this, 'btnShareMemoAdClick', []);
            }
        }
    ];
}

 

[Kenneth]

не подскажите как в десктопное приложение добавить иконку в unimemo?

[x11]

А так, как показано выше пробовали и не получилось?

Кстати, есть еще вариант. Кинуть uniMemo внутрь uniPanel, а уже у компоненты uniPanel использовать новый функционал кнопок в заголовке