Ext中util

最新推荐文章于 2019-10-29 21:22:16 发布

ItJavawfc

最新推荐文章于 2019-10-29 21:22:16 发布

阅读量1.1k

点赞数

文章标签： Ext中util

本文链接：https://blog.csdn.net/ItJavawfc/article/details/39123393

版权

在Ext.util包下要学习的内容：

下面首先将第一个方法：

1.需求:当鼠标移动到一个div上面的时候，div颜色要变换一下，鼠标移出后恢复
用到的方法：

Ext.util.CSS.createStyleSheet，APIDOC解释如下

createStyleSheet( cssText, id ) : CSSStyleSheet

Creates a stylesheet from a text blob of rules. These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.

它自动创建一个样式。

Ext.get("d1").addClsOnOver("c");

addClsOnOver( className, [testFn], [scope] ) : Ext.dom.Element CHAINABLE

Sets up event handlers to add and remove a css class when the mouse is over this element

增加一个css的类

以上两个结合运用的实例如下：

.jsp文件：

<body>
     <center>
        <br/><div id='d1'>123456</div>
     </center>
  </body>

看看css.css

(function(){
	Ext.onReady(function(){
		Ext.util.CSS.createStyleSheet(".c{color:red}","red");
		Ext.get("d1").addClsOnOver("c");
	})
})();

当我们鼠标移上去之后会看到效果：div里面的元素变红。

再看看我们的dom元素的变化：

2)我们看一下CSS中的第二个方法：

getRule( selector, refreshCache ) : CSSStyleRule

Gets an an individual CSS rule by selector(s)

通过选择器得到样式表中的你所需要的值：

var cssobj=Ext.util.CSS.getRule(".c",true);
alert(cssobj.style.color);

3)swapStyleSheet( id, url )
// Dynamically swaps an existing stylesheet reference for a new one

这个方法是用来干什么的呢？

一般网站上需要动态的改变皮肤的时候需要用到这个方法

下面我们解决一个需求：当单机按钮后，当鼠标移到div上的内容时就会变不同的颜色

.jsp中加入下面内容：

<div id="d2">asssssjwfc</div>
        <input type="button" value="change" id="b1"/>

在css.js中加入下面内容：

	var i=1;
		Ext.get("b1").on("click",function(){
			if(i%2==0){
				Ext.util.CSS.swapStyleSheet("one","one.css");
				Ext.get("d2").addClsOnOver("col");

				i++;
			}else{
				Ext.util.CSS.swapStyleSheet("two","two.css");
				Ext.get("d2").addClsOnOver("col");

				i++;
			}
		})

这里需要两个.css文件：

one.css

.col{color:red}

two.css

.col{color:blue}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

看看这个方法：

removeStyleSheet( id )

Removes a style or link tag by id

Parameters

id : String

The id of the tag

在.jsp中加入如下内容：

<div id="d3" class="c">请移出我身上的样式</div><br/>
    <input type="button" value="remove" id="b2"/>

在css.js中加入如下内容：

//4.removeStyleSheet( id )
//Removes a style or link tag by id
		Ext.get("b2").on("click",function(){
			Ext.util.CSS.removeStyleSheet("red");
		})
	})

关于这行代码：

			Ext.util.CSS.removeStyleSheet("red");

那么当点击按钮的时候，css样式自动去除。

updateRule( selector, property, value ) : Boolean

Updates a rule property

Parameters

selector : String/String[]

If it's an array it tries each selector until it finds one. Stops immediately once one is found.
property : String

The css property or a cssText specification eg "color:red;font-weight:bold;text-decoration:underline"
value : String

The new value for the property

在css.js中添加下面代码就会看到单击按钮后样式得到更新：

	
		Ext.get("b3").on("click",function(){
			Ext.util.CSS.updateRule(".c","color","#933623");
		});

在jsp页面中：

    <div id="d4" class="c">更新我身上的样式</div><br/>
    <input type="button" value="update" id="b3"/>

下面这个方法类似于延迟触发。

Ext.onReady(function(){
	var dt=new Ext.util.DelayedTask(function(){
		alert("--------");
	});
	Ext.get("b5").on("click",function(){
		dt.delay(3000);
	})
	dt.cancel();
})

Ext.util.FormatView source...singleton

举几个例子：

Ext.onReady(function(){
	//1.ellipsis():void    读出前部分类容，后边用...代替了所有的
	var str="www.uspcat.comwfc@jji";
	//alert(Ext.util.Format.ellipsis(str,5));
	//2.capitalize():void   //将首字母变成大写
	//alert(Ext.util.Format.capitalize(str));
	//3.data()   格式化语言基本上都是通用的，Java中怎么写，ExtJS中怎么写
	//alert(Ext.util.Format.date(new Date(),"Y年-m月-d日"));
	//alert(Ext.util.Format.substr(str,0,5));
	//alert(Ext.util.Format.number("12344556","0,000.00"));
	//将换行符直接转换成</br>
	alert(Ext.util.Format.nl2br("asd\njiko"));
	
	
	
})