PDA

View Full Version : Simple Ext.ux.ColorField plugin



slammer
18 Jul 2011, 8:54 AM
I decided to migrate this plugin http://www.sencha.com/learn/legacy/Extension:ColorField to ExtJS 4.


Ext.define('Ext.ux.ColorField', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.colorfield',
requires: ['Ext.form.field.VTypes', 'Ext.layout.component.field.Text'],

lengthText: "Color hex values must be either 3 or 6 characters.",
blankText: "Must have a hexidecimal value in the format ABCDEF.",

regex: /^[0-9a-f]{3,6}$/i,

validateValue : function(value){
if(!this.getEl()) {
return true;
}
if(value.length!=3 && value.length!=6) {
this.markInvalid(Ext.String.format(this.lengthText, value));
return false;
}
if((value.length < 1 && !this.allowBlank) || !this.regex.test(value)) {
this.markInvalid(Ext.String.format(this.blankText, value));
return false;
}

this.markInvalid();
this.setColor(value);
return true;
},

markInvalid : function( msg ) {
Ext.ux.ColorField.superclass.markInvalid.call(this, msg);
this.inputEl.setStyle({
'background-image': 'url(../resources/themes/images/default/grid/invalid_line.gif)'
});
},

setValue : function(hex){
Ext.ux.ColorField.superclass.setValue.call(this, hex);
this.setColor(hex);
},

setColor : function(hex) {
Ext.ux.ColorField.superclass.setFieldStyle.call(this, {
'background-color': '#' + hex,
'background-image': 'none'
});
},

menuListeners : {
select: function(m, d){
this.setValue(d);
},
show : function(){
this.onFocus();
},
hide : function(){
this.focus();
var ml = this.menuListeners;
this.menu.un("select", ml.select, this);
this.menu.un("show", ml.show, this);
this.menu.un("hide", ml.hide, this);
}
},

onTriggerClick : function(e){
if(this.disabled){
return;
}

this.menu = new Ext.menu.ColorPicker({
shadow: true,
autoShow : true
});
this.menu.alignTo(this.inputEl, 'tl-bl?');
this.menu.doLayout();

this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));

this.menu.show(this.inputEl);
}
});

SenchaGuru
19 Jul 2011, 6:23 PM
Thank you, .. this is exactly what I was trying to do, ..

Maybe someone should update the plugin page, .. this would've saved me hours trying to get that to work (:|

Excelent work ;)

janhov
4 Nov 2011, 7:28 AM
Thanks a lot! I find this component very useful.

Izhaki
15 Nov 2011, 11:44 AM
Thanks a lot for sharing.

Shouldn't it be:



validateValue : function(value){


if (this.allowBlank && !value)
{
return true
}


if(!this.getEl()) {
return true;
}
if(value.length!=3 && value.length!=6) {
this.markInvalid(Ext.String.format(this.lengthText, value));
return false;
}
if((value.length < 1 && !this.allowBlank) || !this.regex.test(value)) {
this.markInvalid(Ext.String.format(this.blankText, value));
return false;
}


return true;
},

apriza_ymail
30 Nov 2011, 1:14 AM
cann't run in ie.. i am using ie 8

lastcrown
1 Dec 2011, 12:19 AM
on setColor, remove '#'

[before]
background-color': '#' + hex,

[after]
'background-color': hex,

outaTiME
28 Nov 2013, 7:04 AM
github repo ?

tdobberphul
24 Jan 2014, 6:42 AM
Hey, thanks for providing.

But: In my grid it doesn't cause the store to update this cell/record. Don't know why.
Because the other fields do update.

I mean I have a celleditor plugin.
if I change the colorfield - cell the store does not trigger an update
if I change another cell the store - update is triggered
No errors no network - action. The update is just not triggered.

Can someone help me please?

Thanks,
Tobias



Ext.define('IGP_Office.view.ProjektPositionPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.projektpositionsPanel',


requires: [
'Ext.grid.plugin.CellEditing',
'Ext.selection.CellModel'
],


itemId: 'projektpositionsPanel',
closable: true,
title: 'Projektpositionen',
store: 'ProjektPositionStore',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
hidden: true,
width: 50,
defaultWidth: 50,
dataIndex: 'id',
text: 'Id'
},
{
xtype: 'gridcolumn',
hidden: true,
width: 80,
dataIndex: 'projekt_id',
text: 'Projekt ID'
},
{
xtype: 'gridcolumn',
width: 80,
dataIndex: 'abkuerzung_aus_acad',
text: 'ACAD <br>Kürzel'
},
{
xtype: 'gridcolumn',
minWidth: 300,
width: 300,
dataIndex: 'kurztext',
text: 'ProjektPosition - Kurztext',
flex: 2,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return (value === undefined || value === null)?'':value + ' € / ' + renderAbrechnungseinheit(record.get('abrechnungseinheit'));
},
width: 120,
align: 'right',
dataIndex: 'preis_kostenanschlag',
text: 'Kostenanschlag',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return renderAbrechnungseinheit(value);
},
editRenderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return renderAbrechnungseinheit(value);
},
width: 145,
align: 'center',
dataIndex: 'abrechnungseinheit',
text: 'Abrechnungs-<br>einheit',
editor: {
xtype: 'combobox',
queryMode: 'local',
store: 'AbrechnungsEinheitStore',
valueField: 'value'
}
},
{
xtype: 'numbercolumn',
renderer: function(value, metadata, record, rowIndex, colIndex, store, view) {
return runden(value,0) + ' ' + renderAbrechnungseinheit(record.get('abrechnungseinheit'));
},
width: 120,
align: 'right',
dataIndex: 'menge',
text: 'Menge (Summe)'
},
{
xtype: 'numbercolumn',
renderer: 'euroMoney',
width: 120,
align: 'right',
dataIndex: 'anschlagskostenSumme',
text: 'Anschlagskosten <br>(Summe)'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return record.get('positionstyp_vollname');
},
editRenderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return record.get('positionstyp_vollname');
},
minWidth: 250,
width: 250,
dataIndex: 'positionstyp_id',
text: 'übergeordneter <br>IGP Positionstyp',
flex: 1,
editor: {
xtype: 'combobox',
autoRender: true,
itemId: 'positionstyp_id_combobox',
fieldStyle: 'background-color:#FF9999;',
autoSelect: false,
displayField: 'vollname',
forceSelection: true,
store: 'IGPPositionstypStore',
valueField: 'id',
listeners: {
change: {
fn: me.onComboboxChange,
scope: me
},
collapse: {
fn: me.onPositionstyp_id_comboboxCollapse,
scope: me
}
}
}
},
{
xtype: 'gridcolumn',
width: 110,
dataIndex: 'ordnungszahl_bauherr',
text: 'Ordnungszahl <br>(Bauherr)',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
width: 120,
dataIndex: 'ordnungszahl_projektsteuerer',
text: 'Ordnungszahl <br>(Projektsteuerer)',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
//metaData.tdAttr = 'style="background-color:#'+ value +';color:black;"';
return '<div style="background-color:#' + value + ';width:64px;height:16px;text-align:center;" >&nbsp;</div>';
},
width: 90,
align: 'center',
dataIndex: 'layer_farbe',
text: 'Layerfarbe',
editor: {
xtype: 'colorfield'
}
},
{
xtype: 'gridcolumn',
width: 120,
align: 'center',
dataIndex: 'baukategorie',
text: 'Baukategorie',
editor: {
xtype: 'combobox',
editable: false,
queryMode: 'local',
store: 'BaukategorieStore',
valueField: 'value'
}
},
{
xtype: 'gridcolumn',
hidden: true,
width: 130,
dataIndex: 'zeichenkoerperKategorie',
text: 'Zeichenkörper-Kategorie',
editor: {
xtype: 'combobox',
editable: false,
queryMode: 'local',
store: 'ZeichenkoerperKategorieStore',
valueField: 'value'
}
},
{
xtype: 'gridcolumn',
hidden: true,
width: 100,
dataIndex: 'lastedit_mitarbeiter_id',
text: 'letzter Bearbeiter'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
itemId: 'projektpositionToolbar',
items: [
{
xtype: 'numberfield',
itemId: 'projektnummerTextfeld',
width: 130,
fieldLabel: 'Projekt-Nr.:',
labelWidth: 70,
hideTrigger: true,
decimalPrecision: 0
},
{
xtype: 'textfield',
itemId: 'kurztextFilterTextfield',
fieldLabel: 'Filter',
labelWidth: 30,
emptyText: 'ACAD-Kürzel / Kurztext'
},
{
xtype: 'button',
handler: function(button, e) {
this.up('projektpositionsPanel').getStore().load();
},
icon: 'resources/icons/aktualisieren.gif',
text: 'aktualisieren'
}
]
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {


})
],
selModel: Ext.create('Ext.selection.CellModel', {


})
});


me.callParent(arguments);
},


onComboboxChange: function(field, newValue, oldValue, eOpts) {
field.getStore().clearFilter(true);
field.getStore().filter([
{
filterFn: function(item) {
return item.get('vollname').match(field.getValue()) !== null;
}
}
]);
field.expand();


},


onPositionstyp_id_comboboxCollapse: function(field, eOpts) {
field.getStore().clearFilter();
},


setProjektID: function(projektID) {
Ext.ComponentQuery.query('#projektnummerTextfeld')[0].setValue(projektID);
Ext.ComponentQuery.query('#projektnummerTextfeld')[0].disable();
//this.getDockedComponent('projektNummerToolbar').hide();
}


});




Ext.define('IGP_Office.store.ProjektPositionStore', {
extend: 'Ext.data.Store',
alias: 'store.projektPositionStore',


requires: [
'IGP_Office.model.ProjektPosition',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json',
'Ext.data.writer.Json'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoSync: true,
model: 'IGP_Office.model.ProjektPosition',
remoteFilter: true,
storeId: 'ProjektPositionStore',
proxy: {
type: 'ajax',
url: '../IGP_API/api.php?type=ProjektPositionStoreDummy',
reader: {
type: 'json',
root: 'results'
},
writer: {
type: 'json'
},
listeners: {
exception: {
fn: me.onAjaxException,
scope: me
}
}
},
listeners: {
beforeload: {
fn: me.onStoreBeforeLoad,
scope: me
}
}
}, cfg)]);
},


onAjaxException: function(proxy, response, operation, eOpts) {
if (response && proxy) {
try {
var responseData = proxy.reader.getResponseData(response);
Ext.IGPlibary.msg('Error', Ext.decode(response.responseText).msg);
} catch(err) {
// Malformed response most likely
Ext.IGPlibary.msg('Error', err);
}
}
console.log(Ext.JSON.decode(response.responseText));
},


onStoreBeforeLoad: function(store, operation, eOpts) {
// Ohne diese Zeile wird der Store beim Erstellen des Panels ohne Filter neu laden. Das PHP-Skript wirft dann einen Fehler, da es einen Filter erwartet:
if (!store.isFiltered() && (Ext.ComponentQuery.query('#projektnummerTextfeld')[0].getValue()===null || Ext.ComponentQuery.query('#projektnummerTextfeld')[0].getValue()==='' )) return false;
}


});

tdobberphul
27 Jan 2014, 3:57 AM
Can anyone help me please?