如何在网格单元格中显示颜色选择器？

Question

我尝试在网格单元格中显示colorpicker。但我无法做到这一点。它必须看起来像show / hide panel whith colorpiker并在网格单元格中保存piked颜色。

我尝试使用几个控件。但总是有问题。请以正确的方式解释。

现在它看起来像这样：

和代码：

{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}

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();
                });