Extjs4 treestore 分步加载数据

这里的分步加载就是首先自动加载一级数据,当点击展开时再加载下级数据。代码实现如下:

js文件:

xtype : 'treepanel',
border : false,
store : Ext.create('Ext.data.TreeStore',{
    // 自动加载
    autoLoad: true,
    fields: ['id', 'text'],
    root: {id: 'root', expanded: true},
    proxy:{    
        type:'ajax',   
        url:'?c=Nav&a=load',
        reader:{    
            type:'json',
            root:'data'
        }
    }
}),
rootVisible: false

后台代码,以PHP为例,其他语言类似:

// treepanel,自动加载和点击展开时请求url中的方法
public function load(){
	$nm = new NavModel();

	$id = param_get('id');

	if($id === 'root'){
                // js中设置了跟节点的id 为 root,所以,当获取到的 id 为 root 时,获取第一级一级数据
		$result = $nm->loadRoot();
	}else{
                // 当 id 不为root 时,根据 id 获取该节点的下级。本例子中数据中有个parentid字段,根据该字段查找子节点
		$result = $nm->loadChildren((int)$id);
	}

	success($result);
}

下面是Model层,代码:

// 获取根节点数据
public function loadRoot(){
	$sql = 'select n_id as `id`, n_name as `text`, n_type, n_level from nav where n_parentid = 0 order by n_order asc';
	return DB::fetchAssoc($sql);
}

// 根据id获取子节点
public function loadChildren($id){
	$sql = 'select n_id as `id`, n_name as `text`, n_type, n_level from nav where n_parentid = ? order by n_order asc';
	return DB::fetchAssoc($sql, array($id));
}

 

发表评论