ExtJSFormFieldIconPlugin.js

Ext.define("TopBox.view.plugin.NAField", {
    extend: "Ext.AbstractPlugin",
    alternateClassName: "Ext.ux.form.field.Icon",
    alias: ["plugin.saki-ficn", "plugin.ux-ficn"],
    iconBaseCls: "fa",
    iconCls: "fa-info-circle",
    iconMode: "font",
    iconColor: "#5278FF",
    iconWidth: 16,
    iconHeight: 16,
    cellWidthAdjust: 6,
    iconCursor: "pointer",
    iconMargin: "0 3px 0 3px",
    position: "afterInput",
    clickEvents: ["click", "contextmenu"],
    init: function(c) {
        var d = this;
        d.setCmp(c);
        c.on({
            afterrender: {
                scope: d,
                single: true,
                fn: d.afterCmpRender
            }
        });
        Ext.apply(c, {
            getIcon: function() {
                return d
            },
            setIconCls: function(a) {
                this.iconEl.replaceCls(d.iconCls, a);
                d.iconCls = a
            },
            setIconStyle: function(a) {
                this.iconEl.applyStyles(a)
            },
            setIconColor: function(a) {
                this.setIconStyle({
                    color: a
                })
            },
            setIconTip: function(a) {
                this.iconEl.set({
                    "data-qtip": a
                })
            },
            setIconTipTitle: function(a) {
                this.iconEl.set({
                    "data-qtitle": a
                })
            }
        })
    },
    afterCmpRender: function() {
        var n = this,
            o = n.getCmp(),
            e = n.getIconConfig(),
            p = false,
            m = false,
            k, q = {
                tag: "div",
                style: {
                    display: "table-cell",
                    width: (n.iconWidth + n.cellWidthAdjust) + "px"
                },
                cn: [e]
            };
        try {
            p = o instanceof Ext.form.field.Checkbox;
            m = o instanceof Ext.form.field.TextArea
        } catch (l) {}
        if (m) {
            Ext.apply(q.style, {
                "vertical-align": "top",
                "padding-top": "3px"
            })
        }
        switch (n.position) {
            case "afterInput":
                if (p) {
                    k = o.inputEl.insertSibling(e, "after")
                } else {
                    k = o.bodyEl.insertSibling(q, "after");
                    k = k.down("i")
                }
                break;
            case "beforeInput":
                k = o.labelEl.next().insertSibling(q, "before");
                k = k.down("i");
                break;
            case "afterLabel":
                if (p && o.boxLabelEl) {
                    e.style["vertical-align"] = "middle";
                    k = o.boxLabelEl.insertSibling(e, "after")
                } else {
                    k = o.labelEl.insertSibling(q, "after")
                }
                break;
            case "beforeLabel":
                if (p && o.boxLabelEl) {
                    e.style["margin-left"] = (n.iconWidth + n.cellWidthAdjust / 2) + "px";
                    o.boxLabelEl.setStyle({
                        "padding-left": 0
                    });
                    k = o.boxLabelEl.insertSibling(e, "before")
                } else {
                    k = o.labelEl.insertSibling(q, "before");
                    k = k.down("i")
                }
                break
        }
        o.iconEl = k;
        if (n.tip) {
            if (!(n.tip instanceof Ext.Base)) {
                n.tip = Ext.widget("tooltip", n.tip)
            }
            n.tip.setTarget(k)
        }
        n.initEvents()
    },
    initEvents: function() {
        var g = this,
            h = g.getCmp(),
            f = h.iconEl,
            e;
        Ext.Array.each(g.clickEvents, function(a) {
            f.on(a, function(b) {
                b.stopEvent();
                h.fireEvent("icon" + a, h, b);
                return false
            })
        })
    },
    getIconConfig: function() {
        var f = this,
            d = f.getCmp(),
            e = {
                tag: "i",
                cls: Ext.String.format("{0} {1}", f.iconBaseCls, f.iconCls),
                style: {
                    width: f.iconWidth + "px",
                    height: f.iconHeight + "px",
                    "font-size": f.iconHeight + "px",
                    color: f.iconColor,
                    cursor: f.iconCursor,
                    margin: f.iconMargin
                }
            };
        if ("img" === f.iconMode && f.iconPath) {
            e.cls = f.iconBaseCls;
            e.cn = [{
                tag: "img",
                src: f.iconPath,
                style: {
                    "vertical-align": "middle"
                }
            }]
        }
        if (!f.tip) {
            if (f.qtipTitle) {
                e["data-qtitle"] = f.qtipTitle
            }
            if (f.qtip) {
                e["data-qtip"] = f.qtip
            }
        }
        return e
    },
    destroy: function() {
        var b = this.getCmp().iconEl;
        b.removeAllListeners();
        Ext.destroy(b);
        b = null;
        console.log("destroyed")
    }
});

Ext.define("Ficn.view.FormView", {
    extend: "Ext.form.Panel",
    alias: "widget.formview",
    bodyPadding: 10,
    frame: true,
    defaultType: "textfield",
    defaults: {
        anchor: "100%",
        labelAlign: "right"
    },
    title: "Form Field Icon Plugin Example Form",
    items: [{
        xtype: "container",
        layout: "hbox",
        align: "stretch",
        defaults: {
            border: false,
            bodyStyle: "background:transparent",
            flex: 1,
            layout: "anchor"
        },
        items: [{
            defaults: {
                xtype: "textfield",
                labelAlign: "right",
                anchor: "100%"
            },
            items: [{
                fieldLabel: "First Name",
                name: "fname",
                allowBlank: false,
                msgTarget: "side",
                plugins: [{
                    ptype: "saki-ficn",
                    iconCls: "fa-dot-circle-o",
                    iconColor: "red",
                    qtip: "Click or right-click this icon."
                }],
                value: "Icon on the right is clickable ->"
            }, {
                fieldLabel: "Gender",
                name: "gender",
                editable: false,
                forceSelection: true,
                xtype: "combobox",
                store: [
                    [1, "---"],
                    [2, "Male"],
                    [3, "Female"]
                ],
                value: 1,
                plugins: [{
                    ptype: "saki-ficn",
                    qtip: "Please fill-in your gender so that we can send you more personalized e-mails."
                }]
            }]
        }, {
            defaults: {
                xtype: "textfield",
                labelAlign: "right",
                anchor: "100%"
            },
            items: [{
                fieldLabel: "Last Name *",
                name: "lname",
                allowBlank: false,
                msgTarget: "side",
                plugins: [{
                    ptype: "saki-ficn",
                    qtip: "This icon is configured with iconMode:img and imgPath",
                    iconMode: "img",
                    iconPath: "resources/drop-yes.gif"
                }]
            }, {
                fieldLabel: "Birth Date",
                xtype: "datefield",
                name: "dob",
                plugins: [{
                    ptype: "saki-ficn",
                    iconCls: "ficn-icon-ok",
                    qtipTitle: "Date of Birth",
                    qtip: "This icon is configured by a non-font iconCls that sets background-image."
                }]
            }]
        }]
    }, {
        xtype: "textarea",
        name: "bio",
        fieldLabel: "Biography",
        value: "Field Icon on the right has an Ajax-loaded rich tooltip.\n\nNote: Tooltip Ajax load is broken in the current version of ExtJS 5.",
        plugins: [{
            ptype: "saki-ficn",
            tip: {
                autoLoad: {
                    url: "resources/tooltip.html"
                },
                dismissDelay: 6000
            }
        }]
    }, {
        xtype: "checkbox",
        boxLabel: "I agree with the terms and conditions",
        name: "toc",
        style: "margin-left:105px",
        plugins: [{
            ptype: "saki-ficn",
            position: "afterLabel",
            qtip: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur."
        }]
    }, {
        xtype: "checkbox",
        fieldLabel: "Check Me",
        name: "cb",
        plugins: [{
            ptype: "saki-ficn",
            position: "afterInput",
            iconMargin: "5px 3px 0 5px",
            qtip: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur."
        }]
    }, {
        xtype: "numberfield",
        name: "age",
        fieldLabel: "Your Age",
        plugins: [{
            ptype: "saki-ficn",
            qtip: "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
        }]
    }]
});
Ext.define("Ficn.controller.MainController", {
    extend: "Ext.app.Controller",
    views: ["FormView"],
    config: {
        icons: [{
            cls: "fa-leaf",
            glyph: "xf06c"
        }, {
            cls: "fa-info-circle",
            glyph: "xf05a"
        }, {
            cls: "fa-envelope-o",
            glyph: "xf003"
        }, {
            cls: "fa-home",
            glyph: "xf015"
        }, {
            cls: "fa-picture-o",
            glyph: "xf03e"
        }, {
            cls: "fa-archive",
            glyph: "xf187"
        }]
    },
    iconIndex: 0,
    init: function() {
        var b = this;
        this.listen({
            component: {
                "formview [name=fname]": {
                    iconclick: "onFirstNameIconClick",
                    iconcontextmenu: "onFirstNameIconContextmenu"
                }
            }
        })
    },
    onFirstNameIconClick: function(j, k) {
        var e = this,
            h = e.getIcons(),
            g = h[e.iconIndex % h.length].cls;
        j.setIconCls(g);
        j.setValue("Current iconCls: " + g);
        e.iconIndex++
    },
    onFirstNameIconContextmenu: function(f, d) {
        var e = this;
        e.getMenu(f).showBy(f, "tl-br")
    },
    getMenu: function(f) {
        var d = this,
            e = {
                xtype: "menu",
                items: []
            };
        if (!d.menu) {
            Ext.Array.each(d.getIcons(), function(a) {
                e.items.push({
                    text: a.cls,
                    field: f,
                    handler: d.onMenuItemClick,
                    glyph: a.glyph + "@FontAwesome"
                })
            });
            d.menu = Ext.widget("menu", e)
        }
        return d.menu
    },
    onMenuItemClick: function(c) {
        var d = this;
        c.field.setIconCls(c.text);
        c.field.setValue("Current iconCls: " + c.text)
    }
});
Ext.define("Ficn.Application", {
    name: "Ficn",
    extend: "Ext.app.Application",
    views: [],
    controllers: ["MainController"],
    stores: [],
    launch: function() {
        var c = this,
            d = Ext.fly("form-ct") || Ext.getBody();
        Ext.tip.QuickTipManager.init();
        Ext.widget("formview", {
            renderTo: d
        })
    }
});
Ext.application({
    name: "Ficn",
    extend: "Ficn.Application"
});