Ext树的兑现的步骤

Ext树的实现的步骤
Ext树实现步骤，一起分享

Ext.onReady(function() {
  var serviceRoot = new Ext.tree.AsyncTreeNode({
        id:"XXXX",//树根节点ID
        draggable : false,
        expanded:true,
        text:"XXXX",//树根节点名称
        cls:'folder'
    }); 
    var serviceLoader = new Ext.tree.TreeLoader({
        dataUrl:"listAdminComponentShow.view",
        requestMethod :'POST',
        listeners:
        {
    beforeload:function(obj,node,response)
{
            serviceLoader.baseParams = {id: node.id,tree_type:tree_type,parentServiceId: node.id};
     }
        }
    });
    //定义的是一个按钮
    var showAll = new Ext.Button({
        text:'显示所有组件名',
        id:'showAll',
        handler : function() {
tree_type='1';
serviceRoot.reload();
hiddenNull.setVisible(true);
  showAll.setVisible(false);
}
        });
  
    //树 的展现
     var servicepanel = new Ext.tree.TreePanel({
        id:'serviceTreeId',
       tbar : new Ext.Toolbar(
{items : [showAll ,hiddenNull]}),
        border:false,  
        animate:true,  
        useArrows: true,
        containerScroll:true,
        border: false,
        autoShow:true,
        autoScroll:true,
        showPreview : true,
autoFill : true,
margins:'0 5 5 0',
        loader:serviceLoader//加载的数据
});  


    Ext.getCmp('serviceId').setValue('');
    Ext.getCmp('interfaceName').setValue('');
    Ext.getCmp('serviceType').setValue('');
    Ext.getCmp('serviceURI').setValue('');

       //点击触发事件
    gridStore.load({
    params: { id:node.id,
                start:0,
            limit:Ext.getCmp('gridPagingToolbar').pageSize ,
        serviceId:Ext.getCmp('serviceId').getValue(),
        interfaceName:Ext.getCmp('interfaceName').getValue(),
        serviceType:Ext.getCmp('serviceType').getValue(),
        serviceURI:Ext.getCmp('serviceURI').getValue()
                    }
        });
     });
// -------------------------------------left tree end-------------------store : gridStore,
stripeRows : true,
region : 'center',
        containerScroll:true,
frame : false,
margins:'0 5 5 0',
viewConfig : {
forceFit : true,
enableRowBody : true,
showPreview : true,
autoFill : true,
autoShow:true
},

columns : [
//迭代的列名，数据
{
header : '<fmt:message key="component.register.service.uri"/>',
dataIndex : 'serviceURI',
sortable : true
}, {
header : '<fmt:message key="component.register.interface.name"/>',
dataIndex : 'interfaceName',
sortable : true
} ....],//分页
bbar : new Ext.PagingToolbarXuan( {
id : "gridPagingToolbar",
pageSize : 20,
store : gridStore,
displayInfo : true,
comboxParam : [ 20,30,40 ]
}),
tbar :toolbar,
listeners : {
rowdblclick  : function (obj , index , e)
{
var  str = e.getTarget().innerText;
if(str == "" || str.indexOf("<") != -1)
{
return;
}
if(window.clipboardData.setData("Text",str))
{
Ext.example.msg('复制成功', str);
}
}
}
});
// -------------------------------------right grid

// -------------------------------------window begin-------------------
winGridStore = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : 'searchInfoByService.view'
}),
reader : new Ext.data.JsonReader( {
root : 'result',
totalProperty : 'total',
fields : [ {name : 'address'},{name : 'webport'}, {name : 'port'}, {name : 'memory'} ,{name : 'state'} ]
}),
listeners : {
beforeload : function(parent, node, rollback) {
this.baseParams = {
};
}
}
});
var winGrid = new Ext.grid.GridPanel( {
//名称，地址，服务端口，通信端口，内存，状态
id : "winGrid",
store : winGridStore,
frame : false,
viewConfig : {
forceFit : true,
enableRowBody : true,
showPreview : true,
autoFill : true
},
columns : [
{
header : ' <fmt:message key="component.register.address"/>',
dataIndex : 'address',
width : 100,
hidden : false,
sortable : true
}, {
header : '<fmt:message key="component.register.service.port"/>',
dataIndex : 'webport',
sortable : true
}, {
header : '<fmt:message key="component.register.web.port"/>',
dataIndex : 'port',
hidden : false,
sortable : true
}]
});

//弹出框
showServiceWin = new Ext.Window( {
title : " <fmt:message key='component.register.exmple.list'/>",
closeAction : 'hide',
modal : true,
layout : 'fit',
width : 700,
height : 500,
items : [ winGrid ]
});
// -------------------------------------window end----------------------------
// -------------------------------------layout begin--------------------------
var viewport = new Ext.Viewport( {
layout : 'border',
items : [ new Ext.Panel( {
region : 'west',
title : '<fmt:message key="component.register.comp.type"/>',
layout : 'fit',
split : true,
margins:"0 0 5 5",
width : 200,
minSize : 200,
maxSize : 400,
collapsible : true,
items : [ servicepanel ]
}), grid ]
});
// -------------------------------------layout end-------------------
});