ExtJs初探（二）- 窗体（eclipse+Springboot+maven）

配置完毕（承接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自己试试。

ExtJs初探（二）- 窗体（eclipse+Springboot+maven）

猜你喜欢