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
    28
    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
    28
    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');
    },

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi