我尝试在网格单元格中显示colorpicker。但我无法做到这一点。它必须看起来像show / hide panel whith colorpiker并在网格单元格中保存piked颜色。
我尝试使用几个控件。但总是有问题。请以正确的方式解释。
现在它看起来像这样:
和代码:
{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}
答案 0 :(得分:0)
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();
});