Extjs 项目中常用的小技巧,也许你用得着(1)
时间:2022-05-03
本文章向大家介绍Extjs 项目中常用的小技巧,也许你用得着(1),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我在项目中遇到的一些知识点:
1.在GridPanel中显示图片,效果
对应的代码实现
{
text: '是否启用',
width: 80,
// xtype: 'checkcolumn',
dataIndex: 'IsEnabled',
renderer: function boolFromValue(val) {
if (val) {
return '<img src=../../Content/images/true.png>'
}
else {
return '<img src=../../Content/images/false.png>'
}
}
2.隐藏panel的标题栏
这个很简单,直接把
header: false,
3.调整Extjs中的所有字体的大小
- 只需把ext-all.css样式文件中的所有11px换成12px,这样就为统一的12px的字体了。
但是如果再想增大,那么这时候不光是把源文件的11px换成15px,而且需要把里面和font有关的12px换成15px。
改完之后按钮出现毛边,在样式文件中加
.ext-ie .x-btn-text-icon .x-btn-center .x-btn-text {
padding:3px 0px 0px 0px;
}
毛边就不见了!
- 由于在不同浏览器中,或者不同版本的同款浏览器中显示的Extjs字体大小不一样。而且看起来比较小。不顺眼。
在网上查之,获得一条有用信息:Extjs 在很多情况下使用 11px 字体,11px 大小是一种边缘字体,不同的浏览器对 11px 的渲染各不相同,IE 的渲染和12px 相似,而在 Firefox 中,则和 10px相似,导致字体在FF 中过小的问题。 为了能够彻底的解决字体大小问题,直接打开ext-all.css,查找所有的11px并替换为12px。问题解决了
上网找了好多资料,都说是加上
.x-btn-text{
font-size:15px;
}
这样就好了,但是在IE9和FF下还是不好用。
后来到ext-all.css里慢慢试,才找到设置的地方。
把如下代码放到别的css里引用就行了:
.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
background-position: 0 center;/*默认*/
background-repeat: no-repeat;/*默认*/
padding-left:18px;/*默认*/
height:16px;/*默认*/
font-size:15px;/*字体大小设置*/
}
4.相对应的,调整了字体大小,tabpanel的标题就会被遮挡住一部分,问题就出来了,怎么调整tabpanel的tab标题:
tabBar : {
height : 28,
defaults : {
height : 28
}
},
暂时总结这么几个,随后我会继续添加
- DeepLearning.ai学习笔记(三)结构化机器学习项目--week1 机器学习策略
- coursera 视频总是缓冲或者无法观看的解决办法
- DeepLearning.ai学习笔记(二)改善深层神经网络:超参数调试、正则化以及优化--week3 超参数调试、Batch正则化和程序框架
- DeepLearning.ai学习笔记(一)神经网络和深度学习--Week3浅层神经网络
- Andrew Ng机器学习课程笔记--week3(逻辑回归&正则化参数)
- Andrew Ng机器学习课程笔记--week1(机器学习介绍及线性回归)
- C++学习笔记之模板篇
- 计算机基础之计算机硬件系统
- 迭代器和生成器
- 函数相关知识汇总
- python编码问题一点通
- 数据类型总结(二)(列表,元组,字典)
- 数据类型总结(一)(数字,字符串)
- while补充,字符串和数字的内置方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 单细胞转录组高级分析四:scRNA数据推断CNV
- 0808-7.1.1-如何在CDP7.1.1指定Hive SQL的资源池队列
- iOS多线程之GCD、OperationQueue 对比和实践记录
- singleR的7个数据库文件下载失败的解决方案
- Spring Boot 如何快速集成 Redis 哨兵?
- 一行命令实现成“吨”测试数据的转码
- Jenkins参数化构建与触发
- 数据无法模拟,自动化受阻怎么办?
- Quickprop介绍:一个加速梯度下降的学习方法
- PandaSQL:一个让你能够通过SQL语句进行pandas的操作的python包
- 每个数据科学家都应该知道的20个NumPy操作
- 机器学习特性缩放的介绍,什么时候为什么使用
- 聊聊claudb的set command
- 聊聊claudb的zset command
- 聊聊claudb的pubsub command