i try show colorpicker in grid cell. can't correct. must show/hide panel whith colorpiker , save piked color in grid cell.
i try use several controls. allways have problems. please explain right way.
now it's this:
and code:
{ xtype: "widgetcolumn", dataindex: "color", text: "color", width: 60, widget: { xtype: 'colorpicker', align: 'right', value: '993300', }, listeners: { select: function(picker, selcolor) { value = selcolor, hide(this); } } }
show color picker in grid cell.double click on grid row select menu bar color , 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; (var = 0; < customcolors.length; i++) { metadata.down('colorpicker').colors.push(customcolors[i]); } metadata.down('colorpicker').updatelayout(); } } } }, ], selmodel: 'rowmodel', plugins: { ptype: 'rowediting', clickstoedit: 2 }, } ] }] }).show(); }); 
Comments
Post a Comment