- 浏览: 314897 次
- 性别:
文章分类
最新评论
-
i042416:
分析在哪?
angular分析 -
何盆盆:
你好,请问您这是Extjs3还是Extjs4
ExtJs源码分析与学习—ExtJs事件机制(一) -
124753561:
引用引用引用引用引用[u][u][u][u][i][i][i] ...
Subvision SVN 服务端与客户端的安装 -
谷超:
请问一下例子中itext是什么版本的?
利用iText生成word文档例子参考 -
geosmart:
正好要用到执行字符串中方法,学习了
java中利用反射机制实现调用给定为字符串的方法名
Ext提供了一个很有用的工具类Ext.util.TextMetrics,利用该类可以很方便的为一段文字提供一个精确象素级的测量,以便可以得到某段文字的高度和宽度。该类的实现采用了单例模式,即当调用该类时,该类内部属性shared已实例,下次调用时不需再实例化。先看函数的定义
Ext.util.TextMetrics = function(){ var shared; return { measure : function(el, text, fixedWidth){ if(!shared){ shared = Ext.util.TextMetrics.Instance(el, fixedWidth); } shared.bind(el); shared.setFixedWidth(fixedWidth || 'auto'); return shared.getSize(text); }, createInstance : function(el, fixedWidth){ return Ext.util.TextMetrics.Instance(el, fixedWidth); } }; }();
该函数是自执行函数,执行完后该类提供了两个方法measure和createInstance,分别用来测量元素el的大小和创建实例。
方法measure中三个参数为el测试的DOM对象,text要测量的文字,fixedWidth设置该值可以根据该值压缩文字的多行显示,从而根据行数的不同返回文本的高度,不设置时会默认根据文本显示的行数返回内容的高度。该方法首先实例化要测量的对象,然后绑定el,绑定的过程会设置其与字体相关的css样式,最后返回一段文字的大小。
上面方法中调用的函数实际上在Ext.util.TextMetrics.Instance中定义,函数主体如下
Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){ ... var instance = { ... }; instance.bind(bindTo); return instance; };
该函数实际上返回闭包变量instance,Ext.util.TextMetrics.Instance中封装了要实现的函数,首先看Instance中的变量
var ml = new Ext.Element(document.createElement('div')); document.body.appendChild(ml.dom); ml.position('absolute'); ml.setLeftTop(-1000, -1000); ml.hide(); if(fixedWidth){ ml.setWidth(fixedWidth); }
该类定义了辅助div,隐藏显示,用来存放要测试的文字,下面看闭包变量instance中的函数
/** * 返回一个指定文字的尺寸。该文字内置元素的样式和宽度属性 * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p> * Returns the size of the specified text based on the internal element's style and width properties * @param {String} text 要测量的文字 The text to measure * @return {Object} An object containing the text's size {width: (width), height: (height)} */ getSize : function(text){ ml.update(text); var s = ml.getSize(); ml.update(''); return s; },
注意返回大小后把ml内容清空
/** * 绑定某个样式的TextMetrics实例,使得被渲染之文字重新获得CSS样式。 * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p> * Binds this TextMetrics instance to an element from which to copy existing CSS styles * that can affect the size of the rendered text * @param {String/HTMLElement} el The element, dom node or id */ bind : function(el){ ml.setStyle( Ext.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing') ); },
绑定时只设置与字体相关的属性
/** * 对内置的测量元素设置一个固定的宽度。 * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p> * Sets a fixed width on the internal measurement element. If the text will be multiline, you have * to set a fixed width in order to accurately measure the text height. * @param {Number} width The width to set on the element */ setFixedWidth : function(width){ ml.setWidth(width); }, /** * 返回指定文字的宽度 * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p> * Returns the measured width of the specified text * @param {String} text The text to measure * @return {Number} width The width in pixels */ getWidth : function(text){ ml.dom.style.width = 'auto'; return this.getSize(text).width; }, /** * 返回指定文字的高度,对于多行文本,有可能需要调用 {@link #setFixedWidth} 。 * <p><b>Only available on the instance returned from {@link #createInstance}, <u>not</u> on the singleton.</b></p> * Returns the measured height of the specified text. For multiline text, be sure to call * {@link #setFixedWidth} if necessary. * @param {String} text The text to measure * @return {Number} height The height in pixels */ getHeight : function(text){ return this.getSize(text).height; }
最后为对象Ext.Element提供了一个测量文本宽度的方法
Ext.Element.addMethods({ /** * 返回传入文本的宽度,或者该元素下文本的宽度。用该方法即可 * Returns the width in pixels of the passed text, or the width of the text in this Element. * @param {String} 要测试的内容 text The text to measure. Defaults to the innerHTML of the element. * @param {Number} min (Optional) The minumum value to return. * @param {Number} max (Optional) The maximum value to return. * @return {Number} The text width in pixels. * @member Ext.Element getTextWidth */ getTextWidth : function(text, min, max){ return (Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width).constrain(min || 0, max || 1000000); } });
下面综合看一个例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ext.util.TextMetrics测试</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../ext-3.3.1/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="../ext-3.3.1/ext-all-debug-w-comments.js"></script> <script type="text/javascript" src="../ext-3.3.1/src/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="../ext-3.3.1/src/debug.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif'; Ext.QuickTips.init(); var textEl = Ext.fly('text'); var textWidth = textEl.getTextWidth(); alert(textWidth); textEl = Ext.fly('text2'); var size = Ext.util.TextMetrics.measure(textEl, textEl.dom.innerHTML); alert('width:'+size.width+' height:'+size.height); //多行的测试,设置宽度时会压缩内容,再根据压缩后的行数返回其高度 textEl = Ext.fly('text3'); var size = Ext.util.TextMetrics.measure(textEl, textEl.dom.innerHTML,50); alert('多行的测试 width:'+size.width+' height:'+size.height); //返回一个唯一的TextMetrics实例,直接绑定到某个元素和复用, //这样会减少在每个测量上初始样式属性的多次调用。 var metrics=Ext.util.TextMetrics.createInstance('text3'); metrics.setFixedWidth(100); var size=metrics.getSize("中华人民共和国中华人民共和国" +"中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国" +"中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国"); Ext.MessageBox.alert("getsize",String.format("width:{0}px\theight:{1}px",size.width,size.height)) }); </script> </head> <body> <div id='text'> 要测试的文本要测试的文本要测试的文本 </div> <div id='text2'> 要测试的文本要测试的文本要测试的文本 </div> <div id='text3'> 要测试的文本要测试的文本要测试的文本 要测试的文本要测试的文本要测试的文本 要测试的文本要测试的文本要测试的文本 </div> </body> </html>
工具类Ext.util.TextMetrics到此分析完毕。
发表评论
-
ExtJs源码分析与学习—Ext.ToolTip应用
2011-12-29 14:18 1789源码待分析,先粘一例子备用 // ... -
ExtJs源码分析与学习—遮罩层
2011-09-06 16:49 4726类Ext.LoadMask ... -
ExtJs源码分析与学习—Ext.UpdateManager
2011-09-06 16:12 2131如果想让html页面中任意元素自动局部刷新,而不是整 ... -
ExtJs源码分析与学习—ExtJs元素Element(六)
2011-06-08 10:41 1750批量操作元素Ext.CompositeElementLite ... -
ExtJs源码分析与学习—ExtJs元素Element(五)
2011-06-07 17:35 1887元素的查询Ext.DomQuery 该 ... -
ExtJs源码分析与学习—ExtJs元素Element(四)
2011-06-07 17:17 2939元素的操作Ext.DomHelper ... -
ExtJs源码分析与学习—ExtJs元素Element(三)
2011-06-07 17:06 998Ext.Element扩展 通过Ex ... -
ExtJs源码分析与学习—ExtJs元素Element(二)
2011-06-07 16:42 2576元素操作核心类Ext.Elemen ... -
ExtJs源码分析与学习—ExtJs元素Element(一)
2011-06-07 15:47 2073从这一节开始 ... -
ExtJs源码分析与学习—ExtJs事件机制(六)
2011-06-07 11:25 1437最后把涉及到Ext事件的相关类图贴到这里 ... -
ExtJs源码分析与学习—ExtJs事件机制(五)
2011-06-07 11:15 3009最近一直忙着做产品,所以好久没有写文章了,下面接着 ... -
Ext 组件操作总结——会不断完善
2011-05-10 16:36 26441、Ext.Component 该组件在渲染的时候会默认的 ... -
ExtJs表单几种验证与扩展
2011-05-03 16:26 4851首先说明一下表单验证与其相关的一些设置 Ext ... -
ExtJs源码分析与学习—ExtJs事件机制(四)
2011-03-19 23:37 5267ExtJs组件事件——ExtJs自定义事件的处理 ... -
ExtJs源码分析与学习—ExtJs事件机制(三)
2011-03-15 20:20 3169这篇讲ExtJs对事件的管理和调用 Ext ... -
ExtJs源码分析与学习—ExtJs事件机制(二)
2011-03-15 20:15 2514在ExtJs源码分析与学习—ExtJs事件机制( ... -
ExtJs源码分析与学习—ExtJs事件机制(一)
2011-03-15 18:53 2743前面讲了ExtJs核 ... -
ExtJs源码分析与学习—ExtJs核心代码扩展
2011-01-20 19:16 2040前面三篇文章参考作者snandy总结了Ext中核心 ... -
ExtJs源码分析与学习—ExtJs核心代码(三)
2011-01-17 17:29 2114Ext为javascript的一些对象进行了扩展,主要有Str ... -
ExtJs源码分析与学习—ExtJs核心代码(二)
2011-01-17 16:23 1823接上篇 下面介绍Ext.js ...
相关推荐
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
NULL 博文链接:https://sonckchi.iteye.com/blog/1266437
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
抄些常用工具方便查找 ———-字符串 Ext.util.Format.capitalize(string str);//将首字母变大写 Ext.util.Format.ellipsis(string value, Number length);//截取指定length字符,将自动在尾处添加省略号’…’ Ext....
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一...28. extJs 2.0学习笔记(ext.js篇) 77
Ext+JS源码分析与开发实例宝典 是extjs3.0的学习书 书得内容很不错。深入解析extjs 资源是pdf文档. 本人自己还做了pdf的完整书签目录,便于方便和阅读. 文档比较大,一共压缩成12卷.需12卷全部下载完。 就第一个...
Ext+JS源码分析与开发实例宝典 是extjs3.0的学习书 书得内容很不错。深入解析extjs 资源是pdf文档. 本人自己还做了pdf的完整书签目录,便于方便和阅读. 文档比较大,一共压缩成12卷.需12卷全部下载完。 就第一个...
ExtJS源码分析与开发实例宝典.part1
ExtJS源码分析与开发实例宝典.part2
21、Ext.util.TaskRunner类 …………… 21 22、Ext.util.TextMetrics类 …………… 21 23、Ext.XTemplate类 ………………… 21 24、Ext.data.Connection类 ……………… 22 25、Ext.Ajax类 ………………………… 22 ...
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing ...
ExtJs选中var editor = new Ext.ux.grid.RowEditor详解.txt
6.12 Ext.util.TextMetrics得到块状化文本规格 6.12.1 块的绑定 6.12.2 实例化对象 6.12.3 获取文本的高度 6.12.4 获取文本的宽、高 6.12.5 获取文本的宽度 6.12.6 获取指定节点内文本块的宽、高 6.12.7 指定...
如何给Ext.panel增加一个背景图片