Extjs-实用工具 获取文本所占的高度和宽度 Ext.util.TextMetrices

公共部分

<body>
  <div id='text'></div>
  <div id='result'></div>
</body>
1.可以获取页面上文本所占的高度和宽度
<script type='text/javascript' defer>  
   	Ext.onReady(function() {
    	//createInstance创建一个实例
    	var metrics = Ext.util.TextMetrics.createInstance('text');
    	/*
    		getSize(),Ext自动得到id='text'这个标签上定义的CSS样式,并以此计算文本的大小
    		如果把我的坐标显示在标签中,坐标为宽61高18
    	*/
    	var size = metrics.getSize('我的坐标');
    	Ext.getDom('result').innerHTML += size.width + ',' + size.height;

	});
</script>
2.对于已经创建好的metrics实例
我们改变文本显示相关的CSS样式,可以使用bind(),它的参数是HTML上的标签,它将这个标签的CSS样式复制过来,用作计算下一次的计算文本的高度和宽度的依据
代码
<script type='text/javascript' defer>  
   	Ext.onReady(function() {
    	var metrics = Ext.util.TextMetrics.createInstance('text');
    	var size = metrics.getSize('我的坐标');
    	Ext.getDom('result').innerHTML += size.width + ',' + size.height;
    	//复制CSS相关样式
    	metrics.bind('result');
    	var size = metrics.getSize('复制了CSS相关样式');
    	Ext.getDom('result').innerHTML += size.width + ',' + size.height;
	});
</script>
3.设置文本最大宽度
<script type='text/javascript' defer>  
   	Ext.onReady(function() {
	    var metrics = Ext.util.TextMetrics.createInstance('result');
	    //设置文本最大宽度
	    metrics.setFixedWidth(100);
	    var size = metrics.getSize('我的坐标');
	    Ext.getDom('result').innerHTML += size.width + ',' + size.height + '<br />';
	});
</script>


你可能感兴趣的:(工具)