ExtJS 4.1 Form fiels tooltips / Добавление подсказок для полей формы в ExtJS 4

[betazold]

I modified "absform.js" example from ExtJS 4.1 distributive demos to show you how to use Ext.tip.ToolTip delegates. First, I found within Firebug that form fields have class ".x-form-item" (sure, you must to use Ext.baseCSSPrefix). Than, you can get id from HTMLElement and get ExtJS Component by id. Here there is the code.

Я модифицировал демку "absform.js" из поставки экста, чтобы показать вам возможности делегирования у компоненты тултипа. Для начала с помощью файрбага я увидел, что элементы формы (поля) имеют класс .x-form-item (конечно, правильнее вместо .x- использовать baseCSSPrefix). Из tip.triggerElement, который является экземпляром или подклассом HTMLElement, можно взять айдишник и затем с помощью getCmp получить полноценную компоненту экста.

Ext.require([
    'Ext.data.*',
    'Ext.form.*',
    'Ext.layout.container.Absolute',
    'Ext.window.Window',
    'Ext.tip.*'
    ]);
 
var tip, states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [
        {
        "abbr": "AL",
        "name": "Alabama"
    },
        {
        "abbr": "AK",
        "name": "Alaska"
    },
        {
        "abbr": "AZ",
        "name": "Arizona"
    }
    ]
});
 
Ext.onReady(function () {
    var form = Ext.create('Ext.form.Panel', {
        layout: 'absolute',
        url: 'save-form.php',
        defaultType: 'textfield',
        border: false,
 
        items: [{
            fieldLabel: 'Send To',
            fieldWidth: 60,
            msgTarget: 'side',
            allowBlank: false,
            x: 5,
            y: 5,
            name: 'to',
            anchor: '-5' // anchor width by percentage
        }, {
            fieldLabel: 'Subject',
            fieldWidth: 60,
            x: 5,
            y: 35,
            name: 'subject',
            anchor: '-5' // anchor width by percentage
        }, {
            x: 5,
            y: 65,
            name: 'msg',
            value: 'test',
            xtype: 'textarea',
            anchor: '-5' // anchor width and height
        }, {
            boxLabel: 'Some checkbox',
            xtype: 'checkbox',
            name: 'my',
            x: 5,
            y: 155
        }, {
            x: 5,
            y: 175,
            xtype: 'combobox',
            fieldLabel: 'Choose State',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            value: 'AZ',
            anchor: '-5'
        }],
        listeners: {
            render: function (f) {
                tip = Ext.create('Ext.tip.ToolTip', {
                    target: f.el,
                    delegate: '.x-form-item',
                    trackMouse: true,
                    renderTo: Ext.getBody(),
                    listeners: {
                        beforeshow: function (tip) {
                            var comp = Ext.getCmp(tip.triggerElement.id),
                                v, str, label;
                            if (comp) {
                                v = comp.getValue();
                                if (!Ext.isEmpty(v)) {
                                    if (Ext.isBoolean(v)) {
                                        str = "Checkbox (or smth boolean) {0} value = {1}";
                                        label = 'box';
                                    } else {
                                        str = "Textfield (or textarea, combo, etc.) {0} value = {1}";
                                        label = 'field';
                                    }
                                    label = comp[label + 'Label'] || "noname";
                                    tip.update(Ext.String.format(str, label, v));
                                    return true;
                                }
                            }
                            tip.clearTimers();
                            return false;
                        }
 
                    }
                });
            }
        }
    });
 
    var win = Ext.create('Ext.window.Window', {
        title: 'Resize Me',
        width: 500,
        height: 300,
        minWidth: 400,
        minHeight: 200,
        layout: 'fit',
        plain: true,
        items: form,
 
        buttons: [{
            text: 'Send'
        }, {
            text: 'Cancel'
        }]
    });
 
    win.show();
});

@темы: ExtJS 4