1. #11
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    472
    Vote Rating
    12
    wemerson.januario will become famous soon enough

      0  

    Default It works

    It works


    Thanks I could make it work now defining getGlyph().
    Is there any feature request to add getGlyph method for next release?
    Thanks!
    Wemerson Januario
    Twitter:
    @januariocoder
    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Developer

  2. #12
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,744
    Vote Rating
    927
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by wemerson.januario View Post
    Thanks I could make it work now defining getGlyph().
    Is there any feature request to add getGlyph method for next release?
    Thanks!
    Glad it worked for you. About the next release, it's something I can attempt to get in yes
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #13
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    472
    Vote Rating
    12
    wemerson.januario will become famous soon enough

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    This is one I'm using for Fiddle:

    Code:
    Ext.define('Override.grid.column.Action', {
        override : 'Ext.grid.column.Action',
    
        iconTpl : '<tpl for=".">' +
            '<tpl if="glyph">' +
                '<div class="{cls}" style="font-family:{glyphFamily}; font-size:13px; line-height: 15px;"<tpl if="tooltip"> data-qtip="{tooltip}"</tpl>>&#{glyph};</div>' +
            '<tpl else>' +
                '<img role="button" alt="{alt}" class="{cls}"<tpl if="tooltip"> data-qtip="{tooltip}"</tpl> />' +
            '</tpl>' +
        '</tpl>',
    
        defaultRenderer : function(v, meta, record, rowIdx, colIdx, store, view) {
            var me            = this,
                prefix        = Ext.baseCSSPrefix,
                scope         = me.origScope || me,
                items         = me.items,
                altText       = me.altText,
                disableAction = me.disableAction,
                enableAction  = me.enableAction,
                iconCls       = me.iconCls,
                len           = items.length,
                i             = 0,
                iconTpl       = new Ext.XTemplate(me.iconTpl),
                datas         = [],
                item, itemScope, ret, disabled, tooltip, glyph, cls, data;
    
            // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
            // Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
            // we will pass an incorrect value to getClass/getTip
            ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
    
            meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
    
            for (; i < len; i++) {
                item      = items[i];
                itemScope = item.scope || scope;
                disabled  = item.disabled || (item.isDisabled ? item.isDisabled.call(itemScope, view, rowIdx, colIdx, item, record) : false);
                tooltip   = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(itemScope, arguments) : null));
                glyph     = item.glyph || item.getGlyph;
                cls       = Ext.String.trim(prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') + ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(itemScope, arguments) : (item.iconCls || iconCls || '')));
                data      = {
                    cls     : cls,
                    tooltip : tooltip
                };
    
                // Only process the item action setup once.
                if (!item.hasActionConfiguration) {
                    // Apply our documented default to all items
                    item.stopSelection          = me.stopSelection;
                    item.disable                = Ext.Function.bind(disableAction, me, [i], 0);
                    item.enable                 = Ext.Function.bind(enableAction, me, [i], 0);
                    item.hasActionConfiguration = true;
                }
    
                if (glyph) {
                    if (Ext.isFunction(glyph)) {
                        glyph = glyph.call(itemScope, view, rowIdx, colIdx, item, record);
                    }
    
                    if (glyph) {
                        glyph = glyph.split('@');
    
                        data.glyph       = glyph[0];
                        data.glyphFamily = glyph[1];
                    } else {
                        data = false;
                    }
                } else {
                    data.alt = item.altText || altText;
                    data.src = item.icon || Ext.BLANK_IMAGE_URL;
                }
    
                data && datas.push(data);
            }
    
            len && (ret += iconTpl.apply(datas));
    
            return ret;
        }
    });
    this seems to not work on firefox. I get error TypeError: Ext.FocusManager is undefined
    Wemerson Januario
    Twitter:
    @januariocoder
    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Developer

  4. #14
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,744
    Vote Rating
    927
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by wemerson.januario View Post
    this seems to not work on firefox. I get error TypeError: Ext.FocusManager is undefined
    It's working fine for me in Fiddle. Maybe something within your app?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #15
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    15
    Vote Rating
    0
    gkohen is on a distinguished road

      0  

    Default Added support for Hex number glyphs and gloablly set glyph family

    Added support for Hex number glyphs and gloablly set glyph family


    @mitchellsimoens, as always thanks for the great snippets. I've added the missing support where folks might be using a global:
    Code:
    Ext.setGlyphFontFamily('FontAwesome')

    or a simple hex number to their item such as
    Code:
    glyph: 0xf00d
    Code:
    Ext.define('Ext.button.NgButton',{
         override :'Ext.button.Button',
         initComponent: function() {
                var me = this;
                console.log(arguments);
                var uix = me.ui;
                if(me.xtype == 'button'  && (!me.ui || me.ui == 'default'))
                    uix = 'actionbtn';            
                Ext.apply(me, {
                    height : 22,
                    minWidth : 22,
                    ui : uix
                });
                me.autoEl = {
                    tag: 'a',
                    hidefocus: 'on',
                    unselectable: 'on'
                };
                me.addCls(Ext.baseCSSPrefix + 'unselectable');
                me.callParent(arguments);
                    me.addEvents('click', 'toggle', 'mouseover', 'mouseout', 'menushow', 'menuhide', 'menutriggerover', 'menutriggerout', 'textchange', 'iconchange', 'glyphchange');
                if (me.menu) {
                    me.split = true;
                    me.menu = Ext.menu.Manager.get(me.menu);
                    me.menu.ownerButton = me;
                }
                if (me.url) {
                    me.href = me.url;
                }
                if (me.href && !me.hasOwnProperty('preventDefault')) {
                    me.preventDefault = false;
                }
                if (Ext.isString(me.toggleGroup) && me.toggleGroup !== '') {
                    me.enableToggle = true;
                }
                if (me.html && !me.text) {
                    me.text = me.html;
                    delete me.html;
                }
                me.glyphCls = me.baseCls + '-glyph';
            }
    });
    */
    //////////////////////////Next Gen global overrides//////////////////////////////
    Ext.define('Ext.view.TableOverride',{
        override: 'Ext.view.Table',
        markDirty: false
    });
    
    
    // Make sure that when the autoselect flag is set (true-by default) the first value is selected. Wrong behavior by ExtJS is just selected the first when opening the picker.
    
    
    Ext.define('Ext.form.field.ComboBoxOverride',{
        override: 'Ext.form.field.ComboBox',
        doAutoSelect: function() {
            var me = this,
                picker = me.picker,
                lastSelected, itemNode;
            if (me.autoSelect && me.store.getCount() > 0) {
                var rec = me.store.getAt(0);
                me.setValue(rec.get(me.valueField));
                if (picker) {
                    // Highlight the last selected item and scroll it into view
                    lastSelected = picker.getSelectionModel().lastSelected;
                    itemNode = picker.getNode(lastSelected || 0);
                    if (itemNode) {
                        picker.highlightItem(itemNode);
                        picker.listEl.scrollChildIntoView(itemNode, false);
                    }
    
    
                }
            }
        }
    });
    
    
    Ext.define('Ext.tab.CenteredPanel',{
        override: 'Ext.tab.Panel',
        tabBar: {
            layout: { pack: 'center' },
            plain : true
        }
    });
    
    
    
    
    Ext.define('Jda.ngr.view.grid.plugin.LabelEditingPatched', {
        alias: 'plugin.Jda-labelediting',
        override: 'Ext.ux.DataView.LabelEditor',
        // on mousedown show editor
        // initialize events
        bindEvents: function() {
            this.mon(this.view.getEl(), {
                click: {
                    fn: this.onClick,
                    scope: this
                }
            });
        },
        onClick: function(e, target) {
            var me = this,
                item, record,
                fly = Ext.fly(target);
    
    
            if ((fly.hasCls(me.labelSelector)||((fly=fly.parent()).hasCls(me.labelSelector))) && !me.editing && !e.ctrlKey && !e.shiftKey) {
                e.stopEvent();
                item = me.view.findItemByChild(target);
                record = me.view.store.getAt(me.view.indexOf(item));
                me.startEdit(fly.el, record.data[me.dataIndex]);
                me.activeRecord = record;
            } else if (me.editing) {
                me.field.blur();
                e.preventDefault();
            }
        }
    
    
    });
    
    
    
    
    Ext.define('Ext.panel.NgTool',{
        override :'Ext.panel.Tool',
        height: 16,
        width: 16,
        margin: '0 0 0 3'
    });
    
    
    
    
    // http://stackoverflow.com/questions/11393660/extjs-4-select-multiple-checkcolumn-checkboxes-with-checkbox-header/11440809#11440809
    Ext.define('Ext.ux.CheckColumnPatch', {
        override: 'Ext.grid.column.Check',
    
    
        /**
         * @cfg {Boolean} [columnHeaderCheckbox=false]
         * True to enable check/uncheck all rows
         */
        columnHeaderCheckbox: false,
    
    
        constructor: function (config) {
            var me = this;
            me.callParent(arguments);
    
    
            me.addEvents('beforecheckallchange', 'checkallchange');
    
    
            if (me.columnHeaderCheckbox) {
                me.on('headerclick', function () {
                    this.updateAllRecords();
                }, me);
    
    
                me.on('render', function (comp) {
                    var grid = comp.up('grid');
                    this.mon(grid, 'reconfigure', function () {
                        if (this.isVisible()) {
                            this.bindStore();
                        }
                    }, this);
    
    
                    if (this.isVisible()) {
                        this.bindStore();
                    }
    
    
                    this.on('show', function () {
                        this.bindStore();
                    });
                    this.on('hide', function () {
                        this.unbindStore();
                    });
                }, me);
            }
        },
    
    
        onStoreDateUpdate: function () {
            var allChecked,
                image;
    
    
            if (!this.updatingAll) {
                allChecked = this.getStoreIsAllChecked();
                if (allChecked !== this.allChecked) {
                    this.allChecked = allChecked;
                    image = this.getHeaderCheckboxImage(allChecked);
                    this.setText(image);
                }
            }
        },
    
    
        getStoreIsAllChecked: function () {
            var me = this,
                allChecked = true;
            me.store.each(function (record) {
                if (!record.get(this.dataIndex)) {
                    allChecked = false;
                    return false;
                }
            }, me);
            return allChecked;
        },
    
    
        bindStore: function () {
            var me = this,
                grid = me.up('grid'),
                store = grid.getStore();
    
    
            me.store = store;
    
    
            me.mon(store, 'datachanged', function () {
                this.onStoreDateUpdate();
            }, me);
            me.mon(store, 'update', function () {
                this.onStoreDateUpdate();
            }, me);
    
    
            me.onStoreDateUpdate();
        },
    
    
        unbindStore: function () {
            var me = this,
                store = me.store;
    
    
            me.mun(store, 'datachanged');
            me.mun(store, 'update');
        },
    
    
        updateAllRecords: function () {
            var me = this,
                allChecked = !me.allChecked;
    
    
            if (me.fireEvent('beforecheckallchange', me, allChecked) !== false) {
                this.updatingAll = true;
                me.store.each(function (record) {
                    record.set(this.dataIndex, allChecked);
                }, me);
    
    
                this.updatingAll = false;
                this.onStoreDateUpdate();
                me.fireEvent('checkallchange', me, allChecked);
            }
        },
    
    
        getHeaderCheckboxImage: function (allChecked) {
            var cls = [],
                cssPrefix = Ext.baseCSSPrefix;
    
    
            if (this.columnHeaderCheckbox) {
                allChecked = this.getStoreIsAllChecked();
                //Extjs 4.2.x css
                cls.push(cssPrefix + 'grid-checkcolumn');
                //Extjs 4.1.x css
                cls.push(cssPrefix + 'grid-checkheader');
    
    
                if (allChecked) {
                    //Extjs 4.2.x css
                    cls.push(cssPrefix + 'grid-checkcolumn-checked');
                    //Extjs 4.1.x css
                    cls.push(cssPrefix + 'grid-checkheader-checked');
                }
            }
            return '<div style="margin:auto" class="' + cls.join(' ') + '"> </div>'
        }
    });
    
    
    //Action Column support for glyph
    Ext.define('Override.grid.column.Action', {
        override : 'Ext.grid.column.Action',
    
    
        iconTpl : '<tpl for=".">' +
            '<tpl if="glyph">' +
            '<div class="{cls}" style="font-family:{glyphFamily}; font-size:13px; line-height: 15px;"<tpl if="tooltip"> data-qtip="{tooltip}"</tpl>>&#{glyph};</div>' +
            '<tpl else>' +
            '<img role="button" alt="{alt}" class="{cls}"<tpl if="tooltip"> data-qtip="{tooltip}"</tpl> />' +
            '</tpl>' +
            '</tpl>',
    
    
        defaultRenderer : function(v, meta, record, rowIdx, colIdx, store, view) {
            var me            = this,
                prefix        = Ext.baseCSSPrefix,
                scope         = me.origScope || me,
                items         = me.items,
                altText       = me.altText,
                disableAction = me.disableAction,
                enableAction  = me.enableAction,
                iconCls       = me.iconCls,
                len           = items.length,
                i             = 0,
                iconTpl       = new Ext.XTemplate(me.iconTpl),
                datas         = [],
                item, itemScope, ret, disabled, tooltip, glyph, cls, data;
    
    
            // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
            // Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
            // we will pass an incorrect value to getClass/getTip
            ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
    
    
            meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
    
    
            for (; i < len; i++) {
                item      = items[i];
                itemScope = item.scope || scope;
                disabled  = item.disabled || (item.isDisabled ? item.isDisabled.call(itemScope, view, rowIdx, colIdx, item, record) : false);
                tooltip   = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(itemScope, arguments) : null));
                glyph     = item.glyph || item.getGlyph;
                cls       = Ext.String.trim(prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') + ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(itemScope, arguments) : (item.iconCls || iconCls || '')));
                data      = {
                    cls     : cls,
                    tooltip : tooltip,
                    glyphFamily : Ext._glyphFontFamily
                };
    
    
                // Only process the item action setup once.
                if (!item.hasActionConfiguration) {
                    // Apply our documented default to all items
                    item.stopSelection          = me.stopSelection;
                    item.disable                = Ext.Function.bind(disableAction, me, [i], 0);
                    item.enable                 = Ext.Function.bind(enableAction, me, [i], 0);
                    item.hasActionConfiguration = true;
                }
    
    
                if (glyph) {
                    if (Ext.isFunction(glyph)) {
                        glyph = glyph.call(itemScope, view, rowIdx, colIdx, item, record);
                    }
    
    
                    if (glyph) {
                        if (typeof glyph === 'string') {
                            glyphParts = glyph.split('@');
                            data.glyph = glyphParts[0];
                            data.glyphFamily = glyphParts[1];
                        } else
                        {
                            data.glyph = glyph;
                        }
                    } else {
                        data = false;
                    }
                } else {
                    data.alt = item.altText || altText;
                    data.src = item.icon || Ext.BLANK_IMAGE_URL;
                }
    
    
                data && datas.push(data);
            }
    
    
            len && (ret += iconTpl.apply(datas));
    
    
            return ret;
        }
    });

  6. #16
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Melrose, MA
    Posts
    48
    Vote Rating
    3
    hjones is on a distinguished road

      0  

    Default


    gkohen : I just implemented the same patch / fix to get the same glyph support using global glyphFontFamily and number glyph config item. Basically copied the code used in the Button implementation.

    I also really like the action event firing detailed here...

    http://stackoverflow.com/questions/6...-action-column

    Is there a reason this can't be added to the stock ActionColumn? Its not in ExtJS v5 version either...I didn't see glyph support in v5 when I last looked.

  7. #17
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    392
    Vote Rating
    13
    murrah will become famous soon enough

      0  

    Default


    Thanks Emil.

    I am using your override for the Action Column and it works well. Thanks. I found that I needed to make sure I was adding a font-size to the font icon class css (the one passed in via iconCls). Without it the icon does not show up. The reason is that the
    Code:
    x-grid-cell-inner-action-col{line-height:0;font-size:0}
    takes precedence and sets the font size to zero, so the icon class needs to specifically set it. eg
    Code:
    font-size: 14px;
    Quote Originally Posted by EPV View Post
    The only bump so far is the panel header which I haven't have time to take care of yet (feel free to beat me to it).
    This is my override to allow font icon classes for the window header. I am actually overriding the getElConfig() method of Ext.Img. The reason is that the window header initComponent uses the Ext.Img class to generate the markup and we need a way to tell Ext.Img that we want to use a div rather than an image.

    I could have overriden the header initComponent to take account of a custom property to say "this iconCls is actually a font icon so tell Ext.Img to make a div instead of an img". Instead I decided to add "-glyph" to the iconCls name and add a test to check for that suffix in Ext.Img. That is what this override does (at the end of the method).

    PHP Code:
    /**
     * Ext.Img override
     * To allow css classes that contain a glyph (rather than an image file)
     * to be used as an icon in an Ext.window.Window via the iconCls config property.
     * If the iconCls config property ends with '-glyph' use a div instead of an img tag.
     * This gives us a way to signal to Ext that this css class contains a glyph
     * instead of an image file.
     */
    Ext.define('Ext.overrides.Img', {
        
    override'Ext.Img',

        
    getElConfig: function() {
            var 
    me this,
                
    config me.callParent(),
                
    glyphFontFamily Ext._glyphFontFamily,
                
    glyph me.glyph,
                
    imgglyphParts;

            
    // It is sometimes helpful (like in a panel header icon) to have the img wrapped
            // by a div. If our autoEl is not 'img' then we just add an img child to the el.
            
    if (me.autoEl == 'img') {
                
    img config;
            } else if (
    me.glyph) {
                if (
    typeof glyph === 'string') {
                    
    glyphParts glyph.split('@');
                    
    glyph glyphParts[0];
                    
    glyphFontFamily glyphParts[1];
                }
                
    config.html '&#' glyph ';';
                if (
    glyphFontFamily) {
                    
    config.style 'font-family:' glyphFontFamily;
                }
            } else {
                
    config.cn = [img = {
                    
    tag'img',
                    
    idme.id '-img'
                
    }];
            }

            if (
    img) {
                if (
    me.imgCls) {
                    
    img.cls = (img.cls img.cls ' ' '') + me.imgCls;
                }

                
    img.src me.src || Ext.BLANK_IMAGE_URL;
            }

            if (
    me.alt) {
                (
    img || config).alt me.alt;
            }
            if (
    me.title) {
                (
    img || config).title me.title;
            }

            
    // ==== Added this. If the iconCls ends with '-glyph' we want to 
            // use a div not an img tag.
            // And, we can remove the generated src attribute since it is no longer an image.
            
    if (Ext.String.endsWith(me.iconCls'-glyph')) {
                
    config.tag 'div';
                
    delete config.src;
            }
            
    // ==== End change

            
    return config;
        }

    }); 
    It is a bit of a hack but I can live with that. Unles, of course, there is a more elegant solution!

    Thanks,
    Murray