Как правильно создать Resizer на Textfields - PullRequest
Новая
       3

Как правильно создать Resizer на Textfields

0 голосов
/ 07 января 2020

Я использую Ext Js 6.2 (тема Classi c), и мне нужно создать функциональность на основе Ext.resize.Resizer. Когда я создаю новый Resizer для элемента TextField, ширина его поля ввода уменьшается. Однако расстояние между обработчиком изменения размера и границей поля велико. Проблема возникает только с полями ввода (текстовое поле, числовое поле, текстовое поле и т. Д. c.), Для других объектов корректор работает корректно - обработчики устанавливаются прямо на границах элементов.

Это проблема Ext или Я делаю что-то неправильно? Как я мог избежать этого странного поведения Ext? Ниже приведены мой пример кода и изображения. 

   Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.panel.Panel', {
            title: 'Resizer example',
            renderTo: Ext.getBody(),
            width: 1000,
            height: 300,
            items: [{
                xtype: 'textfield',
                id: 'ID_1',
                width: 300,
                labelWidth: 75,
                fieldLabel: "Resizable"
            }]
        });
        var resizer = Ext.create('Ext.create', 'Ext.resizer.Resizer', {
            target: 'ID_1',
            handles: 'all'
        });
    }
});

Поле ввода с resizer (1) имеет заметно меньшую ширину, чем в примере без resizer (2):

enter image description here

Заранее благодарим за помощь.

1 Ответ

0 голосов
/ 09 января 2020

Это ошибка в Ext Js Theme Neptune ниже версии 7.1. *:

Посмотрите на скрипку: https://fiddle.sencha.com/#view / editor & fiddle / 32h7 

   Ext.application({
       name: 'Fiddle',

       launch: function () {
           Ext.create('Ext.panel.Panel', {
               title: 'Resizer example',
               renderTo: Ext.getBody(),
               width: 1000,
               height: 300,
               layout: 'vbox',
               items: [{
                   xtype: 'textfield',
                   id: 'ID_1',
                   width: 300,
                   labelWidth: 75,
                   fieldLabel: "Resizable"
               }, {
                   xtype: 'textfield',
                   id: 'ID_2',
                   width: 300,
                   labelWidth: 75,
                   fieldLabel: "Not"
               }]
           });
           var resizer = Ext.create('Ext.create', 'Ext.resizer.Resizer', {
               target: 'ID_1',
               handles: 'all'
           });
       }
   });
...