Ext Js入门第8篇-适用工具

最新推荐文章于 2019-09-27 17:31:56 发布

淡忘过去努力未来

最新推荐文章于 2019-09-27 17:31:56 发布

阅读量386

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_29258777/article/details/72730530

版权

web前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.Ext.util.HashMap与Ext.util.MixedCollection

该方法类似java的HashMap，存放key和value

<script>
	   var map=new Ext.util.HashMap();
	   map.add("java",89);
	   map.add("spring",92);
	   //判断是否包含某个key
	   document.writeln(map.containsKey("java")+"</br>");
	   //判断多少对key-value
	   document.writeln(map.getCount()+"</br>");
	   //删除指定key
	   document.writeln(map.remove("java")+"</br>");
	</script>

2.使用Exit.util.Cookies操作Cookie

<body>
		<input type="text" id="myName" /></br>
		<button οnclick="Ext.util.Cookies.set('name',Ext.fly('myName').getValue(),new Date(2020,1,1));">添加cookie</button>
	    <button οnclick="alert(Ext.util.Cookies.get('name'));">访问cookies</button>
	    <button οnclick="Ext.util.Cookies.clear('name');">清除cookies</button>
	</body>

3.包装点击事件 Ext.util.ClickRepeater

当鼠标按下时，被包装的元素就会激发click事件，除此之外，他还有一个作用：用户单击一次之后，Ext Js会被动按指定事件间隔不断激发click事件

<body>
		<button id="bn">单机我</button>
	</body>
	<script>
		var c1=new Ext.util.ClickRepeater("bn",
		{
			delay:1000,//指定开始重复触发click事件之前的延迟时间
			interval:4000,//指定重复触发click事件之间的时间间隔
		    stopDefault:true,//停止该元素上的click事件的默认行为
		    handler:function(){
		    	alert("单击该按钮");
		    },
		    pressedCls:"pressed"
		});
	</script>

4.使用ext.util.TaskRunner和Ext.TaskManager

两者都是用于周期内执行某个计划

还有很多其他的工具，这里不一一列举了，大家可以网上搜搜

5.AJax支持

<body>
		<form id="userForm">
			用户名：<input type="text" name="user" id="user" /></br>
			喜欢的书：<select multiple="multiple" name="books" id="books">
				<option value="java">java</option>
				<option value="javaee">javaee</option>
			</select></br>
			<input id="load" type="button" value="异步请求" />
		</form><hr/>
		<div id="show"></div>
	</body>
	<script>
		//为id为load的组件的click事件绑定事件处理
		Ext.fly("load").on("click",function()
		{
			Ext.Ajax.request({
				url:'pro',//请求url
				method:'POST',//请求方式
				form:'userForm',//请求userForm作为参数
				params:{//指定请求参数
					user:Ext.fly('user').getValue(),
					books:Ext.fly('books').getValue()
				},
				//指定响应回调函数
				succes:function(response){
					//使用show元素显示服务器响应
					Ext.DomHelper.overwrite('show',response.responseText);
				}
			});
		});
	</script>

java后台代码

@RequestMapping("/pro")
public class testController {
    public void service(HttpServletRequest request,HttpServletResponse response) throws IOException{
    	response.setContentType("text/html;charset:GBK");
    	PrintWriter out=response.getWriter();
    	//获取请求参数
    	String user=request.getParameter("user");
    	String [] books=request.getParameterValues("books");
    	//生成Html字符串响应
    	out.print(user+"您现在的时间是："+new java.util.Date());
    }
}