Строка столбцов компонента рендера в Sencha ExtJs 5.1.0

Question

У меня проблема с рендерером, я использую средство визуализации для создания numberfield в column из grid, но это не сработает, см. Код и помогите мне, где я ошибаюсь.

xtype:'gridcolumn', 
header: 'Quantity', 
dataIndex: 'qty', 
hideable: false, 
sortable : true, 
renderer:function(value) { 
     var id = Ext.id();   
     var numberField = Ext.create('Ext.form.field.Number', { 
       height:100, 
     }); 
     return '<div id="' + id + '"></div>'; 
} 

Благодарим за помощь.

Answer 1

Я думаю, вы должны смотреть на Cell Editing plugin. В приведенном выше коде вы создаете экземпляр поля чисел, но фактически не применяете его ни к чему.

Плагин редактирования ячейки позволяет использовать в столбце полевые компоненты, такие как текстовое поле, поле цифр и т. Д., И помогает управлять редактируемыми данными.

Fiddle

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     Ext.create('Ext.data.Store', { 
      storeId: 'simpsonsStore', 
      fields: ['name', 'email', 'phone'], 
      data: [{ 
       name: 'Lisa', 
       email: 'lisa@simpsons.com', 
       phone: '555-111-1224', 
       number: 0 
      }, { 
       name: 'Bart', 
       email: 'bart@simpsons.com', 
       phone: '555-222-1234', 
       num: 1 
      }, { 
       name: 'Homer', 
       email: 'homer@simpsons.com', 
       phone: '555-222-1244', 
       num: 2 
      }, { 
       name: 'Marge', 
       email: 'marge@simpsons.com', 
       phone: '555-222-1254', 
       num: 3 
      }] 
     }); 

     Ext.create('Ext.grid.Panel', { 
      title: 'Simpsons', 
      store: Ext.data.StoreManager.lookup('simpsonsStore'), 
      columns: [{ 
       header: 'Name', 
       dataIndex: 'name', 
       editor: 'textfield' 
      }, { 
       header: 'Email', 
       dataIndex: 'email', 
       flex: 1, 
       editor: { 
        xtype: 'textfield', 
        allowBlank: false 
       } 
      }, { 
       header: 'Phone', 
       dataIndex: 'phone' 
      }, { 
       header: 'Number', 
       dataIndex: 'num', 
       editor: 'numberfield' 
      }], 
      selModel: 'cellmodel', 
      plugins: { 
       ptype: 'cellediting', 
       clicksToEdit: 1 
      }, 
      height: 200, 
      width: 400, 
      renderTo: Ext.getBody() 
     }); 
    } 
});