ExtJs

在 ExtJS 中使用 Font Awesome

Font Awesome 是目前最流行的图标方案之一,是一套优质的图标字体库以及 CSS 图标框架。相对于传统的图片作为图标,字体图标支持自适应调节大小、可以使用字体的一些特性调整风格(颜色、大小、字体阴影)、更小的文件体积。

下载 Font Awesome

根据你或者项目的编程习惯,你可以通过以下几种方式获取最新版的 Font Awesome:

  1. 到 Font Awesome 项目主页, 点击 Download 按钮下载最新版本。
  2. 到 Font Awesome Github 主页, 下载最新版本或者 git clone 下来。
  3. 如果项目组有使用 bower 来管理第三方包,那么可以通过 bower install fontawesome 来获取 Font Awesome。

Font Awesome 的目录结构是这样,css 是 Font Awesome 提供的 CSS 类, fonts 内就是图标的字体文件,不同的格式是为了兼容不同的浏览器,并且新版本开始支持 SVG 的形式。less 和 scss 是用来管理 css 的。

升级到 ExtJS 5的过程记录

最近为公司的一个项目创建了一个 ExtJS 5 的分支,顺便记录一下升级到 ExtJS 5 所遇到的问题以及填掉的坑。由于 Sencha Cmd 的 sencha app upgrade 命令无法正常地讲项目升级至 ExtJS 5 (或许是方式不对) ,所以我的做法是新建一个 ExtJS 5 的项目,然后把 app 包拷贝过去,然后慢慢修复报错的东西,直到项目可以正常跑起。

说在前面:

升级的项目目前是一个十分初级的版本,代码量很少,只有导出报表和 dashboard 功能,主要是 Charts 的东西,并 涉及到 Grid 和 Tree 的使用,所以本文更多的是讲 ExtJS 5 Charts 部分的东西(变化的)。

ExtJs4常用函数

1.Ext.onReady()

该方法的调用发生在Document对象加载完毕之后,HTML的onload事件以及image加载之前.

第一个参数为加载后该方法调用的函数,第三个参数如果为true则第二个参数将成为fn的执行范围,第三个参数如果没有传递,则默认为true.

此函数非常重要,所有的资源都必须加载完毕方可进行ETJS的函数调用.Ext的DOm等都是动态生成的,而onReady的调用方法在所有Document对象都加载完毕的时候,所以为了保障请求是安全的,应该保持所有的处理都在onReady中进行.

调用格式:

Ext.onReady(Function fn,Object scope,boolean override)

参数说明:

fn:执行的函数.

scope:fn执行的范围,为可选参数.

override:表示是否以scope作为fn默认的执行范围,为可选参数,默认值为true.

返回值:无.

ExtJs4中的复选树级联选择

这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样。升级并不是一件简单的是,基本相当于重写了,3.x版本的复选框树级联操作是在网上找的一个现成的插件,直接搬运到4.2中就不能用了,但是又找不到可用的插件。百度谷歌了好久,还真让我搞出来一个方法,记录下来吧,也分享给大家。如有不合理或者更好的方法希望不吝赐教。

在3.x版本中要实现级联选择的话,我使用的是一个TreeCheckNodeUI.js这个文件百度一下都能找到啊,就不详细说明了,很好用。

在4.2中实现的方法是在treepanel的配置项viewConfig中添加函数onCheckboxChange,表示复选框选择状态发生变化是触发的事件,先把代码贴出来:

ExtJS 刷新后,默认选中上一次选中的节点

在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点。这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到这个节点上。

查询了好久终于找到一个可行的方案,就是通过节点的path来记录节点的位置信息,然后通过path从root节点开始逐层展开,直到最后一个节点。

完成的代码如下:

首先是extjs3.x版本中的方法:

聚合内容