sonicneo

หลายครั้งที่เราเขียนโปรแกรมต้องมีการเปิดหน้าต่างใหม่ของ browser หรือที่เราเรียกว่า popup  เพื่อให้ทำงาน
บางอย่างแล้วให้กลับมา set ค่าต่างๆให้หน้าหลัก  การทำอย่างนี้หมายความว่าเราต้องมีหน้าต่าง 2 อันที่เปิดใช้งาน  ทำให้ให้ไม่สามารถล็อกหน้าต่างหน้าหลักได้  แต่บางคนก็บอกว่าก็ set ให้มันเป็น modal ซิ (จะว่าไปก็ใช่ แต่การกำหนดเป็น modal นั้นมีผลกระทบต่อตัวแปล  ทำให้มันไม่รู้จักตัวแปลหน้าต่างตัวหลัก)

ตั้งแต่ web 2.0 เกิดขึ้นมาเริ่มมี technic เกิดขึ้นมาคือการใช้ div เข้ามาช่วย  แล้ว block หน้าต่างหลักไว้  (แต่ไม่มีผลกับตัวแปล  เหมือนการเปิด window ใหม่ )  ซึ่งวิธีนี้ทำให้เรายังมีหน้าหลักหน้าเดียวและมีแค่ popup dialog เท่านั้น  ซึ่งจะเหมือนกับการเขียน application ทั่วๆไป

พูดมาตั้งเยอะเข้าเรื่องเลยดีกว่า  วันนี้จะมาแนะนำ Dialog Popup ด้วย ExtJs 

ตัวอย่าง 

สร้างปุ่มที่หน้า html  

<input type="button" id="show-btn" value="Search">

สร้าง div เพื่อที่จะแสดง dialog

  <div id="hello-win" class="x-hidden">

    <div class="x-window-header">Dialog</div>

    <div id="hello-tabs">

        <!-- Auto create tab 1 --> 

        <div class="x-tab" title="Search Profile">

            <iframe id="IFrame"  name="IFrame" scrolling="auto" style="width:850px; height:500px; border: 0px"  src="${pageContext.request.contextPath}/initSearchProfile.run"  frameborder="0"></iframe>

        </div>

    </div>

</div>

 เขียน java script เมื่อกดปุ่มแล้วเรียกให้ dialog ทำงาน

$(document).ready(function() {// ใช้ jquery ในการ load ค่าหรือ registry 

var win;

    var button = Ext.get('show-btn');

    button.on('click', function(){

        // create the window on the first click and reuse on subsequent clicks

        if(!win){

            win = new Ext.Window({

             modal : true,

                applyTo     : 'hello-win',

                layout      : 'fit', 

                width       : 900,

                height      : 600,

                closeAction :'hide',

                plain       : true,                

                items       : new Ext.TabPanel({

                    applyTo        : 'hello-tabs',

                    autoTabs       : true,

                    activeTab      : 0,

                    deferredRender : false,

                    border         : false

                }),

                buttons: [{

                    text     : 'Submit',

                    disabled : true

                },{

                    text     : 'Close',

                    handler  : function(){

                        win.hide();

                    }

                }]

            });

        }

        win.show(button);

    });

});

เพียงเท่านี้เราก็จะได้ dialog สวยๆมาใช้งานแล้วครับ

edit @ 5 Sep 2008 09:16:54 by sonicneo