ExtJs初探（二）- 窗體（eclipse+Springboot+maven）
阿新 • • 發佈：2018-12-12
配置完畢（承接ExtJs初探（一）- 下載及配置入專案（eclipse+Springboot+maven））後進入到ExtJs的各種方法用法和控制元件生成，直接上栗子和效果圖。部分程式碼參考自：http://www.cnblogs.com/iamlilinfeng/archive/2012/06/18/2553627.html
一、寫個窗體內容的html，命名為：ExtWindowPage.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Insert title here</title> </head> <body> <div class = "div-content1" style = "margin-right: 20px; margin-left: 20px; margin-top:20px"> <p>builds目錄是Extjs壓縮後的程式碼，體積更小，載入更快。</p> <p>docs是Extjs的文件，包括Ext的Api，必備工具。</p> <p>example是官方的示例，學習就從研究這裡面的程式碼開始。</p> <p>locale是多國語言包，ext-lang-zh_CN.js是簡體中文。（在專案中如果覺得開發包臃腫，可以把除了zh-cn外的都刪除）</p> <p>overview是Extjs功能描述。</p> <p>pkgs是Extjs各部分功能的打包檔案。</p> <p>resource是Extjs中要用到的圖片和樣式表。</p> <p>src目錄是未壓縮的原始碼目錄。</p> <p>bootstrap.js是ExtJS庫的引導檔案, 通過引數可以自動切換ext-all.js和ext-all-debug.js。</p> <p>ext-all.js檔案是ExtJS的核心庫,是必須要引入的。</p> <p>ext-all-debug.js檔案是ext-all.js的除錯版。</p> </div> </body> </html>
對應的controller對映為：
@GetMapping("/tryopen")
public String tryopen() {
return "/modelhtml/ExtWindowPage";
}
二、帶按鈕的頁面，點選響應窗體事件
<head> <meta charset="UTF-8"/> <title>Insert title here</title> <link rel="stylesheet" type="text/css" th:href="@{/static/js/extjs6.6.0/resources/theme-triton/resources/theme-triton-all.css}" /> </head> <body> <br></br> 點選按鈕彈窗： <input type="button" id="EP_XFYSR_if" value= "btn" class = "inpt"/> <br></br> </body> <script th:src="@{/static/js/extjs6.6.0/ext.js}"></script> <script th:src="@{/static/js/extjs6.6.0/ext-all.js}"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> Ext.onReady(function () { console.log("extjs回撥"); $("#EP_XFYSR_if").click(function(){ testUrl("tryopen"); }); }); function testUrl(url){ Ext.Ajax.request({ method: 'get', url: 'http://127.0.0.1:9999/'+url, headers: { 'Content-Type': 'application/x-json;utf-8' }, params: {}, timeout: 6000, success:function(response, options){ var html = response.responseText; var win = new Ext.Window({ title: '視窗', width: 700, height: 500, html: html, resizable: true, modal: true, closable: true, maximizable: true, minimizable: true }); win.show(); }, failure:function(){ Ext.Msg.alert('提示', '失敗。'); } }); } </script>
這裡我使用的是自己的本地html所在地址，跨域地址會返回錯誤，可以改url自己試試。