【？】Extjs动态树？

有的阿，我以前的项目就是那样做的。一个后台管理界面，点击左边的树，send request拿数据。不过很久没用过extjs了。你可以查下API.

很早以前写的一个demo
节点点击事件
tree2.on("itemclick", function(view, record, item, index, e) {
                        alert("点击的节点ID是：" + record.raw.id + ",文字是：" + record.raw.text);
                        parid = record.raw.id;
                        store.load({ params: {
                            id: record.raw.id
                        }
                        });
右边显示列表
  store.load({ params: {
InfoOutline: InfoOutline, Parameter: Parameter, id: parid
                              }
                              });

Lz想要Demo 留下邮箱我发你份

思路：左面树的节点单击事件里，获取节点标示，从后台获取JSON数据，绑定到另外一个控件(tree,grid,combox等)上

<%@ page language="java"  pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript" src="../locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript">
     Ext.onReady(function(){

     var treeStore=Ext.create("Ext.data.Store",{
fields:[{name:"id",type:"string"},{name:"name",type:"string"}],
proxy:{
type:"ajax",
reader:{type:"json"},
url:"lizi/tree4Server.jsp?id=1"
},autoLoad:true
    });
     treeStore.load();

     var datas = [
[1,'张三',2311,new Date(1979,09,13),true],
[2,'李四',2033,new Date(1978,10,01),false],
[3,'王五',2122,new Date(1981,01,01),false]
    ];

    //store
    var store = Ext.create('Ext.data.TreeStore', {
     root: {
        expanded: true,
        itemid : 'itemid',//指定节点参数名
        children: [
            { 'text': "家谱1", expanded: true, children: [
                { 'text': "张姓", 'leaf': true ,'id':'1','url':'lizi/tree4Server.jsp'},
                { 'text': "李姓", 'leaf': true ,'id':'2','url':'lizi/tree4Server.jsp'}
            ] }
        ]
    }

           });

Ext.create('Ext.panel.Panel',{
title :'布局示例',
//layout : 'column',
layout:{
    type:'table', //table布局
    columns:2
    },

frame :true,
height : 700,
width : 1000,
renderTo: Ext.getBody(),
defaults : {
bodyStyle:'background-color:#FFFFFF;',
height : 500,
frame : true
},

items: [{
    xtype: 'treepanel',
    id:'t_id',
                    title: '基础查询',
                    width:200,
                    colspan:1,   //占一列
                    store: store,
    rootVisible: false,
    renderTo: Ext.getBody(),

    listeners:{
                  itemclick:function(m,r,d,e,t){
var url=treeStore.getById(r.get("id")).get("name");
Ext.Msg.alert("itemid",url);

if(treeStore.getById(itemid)){
   var url=treeStore.getById(itemid).get("url");

//var url='lizi/tree4Server.jsp';
Ext.Msg.alert("itemid",url);

var _store = new Ext.data.Store({
autoLoad:true,
data:datas
//model:'_model'
});

    //addPanelToTab("content_panel","pp","用户列表",createCxjgPanel());

                  //Ext.Msg.alert("aa","aaaaaaaaaaaaa");
                  }
                 }
        }


        },
        {
    xtype:'gridpanel',
                    title: '列表',
                    width:600,
                    colspan:1,
                    renderTo: Ext.getBody(),
                    store: {
        fields: [{id:'id',type:'number'},{name:'name',type:"string"},{name:'salary',type:"string"},{name:'birthday',type:"date"},{name:'bool',type:"boolean"}],

        proxy: {
            type: 'ajax',
            url: 'lizi/tree4Server.jsp',
            //data : datas,
            reader:{type:"json"}
        },
        autoLoad: true
    },

    selModel:new Ext.selection.CheckboxModel({mode:"MULTI"}),
            columnLines:true,

                    columns: [
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'id',
                            text: 'id'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'name'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'salary',
                            text: 'salary'
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'birthday',
                            text: 'birthday'
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            text: 'bool'
                        }]
    }]

});

/*
                            bbar: Ext.create('Ext.PagingToolbar', {
            pageSize: 10,
            store: store,
            displayInfo: true,
            plugins: Ext.create('Ext.ux.ProgressBarPager', {})
            });**/
});

       /**
//数据准备
var _rzdatas = [
['刘备','蜀国','2011/12/1','192.168.0.1','用户登录','登录','成功'],
['张飞','蜀国','2011/12/1','192.168.0.1','用户修改','修改','成功'],
['关羽','蜀国','2011/12/1','192.168.0.1','比对实例','增加','成功']
];
//注册数据模型
Ext.regModel("rzmodel",{
fields:['czyh','czsujg','czsj','ip','czdxlx','czlx','czjg'],
        proxy:{
        type:'memory',
        //data:_xxdatas,
        reader:'array'
        }
});
//准备数据集
var _rzStore = new Ext.data.Store({
autoLoad:true,
data:_rzdatas,
model:'rzmodel'
});
  */

    </script>  </head>



  <body>
  </body>
</html>

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String itemId = request.getParameter("id");
String result="";
if("1".equals(itemId)){
result = "{'id':'1','name':'张三','salary':'2311','birthday':new Date(1979,09,13),'bool':true}";
}else if("2".equals(itemId)){
result = "{'id':'2','name':'李四','salary':'2033','birthday':new Date(1978,10,01),'bool':false}";
}
response.getWriter().write(result);
%>

listeners:{
            itemclick:function(m,r,d,e,t){
//var url=treeStore.getById(r.get("id")).get("name");
//Ext.Msg.alert("itemid",url);

//if(treeStore.getById(itemid)){
  // var url=treeStore.getById(itemid).get("url");

//var url='lizi/tree4Server.jsp';
Ext.Msg.alert("itemid",url);
                //}
             }
          }监听怎么写？

    listeners:{
                  itemclick:function(m,r,d,e,t){
var ids=r.store.getAt(e).get("id");
         //创建Ajax代理
var ajaxProxy = new Ext.data.proxy.Ajax({
url : 'tree4Server.jsp',
model: 'rzmodel',
    reader: 'json'
               });
//创建请求参数对象
var operation = new Ext.data.Operation({
    action: 'read',//设置请求动作为read,
    id:ids
});
//读取数据
ajaxProxy.doRequest(operation,callBack);
//doRequest方法的回调函数
function callBack(operation){
//获取原始响应数据
var responseText = operation.response.responseText;

_rzStore.removeAll();
_rzStore.add(Ext.decode(responseText));

};
                 }
        }

ajax 这个方法。
_rzStore.removeAll();

求extjs写一个动态树的源码，拜托各位兄弟姐妹们了。我邮箱：[email protected]

调试易

【？】Extjs动态树？

解决方案 »