初學ExtJs,做項目的時候想做一個這樣的效果:點擊按鈕彈出對話方塊,之前一直是使用EasyUi來做的, EasyUi裡有Dialog,用起來很方便,但是現在轉移到ExtJs上後,發現沒有Dialog這樣的架構,在網上找了沒有找到這樣的 控制項,於是搜尋一下關於ExtJs 對話方塊的實現方法,現在將實現結果貼出來,如果有什麼想法,希望多多留言! Ext.get("btn_edit").on("click", function () { var form = new Ext.FormPanel({ //labelAlign: 'top', bodyStyle: 'padding:5px 5px 0', layout: 'form', items: [ { xtype: 'textfield', name: 'title', anchor: '100%' }, { xtype: 'htmleditor', border: true, id: 'context', plugins: [ Ext.create('Ext.zc.form.HtmlEditorImage') ], height: 400, anchor: '100%' } ], buttonAlign: 'center', buttons: [ { text: '儲存', icon: '../../../Images/extjs/disk.png', handler: function () { var text = form.getForm().findField('context').getValue(); alert(text); } }, { text: '關閉', icon: '../../../Images/extjs/cross.png', handler: function () { win.close(this); } } ] }); var win = Ext.create("Ext.window.Window", { title: "編輯", //標題 draggable: false, icon: '../../../Images/extjs/pencil.png', height: 600, //高度 width: 800, //寬度 layout: "fit", //視窗布局類型 modal: true, //是否模態視窗,預設為false resizable: false, items: [form] }); win.show(); });}); 講解: 首先用一個按鈕監聽器,監聽按鈕的動作,當點擊按鈕後,先建立一個FormPanel,這個面板裡建立的是一些基本的控制項,這裡就不講了, 然後建立一個視窗,將剛才建立的面板作為這個視窗的items,這樣一個form表單的視窗就建立好了,接下來就是將它顯示出來, 如上面的代碼win.show(),注意,同時將視窗代碼設定成modal:true,這樣就是一個完整的視窗顯示!