Tools2013. 6. 9. 19:19

아주 깔끔하고 가벼운 놈이다. ^^

기능도 상당하다.~


'Tools' 카테고리의 다른 글

Web 화면 설계 툴 - PowerMockUp  (0) 2013.02.02
Posted by 베니94
자바스크립트/Ext JS2013. 5. 25. 14:22

ExtJs 4.2 버전에서 전에 없던 툴팁 버그가 발생한다. 아래 그림과 같이 툴팁의 길이가 동적으로 늘어나지 않고 

텍스트가 일정크기 이상으로 늘어나지 않고 갇히게 된다.



이를 해결하기 위해 아래와 같이 Ext.tip.QuickTip클래스를 override한다.


Ext.override(Ext.tip.QuickTip, {
    helperElId: 'ext-quicktips-tip-helper',
    initComponent: function ()
    {
        var me = this;


        me.target = me.target || Ext.getDoc();
        me.targets = me.targets || {};
        me.callParent();


        // new stuff
        me.on('move', function ()
        {
            var offset = me.hasCls('x-tip-form-invalid') ? 35 : 12,
                helperEl = Ext.fly(me.helperElId) || Ext.fly(
                    Ext.DomHelper.createDom({
                        tag: 'div',
                        id: me.helperElId,
                        style: {
                            position: 'absolute',
                            left: '-1000px',
                            top: '-1000px',
                            'font-size': '12px',
                            'font-family': 'tahoma, arial, verdana, sans-serif'
                        }
                    }, Ext.getBody())
                );

            if (me.html && (me.html !== helperEl.getHTML() 
            		|| me.getWidth() !== (helperEl.dom.clientWidth + offset)))
            {
                helperEl.update(me.html);
                me.setWidth(Ext.Number.constrain(helperEl.dom.clientWidth + 
                	offset, me.minWidth, me.maxWidth));
            }
        }, this);
    }
});

적용 이후 아래와 같이 정상적으로 툴팁이 보여진다.


// 출처 : http://stackoverflow.com/questions/15834689/extjs-4-2-tooltips-not-wide-enough-to-see-contents

Posted by 베니94
자바스크립트/Ext JS2013. 5. 22. 16:28
Ext.onReady(function() {
	/***
	 * Date : 2013.05.22
	 * Desc : 아래 코드는 Ext.form.field.Text클래스를 override를 통해 기능을 변경한 예제이다.
	 * 
	 * 		 
	 */
	Ext.define('Cookbook.overrides.TextField', {
		override: 'Ext.form.field.Text',

		onRender: function(){
			/***
			 *  기존 함수의 동작을 확장하기 위해 callParent를 사용한다.
			 *  이때 필요한 인수를 전달하여 원래 함수를 호출할 수 있다.
			 *  아래는 단순히 텍스트를 추가하는 방법을 보여준다.
			 *  간단하게 onRender함수 실행시 간단한 텍스트를 모든 텍스트에서
			 *  동일하게 표시할 수 있도록 되었다.
			 */
			this.callParent(arguments); // executes the Ext.form.field.Text.onRender function
			// Ext.form.field.Text.superclass.onRender.apply(this, arguments); // executes the Ext.form.field.Base.onRender function

			Ext.core.DomHelper.append(this.el, '
' + this.infoText + '
'); } }); Ext.application({ name: 'Customer', launch: function(){ Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ xtype: 'form', title: 'Security Question Form', defaultType: 'textfield', items: [{ fieldLabel: 'Security Question', name: 'securityQuestion', allowBlank: false, infoText: 'You are required to write a security question for your account.' }, { fieldLabel: 'Security Answer', name: 'securityAnswer', allowBlank: false, infoText: 'Please provide the answer to your security question.' }] }] }); } }); }); // 출처 : Ext JS4 Web Application Development Cookbook
Posted by 베니94