ExtJs and Flash

웹 페이지를 만들다보면 레이어드 팝업에 대한 고민을 한번쯤 하게된다.

그냥 팝업으로 구현 할것인가? 레이어드 팝업으로 뺄것인가?
더군다나 ExtJS 같은 UI Framework 도입 이전의 과도기 라면 더더욱 구현하기 애매할 것이다.
... ...
두가지 모두 구현해본 결과 결론은 UI Framework 도입 이전 이라도 부분적으로 UI Framework 의 힘들 빌리는것이
좀더 구현하기 수월하다는 것이다.

그만큼 구조화된 레이어드 팝업을 새로 구현하는것은 쉽지 않은 일이다.

잘 정의된 레이어드 팝업이 포함해야할 기능은 아래와 같다.
1. Resizable
2. Flsah 탑재가능
3. Event Driven

ExtJS 를 이용해 이러한 기능을 만족시키는 코드는 아래와 같다.
Ext.ux.FlashPlugin = function() {
    this.init = function(ct) {
        ct.flashTemplate = new Ext.XTemplate(
            '<div>',
            '<object id="flash-{id}" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="{swfWidth}" height="{swfHeight}">',
            '<param name="movie" value="{swf}" />',
            '<param name="quality" value="high" />',
            '<param name="wmode" value="transparent" />',
            '<param name="flashvars" value="{computedflashvars}" />',
            '<param name="allowScriptAccess" value="domain" />',
            '<param name="align" value="t" />',
            '<param name="salign" value="TL" />',
            '<param name="swliveconnect" value="true" />',
            '<param name="scale" value="showall" />',
            '<embed name="flash-{id}" src="{swf}" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="{computedflashvars}" type="application/x-shockwave-flash" width="{swfWidth}" height="{swfHeight}" wmode="transparent" allowScriptAccess="always" swliveconnect="true" align="t" salign="TL" scale="showall"></embed>',
            '</object>',
            '</div>'
        );
        ct.flashTemplate.compile();
        ct.renderFlash = function() {
            if (this.flashvars && (typeof this.flashvars == 'object')) {
                var tempflashvars = Ext.apply({}, this.flashvars);
                for (var key in tempflashvars) {
                    if (typeof tempflashvars[key] == 'function') {
                        tempflashvars[key] = tempflashvars[key].call(this, true);
                    }
                };
                this.computedflashvars = Ext.urlEncode(tempflashvars);
            }
            this.swfHeight = this.body.getSize().height -2;
            this.swfWidth = this.body.getSize().width -2;
            if (this.body.first()) this.flashTemplate.overwrite(this.body.first(),this);
            else this.flashTemplate.insertFirst(this.body,this);
        };
        ct.loadFlash = function(config) {
            Ext.apply(this,config);
            this.renderFlash();
        };
        ct.on('afterlayout',ct.renderFlash, ct);
    };
};

그리고 사용법은 아래와 같다.

function start()
{

    var form = new Ext.Panel({
            layout: 'fit',
            height:240,
            width: 405,
            swf: ' ',
            flashvars: {data: '', height: 100, width: 100 },
            plugins: new Ext.ux.FlashPlugin(),
            region:'north' });

    form.on('resize', function(Panel, w, h)
    {
   form.swf = '';
           
 }
    );
   
    var window = new Ext.Window({
        title: 'Resize Me',
        width: 500,
        height:300,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:1px;',
        buttonAlign:'center'

      
    });
    window.add( form ); 
    window.show();
   
   
}

위의 예제는 아래와 같이 동작한다.
1. 레이어드 팝업에 flash 를 plugin 을 이용하지 않고 붙여넣었다.
2. resize 될때마다 event 를 받아서 flash도 resize 한다.

이와같은 코드는 fusion chart 처럼 flash 기반의 chart lib를 사용할때 유용하다.
fusion chart 는 resize 될때마다 flash를 다시 load 해야하므로
위 예제의
form.on('resize', function(Panel, w, h) 
{
   form.swf = ''; 
 }
부분에서 flash 에 넘겨주는 사이즈를 조절하게 하면 된다.

-hazard-