1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    6
    Vote Rating
    0
    slammer is on a distinguished road

      0  

    Default Simple Ext.ux.ColorField plugin

    Simple Ext.ux.ColorField plugin


    I decided to migrate this plugin http://www.sencha.com/learn/legacy/Extension:ColorField to ExtJS 4.

    Code:
    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);
        }
    });

  2. #2
    Sencha User
    Join Date
    May 2011
    Location
    Toronto
    Posts
    13
    Vote Rating
    -2
    SenchaGuru has a little shameless behaviour in the past

      0  

    Default


    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

  3. #3
    Sencha User
    Join Date
    Dec 2008
    Posts
    89
    Vote Rating
    0
    janhov is on a distinguished road

      0  

    Default


    Thanks a lot! I find this component very useful.

  4. #4
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default


    Thanks a lot for sharing.

    Shouldn't it be:

    Code:
        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;
        },

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    1
    Vote Rating
    0
    apriza_ymail is on a distinguished road

      0  

    Default


    cann't run in ie.. i am using ie 8

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    lastcrown is on a distinguished road

      0  

    Default


    on setColor, remove '#'

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

    [after]
    'background-color': hex,

  7. #7
    Sencha User outaTiME's Avatar
    Join Date
    Jul 2009
    Posts
    9
    Vote Rating
    0
    outaTiME is on a distinguished road

      0  

    Default


    github repo ?

  8. #8
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    37
    Vote Rating
    1
    tdobberphul is on a distinguished road

      0  

    Default


    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

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

  9. #9
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    37
    Vote Rating
    1
    tdobberphul is on a distinguished road

      0  

    Default


    Can anyone help me please?

  10. #10
    Sencha User
    Join Date
    Nov 2013
    Posts
    1
    Vote Rating
    0
    spjt is on a distinguished road

      0  

    Default


    To make this work in a property grid, I had to add an initComponent:

    Code:
      
    initComponent: function() {
     this.callParent(arguments);
     this.suspendEvent('blur');
    },
    then fire the blur when the value is set

    Code:
     
    setValue: function(hex) {
      Ext.ux.ColorField.superclass.setValue.call(this, hex);       
      this.setColor(hex);   
      this.resumeEvent('blur');
      this.fireEvent('blur', this);
      this.suspendEvent('blur');
    },