Ext js总结

1.面板

 

//初始化面板

 var viewport = new Ext.Viewport({

    
layout:'border',

    
items:[{

        
title: '服务菜单',

        
region: 'west',

        
contentEl: 'west-div',

        
split: true,

        
border: true,

        
collapsible: true,

        
width: 200,

        
minSize:200,

        
maxSize: 250

    
},{

        
title: '测试',

        
region: 'center',

        
contentEl: 'center-div',

        
split: true,

        
border: true,

        
collapsible: true

    
}]

 });

//树形菜单

var tree = new
Ext.tree.TreePanel({el:'tree',loader:treeloader});

 //根节点

   
 var root;

   
 root = new
Ext.tree.AsyncTreeNode({text:'服务名称'});

   
 tree.setRootNode(root);

 

tree.render();
 //定义右键菜单

    var
rightClick = new Ext.menu.Menu({

       
id :'rightClickCont',

       
items : [{

           
id:'rMenu1',

           
text : '添加',

           
icon:path+'/js/ext-2.0/resources/images/default/tree/drop-add.gif',

           
//增加菜单点击事件

           
handler:addService

       
},

       
{

           
id:'rMenu2',

           
icon:path+'/js/ext-2.0/resources/images/default/tree/drop-yes.gif',           

           
text : '修改',

           
handler:modifyService

       
}, {

           
id:'rMenu3',

           
icon:path+'/js/ext-2.0/resources/images/default/qtip/close.gif', 

           
text : '删除',

           
handler:deleteService

       
}]

    
});

  //绑定节点右键菜单功能

    
tree.on('contextmenu',function(node,event){ 

         
event.preventDefault(); //这行是必须的

         
rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单

        
});

     
//绑定节点点击事件

   
tree.on('click', function(node){

       
if(node.id!='root'){

           
alert(node.id);

           
alert(node.text);

          
// alert(node.attributes.serviceUrl)

       
}

   
});  

   
tree.on('beforeload', function(node) {

   
  tree.loader.dataUrl =
'tree/tree.xml'; // 定义每个节点的Loader

  });

   
tree.expandAll(); //展开树下的所有节点

   

}

//上面绑定右键菜单的方法

function addService(){

alert("增加服务")

}

function modifyService(){

alert("修改服务")

}

function deleteService(){

  alert("删除服务")

}

//获取选择的节点的属性值：

grid.getSelectionModel().getSelections()[i].get("serviceUrl")