继续ext3.x，扩展2

简单的扩展，让表单的tooltip更简单，博客园写东西没预览功能吗？下面是预览效果，哈哈，看了下还好

/*
** edit by dickhead
** goal 扩展form表单元素，可以便捷的配置其tooltip 。
** 以插件或者其他方便插入的方式实现的扩展
** time 2011-08-04 23:06:45
*/

//<extension>
(function () {
    var fieldTipTpl = new Ext.Template([
            '<div style="padding-left:18px;border-bottom:1px dotted gray;',
            'background:url(http://images.findicons.com/files/icons/99/office/16/info.png) no-repeat left center;',
            'font-weight:bold;padding-bottom:2px;">提示</div>',
            '<div style="padding:3px 2px;">{tip}</div>'
        ].join(''));
    fieldTipTpl.compile();
    /*
    ** @cfg tooltip {string} 一段描述性文字，可以是html代码段
    */
    Ext.form.Field.prototype.afterRender = Ext.form.Field.prototype.afterRender.createSequence(function () {
        if (this.tooltip) {
            var el = this.el.next() || this.el; //为什么要next?因为triggerfield(日期/下拉等空间)后面借这个img标签。
            var tip = new Ext.ToolTip({
                target: el, autoHide: false, anchor: 'left',
                html: fieldTipTpl.apply({ tip: this.tooltip }),
                showDelay: 100000,
                onTargetOver: Ext.emptyFn
            });
            this.on('focus', function () {
                tip.show();
            });
            this.on('blur', function () {
                tip.hide();
            });
            this.on('destroy', function () {
                tip.destroy();
            });
        }
    });
})();
//</extension>

Ext.onReady(function () {
    new Ext.form.FormPanel({
        border: false,
        items: [
            { xtype: 'textfield', tooltip: '不是你的就不是你的，该放手的就要放手，包括内存资源。',
                fieldLabel: '兴趣史'
            },
            { xtype: 'datefield', fieldLabel: '选择个日期',
                tooltip: 'Ext为什么叫ext。。。'
            }
        ],
        renderTo: 'main'
    });
});