配置 Ext.BLANK_IMAGE_URL 的原因（转载）

最新推荐文章于 2021-03-22 10:56:17 发布
转载 最新推荐文章于 2021-03-22 10:56:17 发布 · 845 阅读 · 0

本文解释了ExtJS中配置BLANK_IMAGE_URL的原因，通过使用此配置项与CSS结合，可以轻松实现界面换肤功能，无需修改组件代码。

配置 Ext.BLANK_IMAGE_URL 的原因（转载）

2013年09月01日  ⁄ 综合 ⁄ 共 854字 ⁄ 字号  小 中 大  ⁄ 评论关闭
id="iframeu1788635_0" src="http://pos.baidu.com/acom?rdid=1788635&dc=2&di=u1788635&dri=0&dis=0&dai=2&ps=236x716&dcb=BAIDU_UNION_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1456828799641&ti=%E9%85%8D%E7%BD%AE%20Ext.BLANK_IMAGE_URL%20%E7%9A%84%E5%8E%9F%E5%9B%A0%EF%BC%88%E8%BD%AC%E8%BD%BD%EF%BC%89%20%7C%20%E5%AD%A6%E6%AD%A5%E5%9B%AD&ari=1&dbv=2&drs=1&pcs=830x519&pss=980x256&cfv=0&cpl=4&chi=1&cce=true&cec=UTF-8&tlm=1456828799&ltu=http%3A%2F%2Fwww.xuebuyuan.com%2F840240.html&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DPnyfnD1uNZstwtuZ2XGVKFwypMklEdSB4DdVPOB9ASGEMMbiMWSgrXP46SvNyJDh%26wd%3D%26eqid%3Dbf91f6670001776d0000000556d5712a&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1456828800&qn=90360b05a0571924&tt=1456828799576.179.683.685" width="336" height="280" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="margin: 0px; padding: 0px; border-width: 0px; border-style: initial; font-size: 13px; vertical-align: bottom; background: transparent;">

在分析ExtJS的源码时，对为什么要在Ext中配置BLANK_IMAGE_URL属性不知所以然。后来也没有刻意对着一细节做研究，大有要不了了之的倾向... ...

   不过最近在看Ext中jack的window导航式例时，看到一个细节，让我顿时明白了作者的这一做法的初衷。

   作者在对一些需要应用图片或者图标的地方，都没有显式写明要应用的图标（片）路径，而都是通过css来配置，许多应用图标的地方刚开始都Ext.BLANK_IMAGE_URL来替代，而在css在加载之后就会替换到真实的图标路径 。这一招就彻底解决了界面的换肤问题。

   看个例子:

 在desktop例子中，快捷方式图标的初始路径是指向空白的images/s.gif

 <dl id="x-shortcuts">
        <dt id="grid-win-shortcut">
            <a href="#"><img src="images/s.gif" />
            <div>Grid Window</div></a>
        </dt>
     </dl>

然后，在css中修改为：

#grid-win-shortcut img {
    width:48px;
    height:48px;
    background-image: url(../images/grid48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/grid48x48.png', sizingMethod='scale');
}

 

有些需要图标修饰的组件在动态创建时，图标的src一般都是指向Ext.BLANK_IMAGE_URL ，然后呢，再在css指向特定的图标位置。

然后以后要换肤的话，直接替换css文件就可以了。

      最后实践也证明，如果没有正确配置这个BLANK_IMAGE_URL，可能在许多控件上显示不了css文件中定义的装饰图标。
Ext.Net 1.x_Ext.Net.常用控件属性集合
德仔
09-14 5422
转自：http://blog.csdn.net/lulu_jiang/article/category/669748  Ext_数字输入框_Ext.form.NumberField: /* Ext.form.NumberField独有配置表: allowDecimals             Boolean             是否允许输入小数(默认true) allo
Ext.Tree.Panel
01-22
- `Ext.BLANK_IMAGE_URL`通常用于设置占位符图片的URL，防止因图片未加载而出现的错误图标。 - `TreeLoader`对象用于从服务器加载树节点数据。可以设置`dataUrl`属性指定数据源，也可以在加载前的事件中动态设置。...
Ext.BLANK_IMAGE_URL 的作用 原因 配置 使用 实例
逸雨涵梦的专栏
11-11 1万+
在使用ExtJS时，我们往往需要在使用之前加入这么一句： Ext.BLANK_IMAGE_URL = "....."其中省略部分为s.gif在extjs包中的路径。 那么ExtJS为什么要设置这样一个变量呢？如果我们不这样做会带来什么后果？ 首先说后果： 如果没有以上那句代码，Ext会按照默认的地址：http://www.extjs.com/s.gif去下载这张图片，由于网络不通或者速度较
Ext.BLANK_IMAGE_URL
小宝
06-13 171
相信各位读者在学习Ext官方示例的时候，会发现每个例子都会引用examples.js。examples.js文件中的第一句就是： Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif'; 这是一句将图片地址赋给Ext.BLANK_IMAGE_URL变量的语句。单单看这句话看不出有什么特殊，下面我们看Ext源代码GridView....
class FilePreviewHandler(tornado.web.RequestHandler): async def get(self): pool_name = self.get_argument("pool") raw_file_name = self.get_argument("file") file_name = urllib.parse.unquote(raw_file_name) if pool_name not in RESOURCE_POOLS: self.set_status(404) self.render("404.html") return pool_path = RESOURCE_POOLS[pool_name]["path"] file_path = os.path.normpath(os.path.join(pool_path, file_name)) real_request_path = os.path.realpath(file_path) real_pool_path = os.path.realpath(pool_path) if not real_request_path.startswith(real_pool_path): self.set_status(403) self.write("禁止访问此文件路径") return if not os.path.exists(file_path): self.set_status(404) self.render("404.html") return ext = os.path.splitext(file_name)[1].lower() # 特别处理 PDF 文件：使用本地 PDF.js 预览 if ext == ".pdf": # 构造预览链接，不要双重编码 proxy_url = f"/preview?pool={pool_name}&file={urllib.parse.quote(file_name)}" # 传递原始 URL，不要再次编码 pdf_url = f"/static/pdfjs/web/viewer.html?file={proxy_url}" self.redirect(pdf_url) return # 设置 MIME 类型 mime_type = { '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation', '.pdf': 'application/pdf', '.txt': 'text/plain', '.md': 'text/markdown', '.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript', '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.mp4': 'video/mp4', '.webm': 'video/webm', '.ogg': 'video/ogg', '.mp3': 'audio/mpeg', '.wav': 'audio/wav', '.flac': 'audio/flac', }.get(ext, mimetypes.guess_type(file_name)[0] or 'application/octet-stream') encoded_filename = urllib.parse.quote(file_name.encode('utf-8')) self.set_header("Content-Disposition", f'inline; filename*=UTF-8\'\'{encoded_filename}') file_size = os.path.getsize(file_path) range_header = self.request.headers.get('Range') is_download = not range_header and ext in ['.mp4', '.webm', '.ogg', '.pdf'] if is_download: self.set_header('Content-Type', mime_type) self.set_header('Content-Length', str(file_size)) self.set_status(200) if os.name == 'posix': fd = os.open(file_path, os.O_RDONLY) try: await tornado.ioloop.IOLoop.current().run_in_executor( None, os.sendfile, self.request.connection.fileno(), fd, None, file_size ) finally: os.close(fd) else: with open(file_path, 'rb') as f: while True: chunk = f.read(1024 * 1024 * 4) if not chunk: break try: self.write(chunk) await self.flush() except tornado.iostream.StreamClosedError: return self.finish() elif ext in ['.mp4', '.webm', '.ogg', '.pdf', '.mp3', '.wav', '.flac']: self.set_header('Accept-Ranges', 'bytes') start = 0 end = file_size - 1 if range_header: self.set_status(206) start_bytes, end_bytes = range_header.replace('bytes=', '').split('-') start = int(start_bytes) if start_bytes else 0 end = int(end_bytes) if end_bytes else file_size - 1 self.set_header('Content-Range', f'bytes {start}-{end}/{file_size}') self.set_header("Content-Length", str(end - start + 1)) self.set_header('Content-Type', mime_type) chunk_size = 4096 * 16 async with aiofiles.open(file_path, 'rb') as f: await f.seek(start) remaining = end - start + 1 while remaining > 0: chunk = await f.read(min(chunk_size, remaining)) if not chunk: break try: self.write(chunk) await self.flush() except tornado.iostream.StreamClosedError: return remaining -= len(chunk) self.finish() elif ext == '.txt': self.set_header('Content-Type', 'text/plain; charset=UTF-8') async with aiofiles.open(file_path, 'r', encoding='utf-8') as f: content = await f.read() self.write(content) self.finish() elif ext in ['.png', '.jpg', '.jpeg', '.gif', '.md', '.pdf', '.docx', '.xlsx', '.pptx']: self.set_header('Content-Type', mime_type) async with aiofiles.open(file_path, 'rb') as f: data = await f.read() self.write(data) self.finish() else: self.set_status(400) self.write("不支持预览此文件类型") 这是我的这个方法，你在我提供的这个方法代码中修改后给我把修改后的方法代码完整的给我提供过来吧
最新发布
08-30
}.get(ext, mimetypes.guess_type(file_name)[0] or 'application/octet-stream') encoded_filename = urllib.parse.quote(file_name.encode('utf-8')) self.set_header("Content-Disposition", f'inline; ...
extjs3.2api中文
01-23
"BLANK_IMAGE_URL"是ExtJS中的一个常量，它通常被用作一个占位符图像的URL。这个1×1像素的透明图片在JavaScript和CSS中起到了关键作用。在Web开发中，有时需要一个不可见的图像来作为某些元素的默认值或占位符，...
Ext_数字输入框_Ext.form.NumberField
热门推荐
66
04-11 2万+
<!--/*Ext.form.NumberField独有配置表:allowDecimals Boolean 是否允许输入小数(默认true)allowNegative Boolean 是否允许输入负数(默认true)baseChars String
关于Ext.BLANK_IMAGE_URL
keener锋的专栏
04-11 2807
在ExtJS中BLANK_IMAGE_URL是 BLANK_IMAGE_URL : (isIE6 || isIE7) ? '/' + '/www.sencha.com/s.gif' : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' IE6,IE7不支持url内嵌bas
[ExtJS3.2源码每天一小时]ExtJS中BLANK_IMAGE_URL的由来（十三）
ting570732的博客
09-28 175
[size=medium] 在使用ExtJS时，我们往往需要在使用之前加入这么一句： Ext.BLANK_IMAGE_URL = "....."其中省略部分为s.gif在extjs包中的路径。 那么ExtJS为什么要设置这样一个变量呢？如果我们不这样做会带来什么后果？ 首先说后果： 如果没有以上那句代码，Ext会按照默认的地址：http://www.extjs.com/s.g...
10.1 从Ext.BLANK_IMAGE_URL说起
kinglino520的专栏
06-11 528
 第10章  定制Ext外观毋庸置疑，软件系统中现今的外观方案应该是能灵活更换的，应该是能够跨越平台之间差异的。基于Ajax的方案的界面是一种集成了各种标准技术的产物，因此在不同的浏览器、不同的平台上，所渲染出来的效果或者是所表达的软件质感、外观都应是一致的，无须考虑硬件、系统的直接因素。这种"放之四海而皆准"的标准技术反而将跨平台这一美好的愿望体现出来。所谓标准会促进生产力发
ext js 拖拉框
weixin_45487068的博客
03-22 173
Ext.BLANK_IMAGE_URL = __prime.constants.contentPath + '/ext/resources/images/default/s.gif'; var clientWidth = document.body.clientWidth - 15; var clientHeight = document.body.clientHeight; var selectbankInfoArr= []; var data = []; var bankCde = ""; var tr
extjs grid renderer用法
weixin_30635053的博客
10-27 291
今天在做项目时，需要在列表中的某列添加一个超链接，首先要取得当前选中行的数据，判断数据类型，然后链接到不同的页面，研究下。发现ExtJs提供了一个很强的方法如下： var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({ header: "", width: 20, align: 'center' }),{ header: '',...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值