jQuery MiniUI,快速开发WebUI界面

ExtJs4

ExtJS 3升级到ExtJS 4

前言


若干年前,使用ExtJS 3 开发了一个系统。
随着ExtJS 4的出现,总是会看到或听到关于Ext 比较多的言论是 :
ExtJS 4 较Ex JS 3 有较大的改变。
ExtJS 4不向下兼容。
ExtJS 4 开始收费了。
基于这些,对ExtJS 4一直就望而却步。

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版本中的方法:

ExtJs4新发现10_获取复选框(checkboxgroup&checkbox)的值

1.fieldset(checkbox) 获取值

复选框组件定义如下:
{
xtype: 'fieldset',
title: '兴趣',
autoHeight: true,
defaultType: 'checkbox',
hideLabels: true,
id: 'xq',
layout: 'hbox',
defaults: {
flex: 1
},
//vertical: false,
items: [
{ boxLabel: '游泳', name: 'xqn', inputValue: '4', checked: true },
{ boxLabel: '玩儿', name: 'xqn', inputValue: '5' },
{ boxLabel: '游戏', name: 'xqn', inputValue: '6' }
]
}

聚合内容