Extjs4.x TreePanel動態加載數據

時間 2019-12-08

標籤 extjs4.x extjs treepanel 動態加載數據简体版

原文原文鏈接

在現實Ext開發中，TreePanel加載數據時，當數據量比較龐大，而且是從後臺獲取時，爲了提升效率通常採用動態加載數據的方式！下面採用Ext4.x提供的MVC方式作個下小例子，以下是運行效果！【後臺採用了Spring的MVC，由於它用的是註解，註解比較方便，你能夠用struts,servlet等均可以！】javascript

如項目結構css

1.首先什麼都不用說，先得導入Ext的開發包,我用的是ext-4.2.1,在index.jsp中引入以下文件html

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Tree</title>
    <!-- 引入extjs的整體樣式 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ext-4.2.1/resources/css/ext-all.css">
    <!-- 引用公用的extjs -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.2.1/bootstrap.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
    <!-- 引用本身編寫的js -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/app/App.js"></script>
  </head>
  <body>
  </body>
</html>

View Code

2.TreeView.jsjava

Ext.define('AM.view.TreeView',{
    extend:'Ext.tree.Panel',
    alias : 'widget.treelist',
    frame:true,
    title: '操做菜單',
    width:250,
    height:500,
    store:'TreeStore',
    rootVisible:false,
    initComponent : function(){
        this.callParent(arguments);
    }
});

View Code

3.TreeStore.jsnode

Ext.define('AM.store.TreeStore',{
    extend:'Ext.data.TreeStore',
    proxy: {
         type: 'ajax',
         url: 'Tree/getTreeList.do'
    },
    reader : {
          type : 'json'
    },
    root: {
         text: '樹根',
         id: '00',
         expanded: true
    },
    folderSort: true,
         sorters: [{
            property: 'id',
            direction: 'ASC'
     }]
});

View Code

4.TreeController.jsweb

Ext.define('AM.controller.TreeController',{
    extend : 'Ext.app.Controller',
    init : function(){
        var tree = null;
        this.control({
            'treelist':{
                render:function(t, eOpts){
                    tree = t;
                },
                beforeitemexpand:function(node, eOpts ){
                    Ext.apply(tree.getStore().proxy.extraParams,{
                        id:node.data.id
                    });
                    //tree.getStore().load();
                }
            }
        });
    },
    views:[
        'TreeView'
    ],
    stores:[
        'TreeStore'
    ],
    models:[]
});

View Code

5.App.jsajax

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.Loader.setConfig({
        enabled : true
    });
    Ext.application({
        name : 'AM',
        appFolder : 'app',
            launch : function(){
                Ext.create('Ext.container.Viewport',{
                    layout :'form',        
                    loadMask:{
                        msg : '正在加載，請稍後...'
                    },
                    items : {
                        xtype : 'treelist'
                    }
                });
        },
        controllers : [ 'TreeController']
    });
});

View Code

6.後臺數據，通常是從數據庫取得的，爲了省事這裏就隨便寫寫！，使用的Spring的MVC！spring

package com.phome.spring.action;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.phone.spring.bean.TreeBean;

@Controller
@RequestMapping("/Tree")
public class TreeListAction {
    @RequestMapping("/getTreeList")
    public void getTreeList(HttpServletRequest request,
            HttpServletResponse response,
            @RequestParam(value = "id", required = false) String id) {
        try {
            List<TreeBean> list = null;
            if (id == null || id.equals("00")) {
                list = new ArrayList<TreeBean>();
                list.add(new TreeBean("01", "系統設置", false));
                list.add(new TreeBean("02", "全局配置", false));
                list.add(new TreeBean("03", "商戶管理", false));
            } else if (id.equals("01")) {
                list = new ArrayList<TreeBean>();
                list.add(new TreeBean("0101", "用戶管理", true));
                list.add(new TreeBean("0102", "角色管理", true));
                list.add(new TreeBean("0103", "日誌記錄", true));
            } else if (id.equals("02")) {
                list = new ArrayList<TreeBean>();
                list.add(new TreeBean("0201", "商戶配置", false));
                list.add(new TreeBean("0202", "終端配置", false));
                list.add(new TreeBean("0203", "其餘配置", false));
            } else if (id.equals("03")) {
                list = new ArrayList<TreeBean>();
                list.add(new TreeBean("0301", "商戶管理", false));
                list.add(new TreeBean("0302", "指令管理", false));
                list.add(new TreeBean("0303", "監控管理", false));
            }
            if (list != null) {
                StringBuffer jsonStr = new StringBuffer("[");
                for (TreeBean tree : list) {
                    JSONObject jb = JSONObject.fromObject(tree);
                    jsonStr.append(jb).append(",");
                }
                jsonStr.deleteCharAt(jsonStr.length() - 1);
                jsonStr.append("]");
                response.setCharacterEncoding("utf-8");
                response.getWriter().write(jsonStr.toString());
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

View Code

7.說明：TreeStore是能夠沒有fields配置項的，後臺JSON數據格式以下數據庫

[{"id":"01","text":"系統設置","leaf":false},{"id":"02","text":"全局配置","leaf":false},{"id":"03","text":"商戶管理","leaf":false}]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。