Как показать выбор цвета в ячейке сетки?

Question

Я пытаюсь показать colorpicker в ячейке сетки. Но я не могу сделать это правильно. Он должен выглядеть как показать/скрыть панель whith colorpiker и сохранить piked цвет в ячейке сетки.

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

Теперь это выглядит следующим образом:

и код:

{ 
    xtype: "widgetcolumn", 
    dataIndex: "color", 
    text: "Color", 
    width: 60, 

    widget: { 
     xtype: 'colorpicker', 
     align: 'right', 
     value: '993300', 
    }, 

    listeners: { 
     select: function(picker, selColor) { 
      value = selColor, 
       hide(this); 
     } 
    } 
} 

Answer 1

show color picker in grid cell.double click on grid row then select menu bar color and click on update plugin color show on grid row.code check in js fiddler 





    Ext.onReady(function() { 
        var userStore = Ext.create('Ext.data.Store', { 
         autoLoad: 'false', 
         fields: [ 
          { name: 'name' }, 
          { name: 'email' }, 
          { name: 'colorCode' } 
         ], 
         data: [ 
          { name: 'Lisa', email: 'lisa@simpsons.com'}, 
          { name: 'Bart', email: 'bart@simpsons.com'}, 
          { name: 'Homer', email: 'homer@simpsons.com'}, 
          { name: 'Marge', email: 'marge@simpsons.com'}, 
          { name: 'Homer', email: 'homer@simpsons.com' }, 
          { name: 'Marge', email: 'marge@simpsons.com'}, 
         ] 
        }); 

        var customColors = ['FF4848', 'FF7575', 'FFA8A8', 'FFBBBB', 'FFCECE', 'FFECEC', 'FF68DD', 'FF86E3', 'FFACEC', 'FFC8F2', 'FF62B0', 'FF73B9', 'FF86C2', 'FFA8D3', 
      'E469FE', 'EA8DFE', 'EFA9FE', 'D568FD', 'D97BFD', 'DD88FD', 'E7A9FE', '9669FE', 'A27AFE', 'C4ABFE', 'D0BCFE', 'DDCEFF', 'FFA4FF', 'EAA6EA', 'D698FE', 'CEA8F4', 
      'BCB4F3', 'A9C5EB', '8CD1E6', 'FFBBFF', 'EEBBEE', 'DFB0FF', 'DBBFF7', 'CBC5F5', 'BAD0EF', 'A5DBEB', 'FFCEFF', 'F0C4F0', 'E8C6FF', 'E1CAF9', 'D7D1F8', 'CEDEF4', 
      'B8E2EF', '62A9FF', '62D0FF', '06DCFB', '01FCEF', '03EBA6', '01F33E', '99E0FF', '63E9FC', '74FEF8', '62FDCE', '72FE95', 'C0F7FE', 'CEFFFD', 'BEFEEB', 'CAFFD8', 
      '1FCB4A', '59955C', '48FB0D', '2DC800', '59DF00', '9D9D00', 'B6BA18', 'DFDF00', 'DFE32D', '93EEAA', 'A6CAA9', 'AAFD8E', '6FFF44', 'ABFF73', 'FFFF84', 'E7F3F1', 
      'EEF093', 'BDF4CB', 'C9DECB', 'CAFEB8', 'A5FF8A', 'D1FFB3', 'FFFFB5', 'F5F7C4', 'BABA21', 'C8B400', 'DFA800', 'DB9900', 'FFB428', 'FF9331', 'FF800D', 'D8F0F8', 
      'E6E671', 'E6CE00', 'FFCB2F', 'FFB60B', 'FFC65B', 'FFAB60', 'FFAC62', 'F7DE00', 'FFD34F', 'FFBE28', 'FFCE73', 'FFBB7D', 'FFBD82', 'EEEECE', 'EADFBF', 'E4C6A7', 
      'E6C5B9', 'DEB19E', 'E8CCBF', 'DDB9B9', 'E1E1A8', 'DECF9C', 'DAAF85', 'DAA794', 'CF8D72', 'DAAC96', 'D1A0A0', 'FF8E8E', 'E994AB', 'FF7DFF', 'D881ED', 'B7B7FF', 
      'A6DEEE', 'CFE7E2', 'FFC8C8', 'F4CAD6', 'FFA8FF', 'EFCDF8', 'C6C6FF', 'C0E7F3', 'DCEDEA', 'FFEAEA', 'F8DAE2', 'FFC4FF', 'EFCDF8', 'DBDBFF']; 
        Ext.create('Ext.window.Window', { 
         height: 400, 
         width: 350, 
         xtype: 'panel', 
         layout: 'fit', 
         items: 
         [ 
          { 
           layout: 'border', 
           height: 200, 
           renderTo: Ext.getBody(), 
           items: 
            [ 

           { 
            xtype: 'grid', 
           // height: 300, 
            region: 'center', 
            id: 'GridId', 
            store: userStore, 


            columns: [ 
             { 
              header: 'Name', 
              width: 100, 
              sortable: false, 
              hideable: false, 
              dataIndex: 'name', 
              editor: { 
               xtype: 'textfield' 
              } 
             }, 
             { 
              header: 'Email Address', 
              width: 150, 
              dataIndex: 'email', 
              editor: { 
               xtype: 'textfield', 
              } 
             }, 
             { 
              header: 'Color', 
              dataIndex: 'colorCode', 
              width: '20%', 
              renderer: function (value, metaData) { 
               metaData.tdAttr = 'bgcolor=' + value; 
               return value; 
              }, 

              editor: { 
               xtype: 'button', 
               text: 'Color Menu', 
               menu: new Ext.menu.ColorPicker({ 
                resizable: true, 
                scrollable: true, 
                listeners: { 
                 select: function (metaData, value) { 
                  metaData.up('grid').getSelection()[0].dirty = true; 
                  metaData.up('grid').getSelectionModel().getSelection()[0].data.colorCode = value; 
                 } 
                } 
               }), 
               listeners: { 
                render: function (metaData, value) { 
                 metaData.down('colorpicker').colors = []; 
                 metaData.down('colorpicker').value = metaData.ownerCt.context.grid.getSelectionModel().getSelection()[0].data.colorCode; 
                 for (var i = 0; i < customColors.length; i++) { 
                  metaData.down('colorpicker').colors.push(customColors[i]); 
                 } 
                 metaData.down('colorpicker').updateLayout(); 
                } 
               } 
              } 
             }, 

            ], 
            selModel: 'rowmodel', 
            plugins: { 
             ptype: 'rowediting', 
             clicksToEdit: 2 
            }, 
           } 
           ] 


          }] 

        }).show(); 
       });